好用的组件Vue Tags Input 输入框标签
分享一个好用的输入框标签找了好久input tags的标签这个算是比较好看并且文档比较全的组件必须分享❤️文档地址:http://www.vue-tags-input.com/#/然后说一下我根据项目改动的地方和我觉得会比较常用的参数allow-edit-tags:允许编辑标签,定义标签在创建后是否可编辑。max-tags:标签数组允许容纳的最大数量maxlength:允许输入的最大字符数。pla
·
分享一个好用的输入框标签
找了好久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;
}
更多推荐
已为社区贡献3条内容
所有评论(0)