vue 中基于element-ui 自定义的可输入的button 、可输入的tag 组件

可输入的button

<template>
  <div>
    <el-input
      v-if="visible === true"
      ref="input"
      v-model="inputVal"
      size="small"
      style="width: 200px;"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button v-else size="small" @click="showInput">{{ buttonText }}</el-button>

  </div>
</template>
<script >
export default {
  name: 'InputButton',
  model: {
    prop: 'value',
    event: 'confirm'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    buttonText: {
      type: String,
      default: '+ 新增'
    }
  },
  data() {
    return {
      visible: false,
      inputVal: ''
    }
  },
  watch: {
    value(val) {
      this.inputVal = val
    }
  },

  methods: {
    handleInputConfirm() {
      this.$emit('confirm', this.inputVal)

      this.visible = false
      this.inputVal = ''
    },
    showInput() {
      this.visible = true
      this.$nextTick(_ => {
        this.$refs.input.$refs.input.focus()
      })
    }
  }
}
</script>

<style>

</style>

例子：

 <InputButton v-model="attrKeyInputValue" button-text="+ 新增规格" @confirm="handleAttrKeyInputConfirm" />

可输入的tag

<template>
  <span>
    <el-input
      v-if="visible === true"
      ref="input"
      v-model="inputVal"
      size="small"
      :style="{width: inputWidth}"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-tag
      v-else
      style="cursor: pointer"
      :closable="closable"
      :size="size"
      :disable-transitions="true"
      @close="$emit('close')"
      @click="showInput"
    >{{ value }}</el-tag>

  </span>
</template>
<script >

export default {
  name: 'InputTag',
  model: {
    prop: 'value',
    event: 'confirm'
  },
  props: {
    value: {
      type: String,
      default: ''
    },

    closable: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    inputWidth: {
      type: String,
      default: '100px'
    }
  },
  data() {
    return {
      visible: false,
      inputVal: ''
    }
  },
  watch: {

  },

  methods: {
    handleInputConfirm() {
      this.$emit('confirm', this.inputVal)
      this.visible = false
    },
    showInput() {
      this.visible = true
      this.inputVal = this.value
      this.$nextTick(_ => {
        this.$refs.input.$refs.input.focus()
      })
    }
  }
}
</script>

<style>

</style>

例子：

<InputTag v-model="item.value[vIndex]" style="margin-right: 10px" closable @close="handleAttrValClose(index,vIndex)">{{ vItem }}</InputTag>