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

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

找了好久input tags的标签这个算是比较好看并且文档比较全的组件必须分享❤️
文档地址：http://www.vue-tags-input.com/#/

然后说一下我根据项目改动的地方和我觉得会比较常用的参数
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;
}

好用的组件Vue Tags Input 输入框标签相关推荐

vue实现input输入框控制最多输入一位小数
vue实现input输入框控制最多输入一位小数, 直接在校验规则中写上js正则表达式就行,表达式如下: /^(\d+\.\d{1,1}|\d+)$/
vue格式化input输入框的数字，4位一分隔
在做vue项目中,肯定会遇到过这样的场景,input输入框的手机号或者银行卡号的输入希望四位一分隔,方便查看和纠错,接下来直接上代码解决此类问题. template(别忘记data里面绑定accoun ...
vue 动态控制input输入框的disabled属性
最近项目上提出一个经常遇到的需求,点击新增时input可输入,点击编辑时input置灰.写下过程,希望能帮助到大家. 1.首先在input上添加disabled属性 2.data中定义isDisabl ...
vue 禁止input输入框输入特殊字符和汉字
<el-form-item label="微信"><el-input placeholder="请输入微信" v-model="fo ...
html5 输入框关键字搜索,vue input输入框关键字筛选检索列表数据展示
想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: {{item.name}} ...
input输入框事件流程变化
从聚焦到失去焦点,以下事件会根据情况,先后判断是否会执行. onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> ...
Vue组件封装 ——input 输入框组件
一.基础准备工作 1.创建一个基础的vue项目包 2.创建components文件夹,用于存放组件,新建input.vue组件,可以自己取个名字 <script> export def ...
value数字 vue_基于Vue开发数字输入框组件
随着 vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 vue组件开发的api:props.events和slots 2.组件代码效果: (1)index ...
vue input只能输入正整数_前端开发：Vue中获取input输入框值的方法
在前端开发过程中,会用到各种各样的基础组件,一些常用的组件的使用方法一定要滚熟于心,对于刚入门的新手来说,对基础知识的熟练掌握很重要,如果不熟练就会影响开发速度.那么本篇博文就来分享一个比较基础的知识 ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...

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

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

好用的组件Vue Tags Input 输入框标签相关推荐

最新文章

热门文章