自定义el-tag标签

自定义el-tag标签

<template>
  <div>
    <el-tag
      v-for="(tag,index) in dynamicTags"
      :closable="index>4"
      :disable-transitions="false"
      @close="handleClose(tag)">
      {{ tag.label }}
    </el-tag>

    <div v-if="inputVisible" style="margin-top: 10px">
      <el-row :gutter="0.5">
        <div style="float: left">
          过去
          <el-input
            class="input-new-tag"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
          >
          </el-input>
        </div>
        <div style="float: left">
          <el-select ref="saveTagInput2" clearable v-model="period" style="width:45%;margin-left: 2px">
            <el-option v-for="(item,index) of periodList" :label="item.value" :value="item.key" :key="item.key">
              {{ item.value }}
            </el-option>
          </el-select>
        </div>
      </el-row>
    </div>
    <el-button v-else class="button-new-tag" size="small" @click="showInput">自定义周期</el-button>
    <el-button class="button-new-tag" size="small" @click="handleInputConfirm">确定</el-button>

  </div>

</template>


<script>
export default {
  data() {
    return {
      period: "",
      periodList: [
        {
          key: "HOUR",
          value: '小时'
        },
        {
          key: "DAY",
          value: '天'
        },
        {
          key: "WEEK",
          value: '星期'
        },
        {
          key: "MONTH",
          value: '月'
        },
        {
          key: "YEAR",
          value: '年'
        }
      ],
      dynamicTags: [{
        value: 'INTERVAL -1 HOUR',
        label: '过去1小时'
      }, {
        value: 'INTERVAL -1 DAY',
        label: '过去1天'
      }, {
        value: 'INTERVAL -1 WEEK',
        label: '过去1星期'
      },
        {
          value: 'INTERVAL -1 MONTH',
          label: '过去1月'
        },
        {
          value: 'INTERVAL -1 YEAR',
          label: '过去1年'
        }],
      inputVisible: false,
      inputValue: ''
    };
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      //回调改变后的值并渲染
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });

    },

    handleInputConfirm() {
      // console.log("period=====>", this.period)
      // console.log("period=====>",typeof this.period)
      // console.log("period=====>", this.inputValue)
      // console.log("period=====>",typeof this.inputValue)
      if (this.period != '' && this.inputValue != '') {
        // console.log("period=====>", this.period)
        // console.log("inputValue=====>", this.inputValue)
        // value: 'INTERVAL -1 YEAR',
        //   label: '过去1年'
        let temp = {}
        temp.value = 'INTERVAL -' + this.inputValue + ' ' + this.period
        let periodName = ''
        this.periodList.forEach((item) => {
          if (item.key === this.period)
            periodName = item.value
        })
        // console.log("periodName=====>", periodName)
        temp.label = '过去 ' + this.inputValue+periodName
        console.log("temp=====>",temp)
        this.dynamicTags.push(temp);
        // console.log("=======>submit=====>")
      }
      // let inputValue = this.inputValue;
      // if (inputValue) {
      //   this.dynamicTags.push(inputValue);
      // }
      this.inputVisible = false;
      this.inputValue = '';
      this.period='';
    }
  }
}
</script>
<style>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>