您好,登錄后才能下訂單哦!
這篇文章主要講解了vue組件中的TagsInput,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
簡介
TagsInput
是一種可編輯的輸入框,通過回車或者分號(hào)來分割每個(gè)標(biāo)簽,用回退鍵刪除上一個(gè)標(biāo)簽。用 vue
來實(shí)現(xiàn)還是比較簡單的。
先看效果圖,下面會(huì)一步一步實(shí)現(xiàn)他。
注:以下代碼需要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è)輸入框之后,我們對(duì)輸入框的事件進(jìn)行處理,
// @keydown.188 188代表是是分號(hào)鍵的keyCode <input type="text" ref='input' @keyup.enter="add" @keydown.delete="del" @keydown.188='split' v-model='current'> methods: { // 按下分號(hào)鍵的時(shí)候,需要阻止默認(rèn)事件,否則會(huì)出現(xiàn)分號(hào) 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)容,是不是對(duì)vue組件中的TagsInput有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。