Vue.js-根据文本长度将CSS样式应用于textarea [英] Vue.js - Apply CSS style for textarea based on text length
问题描述
我有Vue应用,我想添加以注释形式内联的Facebook启发式按钮.我有普通的JS原型正在工作.但是我无法使其在Vue组件中工作.我实现了两个变体,两个变体都被调用,但是样式都没有改变.
I have Vue app and I would like to add Facebook inspired buttons inlined in a comment form. I had plain JS prototype that was working. But I cannot make it work inside Vue component. I have implemented two variants, both are called but the style is not changed in either.
- 回调监听输入事件
- class属性中的条件
沙箱在其中: https://codesandbox.io/s/black-mountain- tryro
回调变体:
<b-form-textarea
class="textarea"
ref="textareaRef"
rows="1"
max-rows="8"
@input="adjustIconsInTextarea"
placeholder="Type something"
v-model="text"
></b-form-textarea>
adjustIconsInTextarea() {
const textComment = this.$refs.textareaRef;
const icons = this.$refs.iconsRef;
if (textComment.value.length > 140) {
textComment.style.padding = "13px 50px 34px 32px";
icons.style.top = "-36px";
icons.style.right = "72px";
} else {
textComment.style.padding = "10px 174px 5px 28px";
icons.style.top = "-45px";
icons.style.right = "68px";
}
},
这失败了,因为Vue组件没有syle属性:textComment.style.padding
This one fails that Vue component has no syle property: textComment.style.padding
CSS变体:
<b-form-textarea
class="textarea"
:class="wrapIcons ? 'textarea_short' : 'textarea_long'"
rows="1"
max-rows="8"
placeholder="Type text"
v-model="text"
></b-form-textarea>
computed: {
wrapIcons() {
return this.text.length > 140;
}
.textarea {
height: 40px;
overflow-y: hidden;
}
.textarea_short {
padding: 10px 174px 5px 28px;
}
.textarea_long {
padding: 13px 50px 34px 32px;
}
无论wrapText计算的属性值如何,该样式都不会修改样式.
This one does not modify the style regardless of wrapText computed property value.
如何使其工作?哪种方法更好?
How to make it work? Which approach is better?
推荐答案
您的类语法错误. :class
期望将类名称作为键并将true
或false
作为值的对象.像这样尝试:
Your class syntax is wrong. :class
expects an object with the class name as key and true
or false
as values. Try it like this:
:class="{icons_long: !wrapIcons}"
我认为我会采用CSS方法
In my opinion, i would go with the CSS approach
这篇关于Vue.js-根据文本长度将CSS样式应用于textarea的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!