内联样式不生效怎么解决
<el-input class="titleInput2" type="text" placeholder="标题"
v-model="documentJson.title.text"
:style="{
'font-size': documentJson.title.font_size + 'px', 这行有效
'font-weight':'bolder', 这行无效,怎么才能让它有效??
'letter-spacing': '2px', 这行无效 怎么才能让它有效??
}"
/>
外联如下
都有效。但是目的是要写内联,内联才支持 documentJson.title.font_size + 'px' 这种变量。 外联 v-bind的 变量不支 带点号的
.titleInput2 :deep(.el-input__inner){
letter-spacing: v-bind(letterSpacing); #v-bind中的变量不支持 documentJson.title.letter_spacing 这种,要通过增加变量来转换,所以想知道内联生效的写法
font-weight: bolder;
font-family: '宋体'!important; #这个不加!important 不生效
}
你好 你这个不是不生效,而是被里面input的样式覆盖了 如果想这么写就要把里面的样式初始化 应该可以解决
.el-input__wrapper{
'font-weight':'inherit';
'letter-spacing': 'inherit';
}
.el-input__inner{
'font-weight':'inherit';
'letter-spacing': 'inherit';
}
亲测有效 把:style改成:input-style
<el-input class="titleInput2" type="text" placeholder="标题"
v-model="documentJson.title.text"
:input-style="{
'font-size': documentJson.title.font_size + 'px',
'font-weight':'bolder',
'letter-spacing': '2px',
}"
/>
逗号改成;试试
css命令终止以 “;”结尾
一个是逗号改为分号 而且你直接可以写死 没必要动态style style="
'font-size': documentJson.title.font_size + 'px'; 这行有效
'font-weight':'bolder'; 这行无效,怎么才能让它有效??
'letter-spacing': '2px'; 这行无效 怎么才能让它有效??
"
element 组件 内联样式没有应用在最底层的input ,所以导致你的样式没有生效,但可以通过以下方式得到你想要的效果:
const input = ref(null);
const inputTarget = input.value?.ref;
inputTarget.style =`font-size: ${20}px;font-weight:bolder;letter-spacing: 12px`;
最终效果:
这样,去掉 - ,下一单词首字母大写
:style="{
display: 'inline-block',
width: '45%',
position: 'absolute',
textAlign: 'center'}"
<el-input
:input-style="{'font-size': documentJson.title.font_size + 'px'; 这行有效
'font-weight':'bolder'; 这行无效,怎么才能让它有效??
'letter-spacing': '2px'; 这行无效 怎么才能让它有效??
}"
></el-input>
文档:
style属性名称错误,改为input-style https://element-plus.org/zh-CN/component/input.html#input-%E5%B1%9E%E6%80%A7