时间:2021-02-17 14:07:07 | 栏目:vue | 点击:次
简介
TagsInput
是一种可编辑的输入框,通过回车或者分号来分割每个标签,用回退键删除上一个标签。用 vue
来实现还是比较简单的。
先看效果图,下面会一步一步实现他。
注:以下代码需要vue-cli环境才能执行
(一)伪造一个输入框
因为单行的文本框只能展示纯文本,所以图里面的标签实际上都是 html元素
,用vue模板来写的话,是这样的:
<template> <div class="muli-tags" @click='focus'> <button class='btn' v-for='(tag, index) in tags' :key='index'> {{tag}} </button> <input type="text" ref='input' v-model='current'> </div> </template> <script> export default { name: 'TagsInput', methods: { focus () { this.$refs.input.focus() }, }, data () { return { tags: [], current: '' } } } </script> <style lang='less'> .muli-tags{ padding: 5px 10px; display: block; border: 1px solid #ccc; input{ background: transparent; } } .btn{ margin: 0 5px 3px 0; padding: 4px 5px; background: #fff; border: 1px solid #eee; box-shadow: 0 0 4px; } </style>
(二)监听输入
在伪造好一个输入框之后,我们对输入框的事件进行处理,
// @keydown.188 188代表是是分号键的keyCode <input type="text" ref='input' @keyup.enter="add" @keydown.delete="del" @keydown.188='split' v-model='current'> methods: { // 按下分号键的时候,需要阻止默认事件,否则会出现分号 split (e) { e.preventDefault() this.add(e) }, add (e) { const val = e.target.value if (!val) return // 如果已经存在相同tag,不再添加 if (this.tags.indexOf(val) > -1) return // 把输入值添加到tag,并清空文本框 this.tags.push(val) this.current = '' }, del (e) { // 当文本框内没有值,再按回退键,则删除最后一个tag if (!e.target.value.length) { this.tags.pop() } }, }
(三)删除标签
前面都是通过键盘来操作标签,鼠标点击标签应该也是可以删除的
<button class='btn' v-for='(tag, index) in tags' :key='index' @click='delTag(index)'>{{tag}} <span>x</span></button> methods: { // 删除点击的标签 delTag (index) { this.tags.splice(index, 1) } }
(四)自定义 v-model
通过上面的步骤,一个 tagsinput
组件就已经做好了,再给他添加自定义的 v-model
,让他可以像input一样响应表单数据。
// props props: { value: Array, required: true, default: () => [] } // computed computed: { tags () { return this.value.slice() } } // methods methods: { // 删除点击的标签 delTag (index) { this.tags.splice(index, 1) this.$emit('input', this.tags) } }
(五)完整代码
// TagsInput.vue <template> <div class="muli-tags" @click='focus'> <button class='btn' v-for='(tag, index) in tags' :key='index' @click='delTag(index)'>{{tag}} <span>x</span></button> <input type="text" ref='input' @keyup.enter="add" @keydown.delete="del" @keydown.188='split' v-model='current'> </div> </template> <script> export default { props: { value: Array, required: true, default: () => [] }, methods: { focus () { this.$refs.input.focus() }, split (e) { e.preventDefault() this.add(e) }, add (e) { const val = e.target.value if (!val) return if (this.tags.indexOf(val) > -1) return this.tags.push(val) this.$emit('input', this.tags) this.current = '' }, del (e) { if (!e.target.value.length) { this.tags.pop() this.$emit('input', this.tags) } }, delTag (index) { this.tags.splice(index, 1) this.$emit('input', this.tags) } }, computed: { tags () { return this.value.slice() } }, data () { return { current: '' } } } </script> <style lang='less'> .muli-tags{ padding: 5px 10px; display: block; border: 1px solid #ccc; input{ background: transparent; } .btn{ margin: 0 5px 3px 0; padding: 4px 5px; background: #fff; border: 1px solid #eee; box-shadow: 0 0 4px; } } </style>
作为组件被调用,这样就可以看到像文章开头那幅图一样的组件了。
// 父组件 <template> <tags-input v-model='tags'/> </template> <script> import TagsInput from './TagsInput.vue' export default { components: { TagsInput }, data () { return { tags: ['tag1', 'tag2', 'tag3'] } } } </script>
总结