JS组件 回车增加标签（可拖动排序）

<template>

  <div @click="focusTypeInput">

    <draggable v-model="tempList" tag="div" :animation="200" handle=".typeList-item" class="typeList-outside" :move="onMove" @end="changeIndex">

      <div

        v-for="(item, typeIndex) in tempList"

        :key="item"

        class="typeList-item"

      >

        <div><span>{{ item }}</span></div>

        <div style="margin-top:1px;margin-left:8px;line-height:24px;"><a v-if="showDelete(item)" title="删除" @click="deleteItem(typeIndex)"><i class="el-icon-error" style="color: #aaadb5; font-size: 15px;" /></a></div>

      </div>

      <input

        ref="typeInput"

        v-model="tempAttr"

        class="typeList-input"

        placeholder="请按回车键确认添加,可拖拽排序"

        @keyup.enter="addAttrinTypeList"

      />

    </draggable>

  </div>

</template>

<script>

import draggable from 'vuedraggable'

export default ({

  components: {

    draggable

  },

  // eslint-disable-next-line vue/require-prop-types

  props: ['list', 'defaultList', 'limitLength'],

  data() {

    return {

      tempAttr: ''

    }

  },

  computed: {

    defaultSet() {

      if (this.defaultList !== null) {

        return new Set(this.defaultList)

      } else {

        return new Set()

      }

    },

    tempList: {

      get() {

        return this.list

      },

      set(newValue) {

        return this.list

      }

    }

  },

  mounted() {

    console.log(this.list, this.defaultList)

  },

  methods: {

    focusTypeInput() {

      this.$refs.typeInput.focus()

    },

    addAttrinTypeList() {

      if (this.tempAttr !== '') {

        const temp = this.tempAttr

        const index = this.list.findIndex((val, index) => {

          return val === temp

        })

        if (index < 0) {

          if (this.limitLength) {

            if (this.limitLength <= this.list.length) {

              // this.$message({

              //   message: `输入个数不能超过${this.limitLength}个`,

              //   type: 'warning'

              // })

            } else {

              this.list.push(this.tempAttr)

            }

          } else {

            this.list.push(this.tempAttr)

          }

        }

        this.tempAttr = ''

      }

    },

    deleteItem(index) {

      this.list.splice(index, 1)

    },

    changeIndex(event) {

      const oldIndex = event.oldIndex

      const tempItem = this.list[oldIndex]

      const newIndex = event.newIndex

      if (tempItem) {

        this.list.splice(oldIndex, 1)

        this.list.splice(newIndex, 0, tempItem)

      }

    },

    onMove(event) {

      if (event.relatedContext.element && event.relatedContext.element.isFirstNode === 1) {

        return false

      } else {

        return true

      }

    },

    showDelete(item) {

      if (this.defaultSet && !this.defaultSet.has(item)) {

        return true

      } else {

        return false

      }

    }

  }

})

</script>

<style scoped>

    input{border:none;outline:medium;}

    .typeList-outside {

        display:flex;

        flex-flow: row wrap;

        border: 1px solid #adb0b8;

        padding-bottom: 0px;

    }

    .typeList-item {

        cursor: pointer;

        margin-left: 5px;

        border: 1px solid #adb0b8;

        height:24px;

        line-height:24px;

        margin-top:3px;

        padding-left: 4px;

        padding-right: 4px;

        border-radius: 4px;

        background: #f4f4f5;

        color: #909399;

        font-size: 10px;

        display: flex;

    }

    .typeList-input {

        font-size: 10px;

        flex-grow:2;

        width: 165px;

        margin-left:5px;

        margin-top:5px;

        line-height:25px;

        height:25px;

    }

</style>