Изменить поведение по умолчанию в элементе TagInput библиотеки Buefy (Vue.js)?

В моем приложении Vue.js (version 2.5.22) я использую компоненты пользовательского интерфейса из библиотеки Buefy. Я использую элемент 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>

person Nurzhan Nogerbek    schedule 22.01.2019    source источник
comment
.taginput-container должен иметь класс .is-focusable, чтобы сохранить границу   -  person ljubadr    schedule 22.01.2019


Ответы (3)


Для этого нет реквизита. Вы можете добавить атрибут класса в тег компонента 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);
}
person patapity    schedule 22.01.2019

У меня есть предложение, возможно, по-другому, вам не нужно изменять поведение ограничения по умолчанию:    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();
  }
}
person yujinpan    schedule 23.01.2019

Ну, в моем случае я использую такой стиль:

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

CSS:

.always-show .taginput-container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    height: auto;
    cursor: text;
    border-color: #dbdbdb;
    color: #363636;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    clear: both;
    font-size: 1rem;
    position: relative;
    text-align: left;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
    background-color: #fff;
    box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1);
    padding: calc(.375em - 1px) calc(.625em - 1px);
    line-height: 1.5;
  }
person Nurzhan Nogerbek    schedule 03.05.2019