我爱小程序
如何在vue项目中 动态给placeholder设置 后台过来的样式
网友回复
vue可以试着采用下面的方法
原生修改方式：
<input id="ipt" placeholder="请输入啊啊啊" type="text" />
<style>
/*支持css变量，自定义*/
@supports((--a:0)){
*{
--color:blue; /*默认颜色*/
--fontSize:10px; /*默认字体大小*/
}
input::-webkit-input-placeholder{
color:var(--color);
}
::-moz-placeholder{
color:var(--color);
}
::-ms-input-placeholder{
color:var(--color);
}
}
/*不支持css变量,只能默认颜色*/
@supports(!(--a:0)){
input::-webkit-input-placeholder{
color:gray;
}
}
</style>
<script>
//js修改css变量
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
//支持
if (isSupported) {
document.getElementById("ipt").style.setProperty('--color', 'yellow');/* 'yellow' 可以使用vue获取的后台数据，'--color'也可以，但要在placeholder那里提前设置默认值样式*/
} else {
/* 无法修改变量*/
}
</script>
设置的值没生效 取得默认值pink