圆月山庄资源网 Design By www.vgjia.com
简介
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>
(二)监听输入
在伪造好一个输入框之后,我们对输入框的事件进行处理,
- 回车和逗号会把input的值添加到tags数组,然后清空input
- 添加值之前,判断tags数组是否已经包含同名的值
- 按回退键,删除最近的一个标签
// @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>
总结
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]