本節我們來完成tag框，輸入關鍵字後回車即可出現標籤增加和刪除效果。

安裝: cd到我們的專案根目錄下執行

npm install vue-input-tag --save

安裝完成，我們的node_modules目錄中會多一個vue-input-tag目錄。

然後應用到我們的專案中.

來到視訊釋出元件publish.vue

1.js部分

//引入元件
import InputTag from 'vue-input-tag';

此時會報錯

Module parse failed:xxxxxxxxxxxxxxxxxxxxxxx
You may need an appropriate loader to
 
 handle this file type.

這是因為我們的vue-input-tag路徑在node_modules 中，而我們的webpack配置檔案webpack.config.js中排錯了這個目錄。需要修改如下：

//修改前
 {test:/\.vue$/,loader:'babel!vue',exclude:/node_modules/},
 //修改後
  {test:/\.vue$/,loader:'babel!vue'},

然後繼續報錯：

Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in
 
 xxxxxxxxxxxxxxxx

我們來到node_modules/vue-input-tag/.babelrc:

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

解決方法：
先安裝

npm install babel-plugin-transform-runtime --save
npm install --save-dev babel-preset-stage-2

然後修改我們專案的(根目錄下的).babelrc:

{
    "presets
 
":["es2015","stage-2"],
    "plugins": ["transform-runtime"]
}

(主要，修改了核心配置檔案後，要重啟服務：npm run dev)。

2.好了，繼續完成我們的功能。
在引入了元件之後，需要載入進去

  components:{
      'input-tag':InputTag, //註冊元件
  }

3.模板上使用元件

<el-form-item label="標籤" prop="v_tags">
     <input-tag :tags="video.v_tags" placeholder="輸入標籤後回車"></input-tag>
</el-form-item>

:tags="video.v_tags" 中，我們在data() 的 video 中 添加了v_tags 陣列，input-tag元件新增的標籤會加入這個陣列。

 data(){
     return {
         video:{
             v_title:'',
             v_class:2,
             v_pic:{name:'',url:'',id:0},
             v_tags:[],
         },
         isShowPic:false,
     }

釋出視訊元件全部程式碼如下：

<template>
    <div>

        <el-dialog title="圖片預覽" v-model="isShowPic" size="small">
            <span>
                <img :src="video.v_pic.url">
            </span>
            <span slot="footer" class="dialog-footer">
          </span>
        </el-dialog>

        <el-form :model="video"  label-width="100px" class="demo-ruleForm">
            <el-col :span="12">
                <el-form-item label="視訊標題" prop="v_title">
                    <el-input v-model="video.v_title" placeholder="請輸入視訊標題"></el-input>
                </el-form-item>
                <el-form-item label="視訊分類" prop="v_class">
                    <el-select v-model="video.v_class" placeholder="請選擇">
                        <el-option
                            v-for="item in this.$store.getters.navForVideoClass"
                            :label="item.nav_text"
                            :value="item.nav_id"
                        >
                            {{item.nav_text}}
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="視訊封面" prop="v_pic">
                    <el-upload
                            action="http://localhost/yiiserver/web/index.php/video/upload"
                            type="drag"
                            :thumbnail-mode="true"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :multiple="false"
                            name="Uploader[file]"
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-dragger__text">將檔案拖到此處，或<em>點選上傳</em></div>
                        <div class="el-upload__tip" slot="tip">只能上傳jpg/png檔案，且不超過500kb</div>
                    </el-upload>
                </el-form-item>

                <el-form-item label="標籤">
                   <input-tag :tags="video.v_tags"  placeholder="輸入標籤後回車"></input-tag>
                </el-form-item>
                <el-form-item label="測試按鈕">
                    <el-button type="primary" @click="testBtn">測試按鈕</el-button>
                </el-form-item>
            </el-col>

            <el-col :span="12"></el-col>

        </el-form>
    </div>
</template>

<script>
    //引入元件
    import InputTag from 'vue-input-tag';

    export default{
        data(){
            return {
                video:{
                    v_title:'',
                    v_class:2,
                    v_pic:{name:'',url:'',id:0},
                    v_tags:[],
                },
                isShowPic:false,
            }
        },

        methods: {
            handleRemove(file, fileList) {
                //移除圖片
                console.log(file, fileList);
                this.video.v_pic.url = '';
                this.video.v_pic.name = '';
            },
            handlePreview(file) {
                //預覽圖片
                console.log(file);
                this.isShowPic = true;
            },
            handleSuccess(file){
                //響應成功
                console.log(file);

                if(file.status ==1){
                    //儲存後端返回來的資料
                    this.video.v_pic.url = file.url;
                    this.video.v_pic.name = file.name;
                    this.video.v_pic.id = file.img_id;
                }else{
                    alert('上傳失敗,,請稍後再試');
                }
            },
            testBtn(){
                alert(this.video.v_tags);
            }
        },

        components:{
            'input-tag':InputTag, //註冊元件
        }
    }
</script>