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.

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

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屋！