完成标签输入组件；

public/static/admin/js/test/goods.js

@@ -17,7 +17,7 @@ define(["jquery", "easy-admin"], function ($, ea) {
             ea.table.render({
                 init: init,
                 cols: [[
-                    {type: 'checkbox'},
+                    {type: 'checkbox'},
                     {field: 'id', title: 'id'},
                     {field: 'cate_id', title: '分类ID'},
                     {field: 'title', title: '商品名称'},

public/static/config-admin.js

@@ -18,6 +18,7 @@ require.config({
         "treetable": ["plugs/lay-module/treetable-lay/treetable"],
         "tableSelect": ["plugs/lay-module/tableSelect/tableSelect"],
         "tableData": ["plugs/lay-module/tableData/tableData"],
+        "tagInput": ["plugs/lay-module/tagInput/tagInput"],
         "iconPickerFa": ["plugs/lay-module/iconPicker/iconPickerFa"],
         "autocomplete": ["plugs/lay-module/autocomplete/autocomplete"],
         "vue": ["plugs/vue-2.6.10/vue.min"],

public/static/plugs/easy-admin/easy-admin.js

@@ -1,4 +1,4 @@
-define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypicker'], function ($, tableSelect, undefined, miniTheme, tableData) {
+define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypicker','tagInput'], function ($, tableSelect, undefined, miniTheme, tableData,citypicker,tagInput) {
 
     window.onInitElemStyle = function () {
         miniTheme.renderElemStyle()
@@ -1355,6 +1355,9 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
             // 监听通用表格数据控件生成
             admin.api.tableData();
 
+            // 监听标签输入控件生成
+            admin.api.tagInput();
+
             // 初始化layui表单
             form.render();
 
@@ -1734,9 +1737,6 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
 
                 if (cityList.length > 0) {
                     $.each(cityList, function (i, v) {
-                        console.log(i);
-                        console.log(v);
-                        // format-all=解析全部，name=不进行解析（提交名称），code=不进行解析（提交地区代码），format-name=解析名称，format-code，解析地区代码
 
                         var fieldName = $(v).attr('name');
                         var code = $(v).data('citypicker').getCode();
@@ -1744,8 +1744,6 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                         var level = $(v).data('level');
                         var formatTargetList = {};
 
-                        console.log(level);
-
                         formatTargetList['name'] = 1;
                         formatTargetList['code'] = 1;
                         formatTargetList['name-province'] = 1;
@@ -1794,13 +1792,6 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                             dataField[fieldName + '_code_district'] = codeArr[2] || '';
                         }
 
-
-
-                        console.log(fieldName);
-
-                        console.log(code);
-                        console.log(text);
-
                     })
                 }
                 return dataField
@@ -2058,13 +2049,21 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData', 'citypick
                 }
             },
             tableData() {
-                var dateList = document.querySelectorAll('[data-toggle="table-data"]');
-                $.each(dateList, function (i, v) {
+                var tableList = document.querySelectorAll('[data-toggle="table-data"]');
+                $.each(tableList, function (i, v) {
                     var data = $(v).data()
                     tableData.render(v, data, admin);
                 });
 
-            }
+            },
+            tagInput() {
+                var list = document.querySelectorAll('[data-toggle="tag-input"]');
+                $.each(list, function (i, v) {
+                    var data = $(v).data()
+                    tagInput.render(v, data, admin);
+                });
+
+            },
         },
         getQueryVariable(variable, defaultValue) {
             if (typeof defaultValue == 'undefined') {

public/static/plugs/lay-module/tagInput/tagInput.css

@@ -0,0 +1,24 @@
+.tag-input-container .layui-input {
+  height: auto;
+  min-height: 30px;
+  padding-bottom: 8px;
+}
+.tag-input-container .main-input {
+  border: none;
+  height: 22px;
+  line-height: 22px;
+  margin-left: 5px;
+  margin-top: 8px;
+  vertical-align: bottom;
+}
+.tag-input-container .input-preshow {
+  display: inline-block;
+  height: 0px;
+  overflow: hidden;
+}
+.tag-input-container .layui-form-danger + .layui-input {
+  border-color: #ff5722 !important;
+}
+.tag-input-container .layui-btn {
+  margin-top: 8px;
+}

public/static/plugs/lay-module/tagInput/tagInput.html

@@ -0,0 +1,13 @@
+<div class="tag-input-container" ref="tagInput">
+    <input type="hidden" :name="setting.name" :value="value" :lay-verify="setting.required == 1?'required':''">
+    <div class="layui-input" @click="onContainerClick">
+        <div class="layui-btn layui-btn-xs layui-btn-normal" v-for="(itemTag,indexTag) in listTag">
+            <span>{{itemTag}}</span>
+            <i class="layui-icon layui-icon-close" @click.stop="removeItem(itemTag,indexTag)"></i>
+        </div>
+        <input type="text" class="main-input" ref="tagInputMain" @keydown="onInputChange" @keydown.enter="onInputConfirm" v-model="inputValue" placeholder="输入标签" :style="{width:inputWidth+'px'}">
+    </div>
+    <div class="input-preshow" ref="preshow">
+        {{inputValuePreview}}
+    </div>
+</div>

public/static/plugs/lay-module/tagInput/tagInput.js

@@ -0,0 +1,114 @@
+define(['jquery', 'vue'], function ($, Vue) {
+    const tagInputCss = '/static/plugs/lay-module/tagInput/tagInput.css';
+    const tagInputHtml = '/static/plugs/lay-module/tagInput/tagInput.html';
+
+    var tagInput = function () {
+        var cssElement = document.createElement('link');
+
+        cssElement.setAttribute('rel', 'stylesheet');
+
+        cssElement.setAttribute('href', tagInputCss);
+
+        document.body.appendChild(cssElement);
+    };
+    var tagInputTemplate = '';
+
+    $.ajax({
+        type: "get",
+        url: tagInputHtml,
+        cache: true,
+        async: false,
+        success: function (template) {
+            tagInputTemplate = template;
+        }
+
+    });
+
+    tagInput.prototype.render = function (elem, data) {
+
+        var defaultOption = {
+            placeholder: '请选择',
+            required: ''
+        }
+
+        var options = $.extend(defaultOption, data);
+
+
+
+        app = new Vue({
+            el: elem,
+            data() {
+                return {
+                    setting: options,
+                    value: '',
+                    inputValue: '',
+                    inputWidth: 100,
+                    inputValuePreview: '',
+                    listTag: []
+                }
+            },
+            watch: {
+                inputValue(value) {
+
+                    this.inputValuePreview = value;
+                    this.updateInputWidth()
+                },
+                listTag(value) {
+                    this.value = value.join(',')
+                }
+            },
+            created() {
+                if (options.value.length > 0) {
+                    this.listTag = options.value.split(',')
+
+                }
+
+            },
+            mounted() {
+                if (options.required == 1) {
+                    $(this.$refs['tagInput']).closest('.layui-form-item').children('.layui-form-label').addClass('required');
+                }
+            },
+            template: tagInputTemplate,
+
+            methods: {
+                onInputConfirm(e) {
+
+                    if (e) e.preventDefault();
+
+                    if ($.trim(this.inputValue).length == 0) {
+                        return false;
+                    }
+
+                    this.listTag.push(this.inputValue)
+                    this.inputValue = '';
+                    return false;
+                },
+                onContainerClick() {
+                    $(this.$refs['tagInputMain']).focus()
+                },
+                onInputChange(e) {
+
+                    var cvalue = $(e.target).val();
+                    this.inputValuePreview = cvalue;
+
+                },
+                updateInputWidth() {
+                    var width = $(this.$refs['preshow']).width();
+
+                    if (width < 100) {
+                        width = 100;
+                    }
+                    this.inputWidth = width + 60;
+                },
+                removeItem(item, index) {
+                    this.listTag.splice(index, 1)
+                }
+            }
+        })
+
+        return app;
+    }
+
+    return new tagInput();
+})

public/static/plugs/lay-module/tagInput/tagInput.scss

@@ -0,0 +1,31 @@
+.tag-input-container {
+
+    .layui-input {
+        height        : auto;
+        min-height    : 30px;
+        padding-bottom: 8px;
+    }
+
+    .main-input {
+        border        : none;
+        height        : 22px;
+        line-height   : 22px;
+        margin-left   : 5px;
+        margin-top    : 8px;
+        vertical-align: bottom;
+    }
+
+    .input-preshow {
+        display : inline-block;
+        height  : 0px;
+        overflow: hidden;
+    }
+
+    .layui-form-danger+.layui-input {
+        border-color: #ff5722 !important;
+    }
+
+    .layui-btn {
+        margin-top: 8px;
+    }
+}