javascript - 更改 Buefy 库 (Vue.js) 的 TagInput 元素中的默认行为？

Question

在我的 Vue.js(版本 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-field 组件标记:

<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);
}