Vue.js - 根据文本长度为文本区域应用 CSS 样式

Question

我有 Vue 应用程序，我想在评论表单中添加受 Facebook 启发的按钮。 我有一个可以工作的普通 JS 原型。 但是我不能让它在 Vue 组件中工作。 我已经实现了两个变体，两者都被调用，但风格都没有改变。

1. 回调监听输入事件
2. 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

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 计算的属性值如何，这个都不会修改样式。

如何让它发挥作用？ 哪种方法更好？

Answer 1

您的 class 语法错误。 :class期望 object 以 class 名称作为键， true或false作为值。 试试这样：

:class="{icons_long: !wrapIcons}"

在我看来，我会 go 与 CSS 方法

Answer 2

另一种有效的语法是保留自己的语法并添加反引号`和字符串插值：

:class="`${wrapIcons ? 'textarea_short' : 'textarea_long'}`"