vue組件中的TagsInput

這篇文章主要講解了vue組件中的TagsInput，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供開平網(wǎng)站建設(shè)、開平做網(wǎng)站、開平網(wǎng)站設(shè)計(jì)、開平網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、開平企業(yè)網(wǎng)站模板建站服務(wù)，十多年開平做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

簡介

TagsInput 是一種可編輯的輸入框，通過回車或者分號來分割每個(gè)標(biāo)簽，用回退鍵刪除上一個(gè)標(biāo)簽。用 vue 來實(shí)現(xiàn)還是比較簡單的。

先看效果圖，下面會(huì)一步一步實(shí)現(xiàn)他。

vue組件中的TagsInput

注：以下代碼需要vue-cli環(huán)境才能執(zhí)行

（一）偽造一個(gè)輸入框

因?yàn)閱涡械奈谋究蛑荒苷故炯兾谋?，所以圖里面的標(biāo)簽實(shí)際上都是 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>

（二）監(jiān)聽輸入

在偽造好一個(gè)輸入框之后，我們對輸入框的事件進(jìn)行處理，

回車和逗號會(huì)把input的值添加到tags數(shù)組，然后清空input
添加值之前，判斷tags數(shù)組是否已經(jīng)包含同名的值
按回退鍵，刪除最近的一個(gè)標(biāo)簽

// @keydown.188 188代表是是分號鍵的keyCode
<input type="text"
 ref='input'
 @keyup.enter="add"
 @keydown.delete="del"
 @keydown.188='split'
 v-model='current'>
 
methods: {
 // 按下分號鍵的時(shí)候，需要阻止默認(rèn)事件，否則會(huì)出現(xiàn)分號
 split (e) {
 e.preventDefault()
 this.add(e)
 },
 add (e) {
 const val = e.target.value
 if (!val) return
 // 如果已經(jīng)存在相同tag，不再添加
 if (this.tags.indexOf(val) > -1) return
 // 把輸入值添加到tag，并清空文本框
 this.tags.push(val)
 this.current = ''
 },
 del (e) {
 // 當(dāng)文本框內(nèi)沒有值，再按回退鍵，則刪除最后一個(gè)tag
 if (!e.target.value.length) {
 this.tags.pop()
 }
 },
}

（三）刪除標(biāo)簽

前面都是通過鍵盤來操作標(biāo)簽，鼠標(biāo)點(diǎn)擊標(biāo)簽應(yīng)該也是可以刪除的

<button class='btn' v-for='(tag, index) in tags' :key='index' @click='delTag(index)'>{{tag}} <span>x</span></button>

methods: {
 // 刪除點(diǎn)擊的標(biāo)簽
 delTag (index) {
 this.tags.splice(index, 1)
 }
}

（四）自定義 v-model

通過上面的步驟，一個(gè) tagsinput 組件就已經(jīng)做好了，再給他添加自定義的 v-model ,讓他可以像input一樣響應(yīng)表單數(shù)據(jù)。

 // props
 props: {
 value: Array,
 required: true,
 default: () => []
 }
 
 // computed
 computed: {
 tags () {
 return this.value.slice()
 }
 }
 
 // methods
 methods: {
 // 刪除點(diǎn)擊的標(biāo)簽
 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>

作為組件被調(diào)用，這樣就可以看到像文章開頭那幅圖一樣的組件了。

// 父組件
<template>
 <tags-input v-model='tags'/>
</template>
<script>
import TagsInput from './TagsInput.vue'
export default {
 components: {
 TagsInput
 },
 data () {
 return {
 tags: ['tag1', 'tag2', 'tag3']
 }
 }
}
</script>

看完上述內(nèi)容，是不是對vue組件中的TagsInput有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題：vue組件中的TagsInput
新聞來源：http://aaarwkj.com/article46/jegphg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、定制網(wǎng)站、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

vue組件中的TagsInput