javascript - Vue.js - 根据文本长度为 textarea 应用 CSS 样式
问题描述
我有 Vue 应用程序,我想在评论表单中添加受 Facebook 启发的按钮。我有一个可以工作的普通 JS 原型。但是我不能让它在 Vue 组件中工作。我已经实现了两个变体,两者都被调用,但风格都没有改变。
- 回调监听输入事件
- 类属性中的条件
沙箱在那里: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
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 计算的属性值如何,这个都不会修改样式。
如何让它发挥作用?哪种方法更好?
解决方案
您的类语法错误。:class
期望以类名作为键true
或false
作为值的对象。试试这样:
:class="{icons_long: !wrapIcons}"
在我看来,我会采用 CSS 方法
推荐阅读
- python - tf.agent 策略可以返回所有动作的概率向量吗?
- angular - 全局 styles.scss 和将 styles.scss 添加到 Angular 中的组件之间的区别
- python - 在 s3 python boto3 中替换文件
- android - 在 Jenkins 上构建产品风味的编译错误
- python - Python 请求返回 400
- webview - 如何从原生应用程序视图切换到 Web 视图?
- c# - 如何将自动化 ID 添加到 Syncfusion 图表?
- c# - 具有派生类的 Newtonsoft Json 参考循环转换器
- here-api - 尝试通过 JavaScript API 使用航点
- amazon-web-services - 如何查找 JSON 格式的值