Question

在我的Vue.js（version 2.5.22）应用程序中，我使用了Buefy库中的UI组件。我使用taginput元素。如果我有5个标签的限制（如下例所示），则当输入有5个标签时边框消失。

问题：是否可以更改此行为？我还是想显示边框。

<b-field label="Limited to 10 characters and 5 tags">
    <b-taginput maxtags="5":value="['Red', 'Green', 'Blue', 'White']">
    </b-taginput>
</b-field>

Answer 1

没有支持。您可以在b字段组件标签中添加class属性：

<b-field class="always-show" label="Limited to 10 characters and 5 tags">
    <b-taginput maxtags="5" :value="['Red', 'Green', 'Blue', 'White']">
    </b-taginput>
</b-field>

然后为新课程添加样式：

.always-show .taginput-container{
  box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1);
  border: 1px solid #b5b5b5;
  border-radius: 4px;
  padding: calc(.375em - 1px) calc(.625em - 1px);
}

Answer 2

我有一个建议，也许是另一种方法，您不需要修改默认的限制行为： 1.不要限制输入的标签数量。 2.确定添加时（如果大于5）删除第一个。

模板

<b-field label="Limited to 10 characters and 5 tags">
    <b-taginput @add="onAdd" :value="tags">
    </b-taginput>
</b-field>

js

data() {
  return {
    tags: []
  }
}
onAdd(){
  if (this.tags.length > 5) {
    this.tags.shift();
  }
}

Answer 3

嗯，就我而言，我使用的是这样的样式：

npm remove pm2 -g

CSS ：

<b-field class="always-show" label="Limited to 10 characters and 5 tags">
    <b-taginput maxtags="5" :value="['Red', 'Green', 'Blue', 'White']">
    </b-taginput>
</b-field>

更改Buefy库（Vue.js）的TagInput元素中的默认行为？

3 个答案: