分享一个好用的输入框标签
找了好久input tags的标签这个算是比较好看并且文档比较全的组件必须分享❤️
文档地址:http://www.vue-tags-/#/
然后说一下我根据项目改动的地方和我觉得会比较常用的参数
allow-edit-tags:允许编辑标签,定义标签在创建后是否可编辑。
max-tags:标签数组允许容纳的最大数量
maxlength:允许输入的最大字符数。
placeholder:placeholder
v-model:无需解释
<template><div><vue-tags-inputv-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;}