centaline-data-driven 1.1.55 → 1.1.59

package/src/centaline/dynamicTags/src/dynamicTags.vue

@@ -1,427 +1,427 @@
-<template>
-  <div class="field-top">
-    <div class="ct-tags" style="width:100%;display:flex">
-      <div style="flex:1;display:flex;margin-right: 5px;" :class="[(focus || showDrop)?'isfocus':'',model.attrs.size?'ct-tags-'+model.attrs.size:''
-    ]" @mouseover="mouseOverHandle" @mouseout="mouseOutHandle">
-        <div style="flex:1;position: relative;" :class="[model.showLabel?'el-input-group el-input-group--prepend':'',!valid?'inputError':'']">
-          <div v-if="model.showLabel && model.label" class="el-input-group__prepend" :class="[model.labelClass]">
-            {{model.label}}
-          </div>
-          <div>
-            <div ref="cttags" class="el-select__tags" :style="{'max-width':tagsWidth + 'px'}" @click="clickHandle">
-              <span>
-                <span class="ct-tags-value-label">{{model.valueLabel}}</span>
-                <span class="el-tag el-tag--info" :class="[model.attrs.size?'el-tag--'+model.attrs.size:'']" v-for="item in model.value">
-                  <span class="el-select__tags-text">{{getOptionText(item)}}</span>
-                  <i v-if="!model.lock" class="el-tag__close el-icon-close" @click="deleteOption(item,$event)"></i>
-                </span>
-              </span>
-            </div>
-            <el-popover ref="pop" placement="bottom-start" v-model="showDrop" :class="[model.showLabel1?'showLabel':'']" :trigger="(!model.paramName || model.lock) ? 'manual' : 'click'">
-              <div>
-                <div>
-                  <el-input ref="searchInput" :size="model.attrs.size" suffix-icon="el-icon-search" v-model="searchText" @input="searchInputHandle"></el-input>
-                </div>
-                <ctSelectOptionVertical :model="model" @click="selectOption($event)"></ctSelectOptionVertical>
-              </div>
-              <input slot="reference" v-bind="model.attrs" :placeholder="tagsPlaceholder"
-                     ref="ct-input" class="" :style="{height:inputHeight + 'px','line-height':inputLineHeight + 'px'}"
-                     :class="model.lock ? 'ct-is-disabled' : 'ct-input_inner'"
-                     @focus="focusHandle" @blur="blurHandle" @click="clickHandle"
-                     :disabled="model.lock" />
-            </el-popover>
-            <span v-if="!model.lock" class="el-input__suffix" @click="clickHandle" :class="[model.attrs.size?'el-input--'+model.attrs.size:'']">
-              <span v-if="showClear === false" class="el-input__suffix-inner">
-                <i class="el-select__caret el-input__icon el-icon-arrow-up" :class="{'is-reverse':showDrop}"></i>
-              </span>
-              <span v-if="showClear === true" class="el-input__suffix-inner ct-close">
-                <i class="el-select__caret el-input__icon el-icon-circle-close is-show-close" @click="clearClickHandle($event)"></i>
-              </span>
-            </span>
-          </div>
-        </div>
-        <span v-show="!valid" class="errorMessage">
-          {{validMessage}}
-        </span>
-      </div>
-
-      <div v-if="model.popupSearchListType === 1 && !model.lock">
-        <el-button v-if="!model.moreActionBtnName" class="h26" size="mini" type="primary" icon="el-icon-search" @click="popupSearchListHandle"></el-button>
-        <el-button v-else size="mini" type="primary" class="h26" @click="popupSearchListHandle">{{model.moreActionBtnName}}</el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import dynamicElement from '../../mixins/dynamicElement'
-  import selectOption from '../../selectOption/src/selectOption'
-  import ctSelectOptionVertical from '../../selectOption/src/selectOptionVertical'
-  export default {
-    name: 'ct-tags',
-    mixins: [dynamicElement],
-    components: {
-      'ct-select-option': selectOption,
-      'ctSelectOptionVertical': ctSelectOptionVertical
-    },
-    props: {
-      api: String,
-      vmodel: Object,
-      popShow: {
-        type: Boolean,
-        default: true
-      }
-    },
-    data() {
-      return {
-        focus: false,
-        showDrop: false,
-        inputHeight: 26,
-        tagsWidth: 175,
-        showClear: false,
-        searchText: "",
-        globalOptions: []
-      }
-    },
-    created() {
-      if (typeof this.vmodel === 'undefined') {
-        this.model = this.loaderObj.Tags(this.source);
-      }
-      else {
-        this.model = this.vmodel;
-      }
-      this.$watch('model.value', (n, o) => {
-        if (typeof this.model.child !== 'undefined') {
-          this.model.child.value = this.model.child.defaultValue || '';
-          this.model.child.text = this.model.child.defaultText || '';
-        }
-      });
-      this.inputHeight = this.inputLineHeight;
-    },
-    computed: {
-      tagsPlaceholder: {
-        get: function () {
-          if (this.model.value.length > 0) {
-            return '';
-          }
-          else {
-            return this.model.label;
-          }
-        },
-        set: function (v) {
-
-        }
-      },
-      inputLineHeight: {
-        get: function () {
-          switch (this.model.attrs.size) {
-            case 'mini':
-              return 26;
-            case 'small':
-              return 32;
-            case 'medium':
-              return 36;
-            default:
-              return 40;
-          }
-        }
-      },
-      optionColSpan: function () {
-        return parseInt(24 / this.model.optionRowCount);
-      },
-      optionRowCount: function () {
-        return parseInt(this.model.options.length % this.model.optionRowCount > 0 ? (this.model.options.length / this.model.optionRowCount) + 1 : this.model.options.length / this.model.optionRowCount);
-      }
-    },
-    mounted() {
-      var self = this;
-      this.$nextTick(function () {
-        var dropdown = self.$refs["pop"];
-        self.$watch('model.options', function (newVal, oldVal) {
-          self.$nextTick(() => {
-            if (typeof dropdown.popperJS !== 'undefined' && dropdown.popperJS) {
-              dropdown.popperJS.destroy();
-              dropdown.popperJS = null;
-              dropdown.updatePopper();
-            }
-            this.setToGlobalOptions();
-            self.$refs["searchInput"].$el.querySelector("input").focus();
-
-            self.$set(self, 'tagsWidth', self.$refs['ct-input'].clientWidth - 30);
-            this.resetInputHeight();
-          });
-        }, { deep: true, immediate: true });
-      });
-    },
-    methods: {
-      getOptions: function () {
-        var self = this;
-        this.model.getOptions(this.api, self.searchText);
-      },
-      tagsChange: function () {
-        var self = this;
-        if (typeof this.model.child !== 'undefined') {
-          this.model.child.value = this.model.child.defaultValue || '';
-          this.model.child.text = this.model.child.defaultText || '';
-        }
-        var currentOptions = this.globalOptions.filter((value) => {
-          return self.model.value.indexOf(value[self.model.optionAttrs.value]) >= 0;
-        });
-        if (currentOptions) {
-          this.model.text = currentOptions;
-        }
-        else {
-          this.model.text = [];
-        }
-        this.inputHandler(self.model.value);
-        this.changeHandler(self.model.value);
-        if(this.model.autoSearch) this.$emit('click');
-      },
-      focusHandle: function () {
-        this.$set(this, 'focus', true);
-      },
-      blurHandle: function () {
-        this.$set(this, 'focus', false);
-      },
-      clickHandle: function () {
-        if (this.model.lock) {
-          return false;
-        }        
-        if (this.model.paramName) {
-          this.$set(this, 'showDrop', !this.showDrop);
-          if (this.showDrop) {
-            this.getOptions();
-          }
-          this.focusHandle();
-        }
-        else if(this.model.popupSearchListType === 1) {
-          this.popupSearchListHandle();
-        }
-        else if ((this.model.popupSearchListType === 0)) {
-          this.$message.warning("请配置参数paramName1");
-        }
-      },
-      popupSearchListHandle: function () {
-        var self = this;
-        self.showDrop=false;
-        self.$emit('popupSearchList', false, self.model, self.model.moreActionRouter, (optionArr) => {
-          self.selectOptionArr(optionArr);
-        });
-      },
-      resetInputHeight() {
-        var self = this;
-        this.$nextTick(function () {
-          for (var i = 1; i < 100; i++) {
-            if (i * self.inputLineHeight > self.$refs['cttags'].clientHeight) {
-              self.$set(self, 'inputHeight', i * self.inputLineHeight);
-              break;
-            }
-          }
-        });
-      },
-      resetTagsWidth() {
-        var self = this;
-        this.$nextTick(function () {
-          self.$set(self, 'tagsWidth', self.$refs['ct-input'].clientWidth - 30);
-
-          this.resetInputHeight();
-        });
-      },
-      resize() {
-        this.resetTagsWidth();
-        //this.resetInputHeight();
-      },
-      getOptionText: function (value) {
-        var self = this;
-        var option = this.globalOptions.find((v) => { return v[self.model.optionAttrs.value] === value });
-        if (option) {
-          return option[self.model.optionAttrs.label];
-        } else {
-          return "";
-        }
-      },
-      deleteOption(value, event) {
-        var self = this;
-        this.model.value.splice(
-          this.model.value.findIndex(
-            (v) => {
-              return v === value;
-            }
-          )
-          , 1);
-        self.resize();
-        if (event) {
-          event.stopPropagation();
-        }
-        this.tagsChange();
-        this.$emit('input', this.model.value);
-      },
-      getOptionSelect(value) {
-        if (this.model.value.find((v) => { return v === value })) {
-          return "danger";
-        }
-        else {
-          return "success";
-        }
-      },
-      selectOption(value) {
-        if (this.model.value.find((v) => { return v === value })) {
-          this.deleteOption(value);
-        }
-        else {
-          this.model.value.push(value);
-        }
-        this.resize();
-        this.tagsChange();
-        this.$emit('input', this.model.value);
-      },
-      selectOptionArr(optionArr) {
-        var self = this;
-        optionArr.forEach((s) => {
-          if (!self.model.value.find((v) => { return v === s[self.model.optionAttrs.value] })) {
-            let op={};
-            op[self.model.optionAttrs.value]=s[self.model.optionAttrs.value];
-            op[self.model.optionAttrs.label]=s[self.model.optionAttrs.label];
-            op[self.model.optionAttrs.rowid]='';
-            op[self.model.optionAttrs.flagDeleted]=false;
-            self.model.options.push(op);
-            self.model.value.push(s[self.model.optionAttrs.value]);
-          }
-        });
-
-        self.setToGlobalOptions();
-        self.resize();
-        self.tagsChange();
-        self.$emit('input', self.model.value);
-      },
-      mouseOverHandle: function () {
-        if (this.model.value.length > 0 && this.model.clearable) {
-          this.$set(this, 'showClear', true);
-        }
-      },
-      mouseOutHandle: function () {
-        this.$set(this, 'showClear', false);
-      },
-      clearClickHandle: function (event) {
-        this.model.value.splice(0);
-        this.resize();
-        this.tagsChange();
-        this.$emit('input', this.model.value);
-        event.stopPropagation();
-      },
-      searchInputHandle: function () {
-        var currentSeatch = this.searchText;
-        this.searchTickControl(currentSeatch);
-      },
-      searchTickControl: function (search) {
-        var self = this;
-        setTimeout(function () {
-          if (search === self.searchText) {
-            self.getOptions(self.searchText);
-          }
-        }, self.model.searchTick);
-      },
-      setToGlobalOptions() {
-        var self = this;
-        this.model.options.forEach((v) => {
-          var globalOption = self.globalOptions.find((v1) => {
-            return v1[self.model.optionAttrs.value] === v[self.model.optionAttrs.value];
-          });
-          if (globalOption) {
-            globalOption[self.model.optionAttrs.label] = v[self.model.optionAttrs.label];
-          }
-          else {
-            self.globalOptions.push(v);
-          }
-        });
-      }
-    },
-    watch: {
-      popShow: function (newV, oldV) {
-        this.resize();
-      }
-    }
-  }
-</script>
-<style>
-      .ct-tags .ct-input_inner::-webkit-input-placeholder {
-        color: #c0c4cc;
-      }
-
-      .ct-tags .ct-input_inner::-moz-placeholder {
-        color: #c0c4cc;
-      }
-
-      .ct-tags .ct-input_inner:-ms-input-placeholder {
-        color: #c0c4cc;
-      }
-
-      .ct-tags .ct-input_inner:hover {
-        border-color: #c0c4cc; /*border-color:#c0c4cc*/
-      }
-
-    .ct-tags.isfocus .ct-input_inner:hover {
-      border-color: #409EFF; /*border-color:#c0c4cc*/
-    }
-
-    .ct-tags.isfocus .ct-input_inner {
-      border-color: #409EFF;
-    }
-
-    .ct-tags .el-input__suffix {
-      right: 10px;
-      cursor: pointer;
-    }
-
-    .ct-tags .el-select__caret {
-      color: #c0c4cc;
-      font-size: inherit;
-      -webkit-transition: -webkit-transform .3s;
-      transition: -webkit-transform .3s;
-      transition: transform .3s;
-      transition: transform .3s, -webkit-transform .3s;
-      transition: transform .3s,-webkit-transform .3s;
-      -webkit-transform: rotateZ(180deg);
-      transform: rotateZ(180deg);
-      cursor: pointer;
-    }
-
-    .ct-tags .is-reverse {
-      -webkit-transform: rotateZ(0deg);
-      transform: rotateZ(0deg);
-    }
-
-    .ct-tags .el-tag {
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      border-color: transparent;
-      margin: 2px 0 2px 6px;
-      background-color: #f0f2f5;
-    }
-
-    .ct-tags.ct-tags-mini {
-      font-size: 12px;
-    }
-
-    .ct-tags.ct-tags-small {
-      font-size: 13px;
-    }
-
-    .ct-tags.ct-tags-medium {
-      font-size: 14px;
-    }
-
-  .ct-option {
-    margin: 5px;
-    cursor:pointer;
-  }
-  .ct-tags .ct-close > .el-select__caret.is-show-close:hover {
-    color: #909399;
-  }
-  .ct-tags-value-label {
-    /* padding-left: 15px; */
-  }
-  .h26{
-  height: 26px;
-}
-</style>
+<template>
+  <div class="field-top">
+    <div class="ct-tags" style="width:100%;display:flex">
+      <div style="flex:1;display:flex;margin-right: 5px;" :class="[(focus || showDrop)?'isfocus':'',model.attrs.size?'ct-tags-'+model.attrs.size:''
+    ]" @mouseover="mouseOverHandle" @mouseout="mouseOutHandle">
+        <div style="flex:1;position: relative;" :class="[model.showLabel?'el-input-group el-input-group--prepend':'',!valid?'inputError':'']">
+          <div v-if="model.showLabel && model.label" class="el-input-group__prepend" :class="[model.labelClass]">
+            {{model.label}}
+          </div>
+          <div>
+            <div ref="cttags" class="el-select__tags" :style="{'max-width':tagsWidth + 'px'}" @click="clickHandle">
+              <span>
+                <span class="ct-tags-value-label">{{model.valueLabel}}</span>
+                <span class="el-tag el-tag--info" :class="[model.attrs.size?'el-tag--'+model.attrs.size:'']" v-for="item in model.value">
+                  <span class="el-select__tags-text">{{getOptionText(item)}}</span>
+                  <i v-if="!model.lock" class="el-tag__close el-icon-close" @click="deleteOption(item,$event)"></i>
+                </span>
+              </span>
+            </div>
+            <el-popover ref="pop" placement="bottom-start" v-model="showDrop" :class="[model.showLabel1?'showLabel':'']" :trigger="(!model.paramName || model.lock) ? 'manual' : 'click'">
+              <div>
+                <div>
+                  <el-input ref="searchInput" :size="model.attrs.size" suffix-icon="el-icon-search" v-model="searchText" @input="searchInputHandle"></el-input>
+                </div>
+                <ctSelectOptionVertical :model="model" @click="selectOption($event)"></ctSelectOptionVertical>
+              </div>
+              <input slot="reference" v-bind="model.attrs" :placeholder="tagsPlaceholder"
+                     ref="ct-input" class="" :style="{height:inputHeight + 'px','line-height':inputLineHeight + 'px'}"
+                     :class="model.lock ? 'ct-is-disabled' : 'ct-input_inner'"
+                     @focus="focusHandle" @blur="blurHandle" @click="clickHandle"
+                     :disabled="model.lock" />
+            </el-popover>
+            <span v-if="!model.lock" class="el-input__suffix" @click="clickHandle" :class="[model.attrs.size?'el-input--'+model.attrs.size:'']">
+              <span v-if="showClear === false" class="el-input__suffix-inner">
+                <i class="el-select__caret el-input__icon el-icon-arrow-up" :class="{'is-reverse':showDrop}"></i>
+              </span>
+              <span v-if="showClear === true" class="el-input__suffix-inner ct-close">
+                <i class="el-select__caret el-input__icon el-icon-circle-close is-show-close" @click="clearClickHandle($event)"></i>
+              </span>
+            </span>
+          </div>
+        </div>
+        <span v-show="!valid" class="errorMessage">
+          {{validMessage}}
+        </span>
+      </div>
+
+      <div v-if="model.popupSearchListType === 1 && !model.lock">
+        <el-button v-if="!model.moreActionBtnName" class="h26" size="mini" type="primary" icon="el-icon-search" @click="popupSearchListHandle"></el-button>
+        <el-button v-else size="mini" type="primary" class="h26" @click="popupSearchListHandle">{{model.moreActionBtnName}}</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import dynamicElement from '../../mixins/dynamicElement'
+  import selectOption from '../../selectOption/src/selectOption'
+  import ctSelectOptionVertical from '../../selectOption/src/selectOptionVertical'
+  export default {
+    name: 'ct-tags',
+    mixins: [dynamicElement],
+    components: {
+      'ct-select-option': selectOption,
+      'ctSelectOptionVertical': ctSelectOptionVertical
+    },
+    props: {
+      api: String,
+      vmodel: Object,
+      popShow: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        focus: false,
+        showDrop: false,
+        inputHeight: 26,
+        tagsWidth: 175,
+        showClear: false,
+        searchText: "",
+        globalOptions: []
+      }
+    },
+    created() {
+      if (typeof this.vmodel === 'undefined') {
+        this.model = this.loaderObj.Tags(this.source);
+      }
+      else {
+        this.model = this.vmodel;
+      }
+      this.$watch('model.value', (n, o) => {
+        if (typeof this.model.child !== 'undefined') {
+          this.model.child.value = this.model.child.defaultValue || '';
+          this.model.child.text = this.model.child.defaultText || '';
+        }
+      });
+      this.inputHeight = this.inputLineHeight;
+    },
+    computed: {
+      tagsPlaceholder: {
+        get: function () {
+          if (this.model.value.length > 0) {
+            return '';
+          }
+          else {
+            return this.model.label;
+          }
+        },
+        set: function (v) {
+
+        }
+      },
+      inputLineHeight: {
+        get: function () {
+          switch (this.model.attrs.size) {
+            case 'mini':
+              return 26;
+            case 'small':
+              return 32;
+            case 'medium':
+              return 36;
+            default:
+              return 40;
+          }
+        }
+      },
+      optionColSpan: function () {
+        return parseInt(24 / this.model.optionRowCount);
+      },
+      optionRowCount: function () {
+        return parseInt(this.model.options.length % this.model.optionRowCount > 0 ? (this.model.options.length / this.model.optionRowCount) + 1 : this.model.options.length / this.model.optionRowCount);
+      }
+    },
+    mounted() {
+      var self = this;
+      this.$nextTick(function () {
+        var dropdown = self.$refs["pop"];
+        self.$watch('model.options', function (newVal, oldVal) {
+          self.$nextTick(() => {
+            if (typeof dropdown.popperJS !== 'undefined' && dropdown.popperJS) {
+              dropdown.popperJS.destroy();
+              dropdown.popperJS = null;
+              dropdown.updatePopper();
+            }
+            this.setToGlobalOptions();
+            self.$refs["searchInput"].$el.querySelector("input").focus();
+
+            self.$set(self, 'tagsWidth', self.$refs['ct-input'].clientWidth - 30);
+            this.resetInputHeight();
+          });
+        }, { deep: true, immediate: true });
+      });
+    },
+    methods: {
+      getOptions: function () {
+        var self = this;
+        this.model.getOptions(this.api, self.searchText);
+      },
+      tagsChange: function () {
+        var self = this;
+        if (typeof this.model.child !== 'undefined') {
+          this.model.child.value = this.model.child.defaultValue || '';
+          this.model.child.text = this.model.child.defaultText || '';
+        }
+        var currentOptions = this.globalOptions.filter((value) => {
+          return self.model.value.indexOf(value[self.model.optionAttrs.value]) >= 0;
+        });
+        if (currentOptions) {
+          this.model.text = currentOptions;
+        }
+        else {
+          this.model.text = [];
+        }
+        this.inputHandler(self.model.value);
+        this.changeHandler(self.model.value);
+        if(this.model.autoSearch) this.$emit('click');
+      },
+      focusHandle: function () {
+        this.$set(this, 'focus', true);
+      },
+      blurHandle: function () {
+        this.$set(this, 'focus', false);
+      },
+      clickHandle: function () {
+        if (this.model.lock) {
+          return false;
+        }        
+        if (this.model.paramName) {
+          this.$set(this, 'showDrop', !this.showDrop);
+          if (this.showDrop) {
+            this.getOptions();
+          }
+          this.focusHandle();
+        }
+        else if(this.model.popupSearchListType === 1) {
+          this.popupSearchListHandle();
+        }
+        else if ((this.model.popupSearchListType === 0)) {
+          this.$message.warning("请配置参数paramName1");
+        }
+      },
+      popupSearchListHandle: function () {
+        var self = this;
+        self.showDrop=false;
+        self.$emit('popupSearchList', false, self.model, self.model.moreActionRouter, (optionArr) => {
+          self.selectOptionArr(optionArr);
+        });
+      },
+      resetInputHeight() {
+        var self = this;
+        this.$nextTick(function () {
+          for (var i = 1; i < 100; i++) {
+            if (i * self.inputLineHeight > self.$refs['cttags'].clientHeight) {
+              self.$set(self, 'inputHeight', i * self.inputLineHeight);
+              break;
+            }
+          }
+        });
+      },
+      resetTagsWidth() {
+        var self = this;
+        this.$nextTick(function () {
+          self.$set(self, 'tagsWidth', self.$refs['ct-input'].clientWidth - 30);
+
+          this.resetInputHeight();
+        });
+      },
+      resize() {
+        this.resetTagsWidth();
+        //this.resetInputHeight();
+      },
+      getOptionText: function (value) {
+        var self = this;
+        var option = this.globalOptions.find((v) => { return v[self.model.optionAttrs.value] === value });
+        if (option) {
+          return option[self.model.optionAttrs.label];
+        } else {
+          return "";
+        }
+      },
+      deleteOption(value, event) {
+        var self = this;
+        this.model.value.splice(
+          this.model.value.findIndex(
+            (v) => {
+              return v === value;
+            }
+          )
+          , 1);
+        self.resize();
+        if (event) {
+          event.stopPropagation();
+        }
+        this.tagsChange();
+        this.$emit('input', this.model.value);
+      },
+      getOptionSelect(value) {
+        if (this.model.value.find((v) => { return v === value })) {
+          return "danger";
+        }
+        else {
+          return "success";
+        }
+      },
+      selectOption(value) {
+        if (this.model.value.find((v) => { return v === value })) {
+          this.deleteOption(value);
+        }
+        else {
+          this.model.value.push(value);
+        }
+        this.resize();
+        this.tagsChange();
+        this.$emit('input', this.model.value);
+      },
+      selectOptionArr(optionArr) {
+        var self = this;
+        optionArr.forEach((s) => {
+          if (!self.model.value.find((v) => { return v === s[self.model.optionAttrs.value] })) {
+            let op={};
+            op[self.model.optionAttrs.value]=s[self.model.optionAttrs.value];
+            op[self.model.optionAttrs.label]=s[self.model.optionAttrs.label];
+            op[self.model.optionAttrs.rowid]='';
+            op[self.model.optionAttrs.flagDeleted]=false;
+            self.model.options.push(op);
+            self.model.value.push(s[self.model.optionAttrs.value]);
+          }
+        });
+
+        self.setToGlobalOptions();
+        self.resize();
+        self.tagsChange();
+        self.$emit('input', self.model.value);
+      },
+      mouseOverHandle: function () {
+        if (this.model.value.length > 0 && this.model.clearable) {
+          this.$set(this, 'showClear', true);
+        }
+      },
+      mouseOutHandle: function () {
+        this.$set(this, 'showClear', false);
+      },
+      clearClickHandle: function (event) {
+        this.model.value.splice(0);
+        this.resize();
+        this.tagsChange();
+        this.$emit('input', this.model.value);
+        event.stopPropagation();
+      },
+      searchInputHandle: function () {
+        var currentSeatch = this.searchText;
+        this.searchTickControl(currentSeatch);
+      },
+      searchTickControl: function (search) {
+        var self = this;
+        setTimeout(function () {
+          if (search === self.searchText) {
+            self.getOptions(self.searchText);
+          }
+        }, self.model.searchTick);
+      },
+      setToGlobalOptions() {
+        var self = this;
+        this.model.options.forEach((v) => {
+          var globalOption = self.globalOptions.find((v1) => {
+            return v1[self.model.optionAttrs.value] === v[self.model.optionAttrs.value];
+          });
+          if (globalOption) {
+            globalOption[self.model.optionAttrs.label] = v[self.model.optionAttrs.label];
+          }
+          else {
+            self.globalOptions.push(v);
+          }
+        });
+      }
+    },
+    watch: {
+      popShow: function (newV, oldV) {
+        this.resize();
+      }
+    }
+  }
+</script>
+<style>
+      .ct-tags .ct-input_inner::-webkit-input-placeholder {
+        color: #c0c4cc;
+      }
+
+      .ct-tags .ct-input_inner::-moz-placeholder {
+        color: #c0c4cc;
+      }
+
+      .ct-tags .ct-input_inner:-ms-input-placeholder {
+        color: #c0c4cc;
+      }
+
+      .ct-tags .ct-input_inner:hover {
+        border-color: #c0c4cc; /*border-color:#c0c4cc*/
+      }
+
+    .ct-tags.isfocus .ct-input_inner:hover {
+      border-color: #409EFF; /*border-color:#c0c4cc*/
+    }
+
+    .ct-tags.isfocus .ct-input_inner {
+      border-color: #409EFF;
+    }
+
+    .ct-tags .el-input__suffix {
+      right: 10px;
+      cursor: pointer;
+    }
+
+    .ct-tags .el-select__caret {
+      color: #c0c4cc;
+      font-size: inherit;
+      -webkit-transition: -webkit-transform .3s;
+      transition: -webkit-transform .3s;
+      transition: transform .3s;
+      transition: transform .3s, -webkit-transform .3s;
+      transition: transform .3s,-webkit-transform .3s;
+      -webkit-transform: rotateZ(180deg);
+      transform: rotateZ(180deg);
+      cursor: pointer;
+    }
+
+    .ct-tags .is-reverse {
+      -webkit-transform: rotateZ(0deg);
+      transform: rotateZ(0deg);
+    }
+
+    .ct-tags .el-tag {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      border-color: transparent;
+      margin: 2px 0 2px 6px;
+      background-color: #f0f2f5;
+    }
+
+    .ct-tags.ct-tags-mini {
+      font-size: 12px;
+    }
+
+    .ct-tags.ct-tags-small {
+      font-size: 13px;
+    }
+
+    .ct-tags.ct-tags-medium {
+      font-size: 14px;
+    }
+
+  .ct-option {
+    margin: 5px;
+    cursor:pointer;
+  }
+  .ct-tags .ct-close > .el-select__caret.is-show-close:hover {
+    color: #909399;
+  }
+  .ct-tags-value-label {
+    /* padding-left: 15px; */
+  }
+  .h26{
+  height: 26px;
+}
+</style>