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

您所在的位置：网站首页 › input标签按钮 › 好用的组件Vue Tags Input 输入框标签

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

2023-12-22 11:43| 来源: 网络整理| 查看: 265

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

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

import VueTagsInput from '@johmun/vue-tags-input'; export default { components: { VueTagsInput, }, data() { return { tag: '', tags: [], }; }, computed: { }, };

为了和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; }

【本文地址】

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

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

今日新闻

推荐新闻