5分鐘實(shí)現(xiàn)一個(gè)Tag-Input(標(biāo)簽)組件

前言

本文是wo寫(xiě)組件設(shè)計(jì)的第一篇文章(處女作)，之所以會(huì)寫(xiě)組件設(shè)計(jì)相關(guān)的文章,是因?yàn)樽鳛橐幻麅?yōu)秀的前端工程師，面對(duì)各種繁瑣而重復(fù)的工作，我們不應(yīng)該按部就班的去辛(dao)勤(gen)勞(huo)動(dòng)(zhong)，而是要根據(jù)已有前端的開(kāi)發(fā)經(jīng)驗(yàn)，總結(jié)出一套自己的高效開(kāi)發(fā)的方法。作為數(shù)據(jù)驅(qū)動(dòng)的領(lǐng)導(dǎo)者vue等MVVM框架的出現(xiàn),幫我們減少了工作中大量的冗余代碼，一切皆組件的思想深得人心。所以，為了讓工程師們有更多的時(shí)間去考慮業(yè)務(wù)和產(chǎn)品迭代，我們不得不掌握高質(zhì)量組件設(shè)計(jì)的思路和方法。所以筆者將花時(shí)間去總結(jié)各種業(yè)務(wù)場(chǎng)景下的組件的設(shè)計(jì)思路和方法，并用原生框架的語(yǔ)法去實(shí)現(xiàn)各種常用組件的開(kāi)發(fā)，希望等讓前端新手或者有一定工作經(jīng)驗(yàn)的朋友能有所收獲。

正文

在開(kāi)始組件設(shè)計(jì)之前希望大家對(duì)css3和js有一定的基礎(chǔ)。我們先看看實(shí)現(xiàn)后的組件效果:TagInput是一種可編輯的輸入框，通過(guò)回車(chē)或者空格分割每個(gè)標(biāo)簽，用 vue來(lái)實(shí)現(xiàn)還是比較簡(jiǎn)單的。

先看效果圖，下面會(huì)一步一步實(shí)現(xiàn)他。由視頻演示可以知道tag-input組件可以自定義顏色主題(color theme), 可以手動(dòng)關(guān)閉標(biāo)簽。

組件設(shè)計(jì)思路

我們第一步是要確認(rèn)需求，一個(gè)tag標(biāo)簽組件一般都會(huì)有如下需求點(diǎn)：

可以改變標(biāo)簽顏色

提供關(guān)閉標(biāo)簽的配置，讓用戶(hù)可以關(guān)閉標(biāo)簽

需求收集好之后，作為一個(gè)有追求的程序員，會(huì)得出如下線(xiàn)框圖:

vue有自帶的屬性檢測(cè)方式,這里就不介紹了.

開(kāi)工

?

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

”

新建文件夾及相關(guān)文件

在src/components/目錄中創(chuàng)建Tag-Input目錄，并且創(chuàng)建Tag-Input.vue文件和index.js文件。如下圖：

布局

搭建基本結(jié)構(gòu)：

<template>
<div?class="tag-input">
??
??<div?class="tag-item"?v-for="item?in?tags"?:key="item">{{?item?}}div>
??
??<input?class="tag-input"?@keyup.space="generateTag"?v-model="value"?type="text">
div>
template>

書(shū)寫(xiě)基本邏輯：

在組件內(nèi)部維護(hù)一個(gè)tags數(shù)組默認(rèn)為空數(shù)組

在組件內(nèi)部維護(hù)一個(gè)value字符串默認(rèn)為空字符串

書(shū)寫(xiě)一個(gè)方法generateTag，綁定給input的keyup事件并且給定修飾符為space/enter，當(dāng)輸入為合法字符串后，將當(dāng)前的value值push到tags中 通過(guò)v-for循環(huán)出來(lái)。

代碼如下：

export?default?{
??name:?'Tag-Input',
??data?()?{
????return?{
??????tags:?[],
??????value:?''
????}
??},
??methods:?{
????generateTag?()?{
????//?判定value是否合法?不能唯空
??????if?(this.value.trim().length?>?0)?{
????????this.tags.push(this.value)
??????}
??????//?還原input的輸入狀態(tài)
??????this.value?=?''
????}
??}
}

外觀

我們讓循環(huán)出來(lái)的tag和input出于同一行內(nèi)，并且去掉input的border/out-line/和background，讓最外層的div.tag-input被模擬成一個(gè)input的感覺(jué)。

