前言
最近在学习 Vue 来开发后台产品，因为之前的应用都是使用 Jquery + html + css来做的，所以刚接触还是需要点适应时间的。为了更好地了解以及掌握 Vue ，最好的办法就是多动手。
介绍
在写博客的时候，标签的输入通常是让用户输入以某个特殊字符分隔的字符串，比如 css，js这样以 , 分隔开的标签。通常都需要用户自己添加分隔符，但是现在对用户体验越来越重视，现在通常是自动添加上分隔符。当听到这个需求，直接找一个 JQ 插件即可搞定，那么如何用Vue 来做一个小 Demo 呢？
效果预览
新人上路，大神勿喷。
TagInput效果预览
案例分析
通过上面的效果预览，我们可以看出这个 Demo 涉及到两个操作，一个是添加标签，另一个是删除标签。Vue 是数据驱动视图更新，通俗来说就是，数据变更了，才会触发视图更新。讲到这里，聪明的小伙伴应该都知道了，其实就是对一个标签数据(source)进行 addTag (text) 和 delTag (text) 操作。
实现
Template:
<template lang="html">
<div class="input tags-wrap" @paste="pasteText($event)">
<div v-for="(item,index) in source"
:key="index"
class="tags"
transition="tags"
style="background-color:#409eff;" >
<span class="content">{{item}}</span>
<span class="del" @click="delTag(index, false)">×</span>
</div>
<input
class="tags-input"
type="text"
placeholder="标签，按 enter 创建"
v-model="text"
@keyup.enter="addTag(text)"
@keydown.delete="delTag(source.length - 1, true)">
</div>
</template>
Script:
<script>
export default {
props: {
source: {
type: Array,
default: []
}
},
data () {
return {
text: '',
}
},
methods: {
pasteText (e) {
e.preventDefault()
var text = (e.clipboardData || window.clipboardData).getData('text')
this.addTag(text)
},
addTag (text) {
if (text.trim() != '') {
var count = this.source.length;
this.source.push(text)
this.text = ''
}
},
delTag (index, way) {
if (way) {
if (index >= 0 && this.text == '') {
this.source.splice(index, 1)
}
} else {
this.source.splice(index, 1)
}
}
}
}
</script>
Css:
<style lang="scss">
.tags-wrap{
width: 100% !important;
height: 100% !important;
outline: none;
&::after{
content: "";
display: block;
height: 0;
clear: both;
}
}
.tags, .tags-input{
position: relative;
float: left;
color: #fff;
line-height: 28px;
margin: 0 4px 4px 0;
padding: 0 22px 0 10px;
border-radius: 6px;
.content{
line-height: 28px;
}
.del{
width: 22px;
height: 28px;
text-align: center;
cursor: pointer;
position: absolute;
top: -1px;
right: 0;
}
}
.tags-input{
font-size: 14px;
padding: 0;
background-color: inherit;
border: none;
color: inherit;
border-radius: 6px;
width: 10em;
&:focus {
border: 0;
}
}
.tags-enter, .tags-leave{
transform: scale(0.9);
opacity: 0;
}
.tags-transition{
transition: all .3s ease;
}
</style>
使用
在 App.vue 中使用：
<template>
<div id="app">
<TagsInput :source.sync="source"></TagsInput>
</div>
</template>
<script>
import TagsInput from "./components/TagsInput.vue";
export default {
name: "app",
components: {
TagsInput
},
data() {
return {
source: ["Vue", "Mpvue", "Css"]
};
}
};
</script>
</style>
感谢各位大佬，观看到最后。写的不好，还望海涵。