vue组件系列之TagsInput详解
123 浏览量
2020-12-28
17:45:50
上传
评论
收藏 52KB PDF 举报
vue组件系列之组件系列之TagsInput详解详解
简介简介
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
资源评论
weixin_38689736
- 粉丝: 5
- 资源: 932
最新资源
- 老飞飞搭建基础通用数据库V19数据库.rar
- jquery.js
- 机械设计多工位ACF贴胶带&预压设备sw18可编辑非常好的设计图纸100%好用.zip
- 基于Pytorch复现Point-Transformer，用于ShapeNet数据集点云分割
- 【医学影像分析】2D超声图像的分割检测（Ultrasound Nerve Segmentation - Kaggle数据集）
- 嘎嘎香的五款神仙谷歌插件
- .arch书源导入教程.mp4
- 贪心算法介绍及代码示例讲解
- CR13SP35MSI64 Crystal 水晶报表运行组件最后版本64位
- 图像分类数据集：玉米叶是否感染分类数据集（2分类，包含训练集、验证集）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
