博客

分享一个好用的输入框标签

找了好久input tags的标签这个算是比较好看并且文档比较全的组件必须分享❤️

文档地址：http://www.vue-tags-input.com/#/




然后说一下我根据项目改动的地方和我觉得会比较常用的参数


allow-edit-tags：允许编辑标签，定义标签在创建后是否可编辑。

max-tags：标签数组允许容纳的最大数量

maxlength：允许输入的最大字符数。

placeholder：placeholder

v-model：无需解释

<template>
  <div>
    <vue-tags-input
      v-model="tag"
      :tags="tags"
      :max-tags="10"
      placeholder="回车保存"
      @tags-changed="newTags => tags = newTags"
    />
  </div>
</template>

<script>
import VueTagsInput from '@johmun/vue-tags-input';

export default {
  components: {
    VueTagsInput,
  },
  data() {
    return {
      tag: '',
      tags: [],

    };
  },
  computed: {
  
  },
};
</script>

为了和element-ui样式一致则需要设置样式

.ti-input::-webkit-scrollbar {
    display: none;
}
.ti-input[data-v-61d92e31] {
    border: 1px solid #dfe4ed;
    overflow-x: scroll;
    flex-wrap: nowrap;
    width: 100%;
    border-radius: 4px;
    padding:1px;
}

.vue-tags-input[data-v-61d92e31] {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    /* width: 200px; */
    white-space: nowrap;
}

.ti-tags[data-v-61d92e31] {
    flex-wrap: nowrap;
}