個(gè)人覺(jué)得element-ui的tag組件蠻漂亮的，所以借鑒。畢竟讀書(shū)人不能叫竊取而是叫借鑒。傳送門(mén)

.tag-input-warp{
????width:?80%;
????height:?150px;
????border-radius:?5px;
????border:?1px?solid?#666;
????margin:?auto;
????padding:?24px;
??}
??.tag-item,?.tag-input{
????display:?inline-block;
??}
??.tag-item{
????padding:?10px?14px;
????font-size:?14px;
????background-color:?#f2f9ec;
????color:?#84c259;
????border:?1px?solid?#e4fada;
????text-align:?center;
????margin:?6px;
????/*vertical-align:?middle;*/
??}
??.tag-input{
????border:?none;
????outline:?none;
??}
??.tag-text{
????vertical-align:?middle;
??}
??.tag-icon__close{
????cursor:?pointer;
????vertical-align:?middle;
????display:?inline-block;
????width:?16px;
????height:?16px;
????background-size:?contain;
????background-repeat:?no-repeat;
????background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAYAAAAj6qa3AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAjdJREFUaN7t1t9LU2EcBvDndRtKR6YX4UQCJevCi26k6CI0vYluBAeObZgEUdFNSjfhRNtGh04qBHUKN6iLfkjtUFANTE7E8OxClzLIbqSZrMARNEr6gTr1vF2tiyLQ9e5sg/fzB7x8n4fzft8DcBzHcRzHcWwEA3OzZ89YLKzP9dJYY/d5q/Wq9FJ1dFVVsTq3jN2AEXqSVld/vrE68P3T/Pzl5mizO9jZySq4+UPGps9MTm7uqrCb5WCw6Arwk3Zyl6ysYJYeAhSFpOgJDCmK+Cr6zXXJbt/peaP31AM9NYJgebC+sHUhHCbPqBVf6+pMvZs/9Nr+flZz5434Uxtwd/j9Yq12zV2TyWy3iGxw8b624VqamhKva8fd+5JJiUaokzY0FDpX3oooVHBidBFoxG7EPB6Mk9P0nNNZvrx6xBJQ1XVSEd+YmZjAF3SQY/X1pt6tF3qirc1D2kmIJJMlX8A/i9iD/fRdIoEe3CIHBcGo4FnMluB2lT9ZC5tjIyPwkCVYUym8xRsSbWoqG6c34ZAko4IbXkD2jv/+1EEXAQCn8JTKsqx/JM9xR5ZzfTWKtoC/gv9xxwfHWuceqX19eI80DksSuultEgiFjC4ib8F3utVzfT6LRvbPTfRpR13R6elcn7OSK4JVcKOLYLYDzBfXxnTRZoOAxySl61hAmu5tafnfrT4otF55GPZ68ZosIj48jFEaJ2mfT1EUxeEwmVjNXzK8NEIdXZWVhZ6D4ziO47jS9wur727+lgG2ewAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNS0yOFQyMjowMzoyNiswODowMBt9NI0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDUtMjhUMjI6MDM6MjYrMDg6MDBqIIwxAAAASHRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl92dXY4bmVpeTFjL2NoYWhhby5zdmc0h1nOAAAAAElFTkSuQmCC");
??}

實(shí)際效果如下：

感覺(jué)還行。。。

v-model語(yǔ)法糖

把內(nèi)部的tag傳遞出去：

Vue內(nèi)置了v-model指令，v-model 是一個(gè)語(yǔ)法糖，可以拆解為 props: value 和 events: input。就是說(shuō)組件只要提供一個(gè)名為 value 的 prop，以及名為 input 的自定義事件，滿(mǎn)足這兩個(gè)條件，使用者就能在自定義組件上使用 v-model；

// v-model語(yǔ)法糖?關(guān)鍵
this.$emit('input',?this.tags)
//?使用方法
<tag-input?v-model="res">
//?通過(guò)res獲取內(nèi)部狀態(tài)

組件的export

相信很多人在用Vue使用別人的組件時(shí)，會(huì)用到 Vue.use() 。例如：Vue.use(VueRouter)、Vue.use(MintUI)。那這是為什么吶？

接下來(lái)我們自定義一個(gè)需要 Vue.use() 的組件，也就是有 install 的組件。

//?index.js
import?TagInput?from?'./Tag-Input.vue';

/*?istanbul?ignore?next?*/
TagInput.install?=?function(Vue)?{
??Vue.component(TagInput.name,?TagInput);
};

export?default?TagInput;

Tag-Input的全局注冊(cè)

