100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 好用的组件Vue Tags Input 输入框标签

好用的组件Vue Tags Input 输入框标签

时间:2020-02-29 09:51:59

相关推荐

好用的组件Vue Tags Input 输入框标签

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

找了好久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;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。