// 引入組件
import TagInput from '@/components/Tag-Input';
Vue.use(TagInput)

完整代碼

<template>
<div?class="tag-input-warp">
??
??<div?class="tag-item"?v-for="(item,?index)?in?tags"?:key="index">
????<span?class="tag-text">{{?item?}}span>
????<span?class="tag-icon__close"?@click="deleteTagByIndex(index)">span>
??div>
??
??<input?class="tag-input"?@keyup.space="generateTag"?autofocus?v-model="value"?type="text">
div>
template>

<script>export?default?{name:?'Tag-Input',
??data?()?{return?{tags:?[],value:?''
????}
??},methods:?{
????generateTag?()?{if?(this.value.trim().length?>?0)?{this.tags.push(this.value)// v-model語(yǔ)法糖?關(guān)鍵this.$emit('input',?this.tags)
??????}this.value?=?''
????},
????deleteTagByIndex?(index)?{this.tags.splice(index,?1)
????}
??}
}script>

<style?scoped>.tag-input-warp{width:?80%;height:?150px;border-radius:?5px;border:?1px?solid?#666;margin:?auto;padding:?24px;
??}.tag-item,?.tag-input{display:?inline-block;
??}.tag-item{padding:?10px?14px;font-size:?14px;background-color:?#f2f9ec;color:?#84c259;border:?1px?solid?#e4fada;text-align:?center;margin:?6px;/*vertical-align:?middle;*/
??}.tag-input{border:?none;outline:?none;color:?#666666;
??}.tag-text{vertical-align:?middle;
??}.tag-icon__close{cursor:?pointer;vertical-align:?middle;display:?inline-block;width:?16px;height:?16px;background-size:?contain;background-repeat:?no-repeat;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgEAYAAAAj6qa3AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAjdJREFUaN7t1t9LU2EcBvDndRtKR6YX4UQCJevCi26k6CI0vYluBAeObZgEUdFNSjfhRNtGh04qBHUKN6iLfkjtUFANTE7E8OxClzLIbqSZrMARNEr6gTr1vF2tiyLQ9e5sg/fzB7x8n4fzft8DcBzHcRzHcWwEA3OzZ89YLKzP9dJYY/d5q/Wq9FJ1dFVVsTq3jN2AEXqSVld/vrE68P3T/Pzl5mizO9jZySq4+UPGps9MTm7uqrCb5WCw6Arwk3Zyl6ysYJYeAhSFpOgJDCmK+Cr6zXXJbt/peaP31AM9NYJgebC+sHUhHCbPqBVf6+pMvZs/9Nr+flZz5434Uxtwd/j9Yq12zV2TyWy3iGxw8b624VqamhKva8fd+5JJiUaokzY0FDpX3oooVHBidBFoxG7EPB6Mk9P0nNNZvrx6xBJQ1XVSEd+YmZjAF3SQY/X1pt6tF3qirc1D2kmIJJMlX8A/i9iD/fRdIoEe3CIHBcGo4FnMluB2lT9ZC5tjIyPwkCVYUym8xRsSbWoqG6c34ZAko4IbXkD2jv/+1EEXAQCn8JTKsqx/JM9xR5ZzfTWKtoC/gv9xxwfHWuceqX19eI80DksSuultEgiFjC4ib8F3utVzfT6LRvbPTfRpR13R6elcn7OSK4JVcKOLYLYDzBfXxnTRZoOAxySl61hAmu5tafnfrT4otF55GPZ68ZosIj48jFEaJ2mfT1EUxeEwmVjNXzK8NEIdXZWVhZ6D4ziO47jS9wur727+lgG2ewAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNS0yOFQyMjowMzoyNiswODowMBt9NI0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDUtMjhUMjI6MDM6MjYrMDg6MDBqIIwxAAAASHRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl92dXY4bmVpeTFjL2NoYWhhby5zdmc0h1nOAAAAAElFTkSuQmCC");
??}style>

寫(xiě)在最后

本文寫(xiě)到這里其實(shí)還有一些功能沒(méi)有實(shí)現(xiàn)，希望大家留言討論；后續(xù)我將會(huì)繼續(xù)發(fā)布button/dialog/icon/toast等等的組件的包教不包會(huì)系列, 來(lái)復(fù)盤(pán)我多年的組件化之旅。歡迎各位轉(zhuǎn)發(fā)收藏。

總結(jié)

以上是生活随笔為你收集整理的vue 字符串分割_嗯哼vue组件taginput包教不包会的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。