vue开发

组件需求

需要一个输入框，输入内容后，回车添加到标签列表，展示出来，并将标签列表的值逗号分割，返回给上层组件。
上层组件传值逗号分割的字符串给本组件，本组件将字符串处理为列表展示出来。

运行实例

<template>
  <div>
    <el-input class="w100" @keyup.enter.native="submitForm()" placeholder="请输入枚举值，回车添加枚举值" v-model="name"></el-input>
    <div class="enumeratedValuesList">
      <el-tag @close="handleClose(item)" closable class="mr20 mb20" v-for="(item,index) in list" :key="index">
        {{
          item
        }}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'enumeratedValues',
  components: {},
  props: {
    enumerationValue: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      list: [],
      name: ''
    }
  },
  watch: {
    enumerationValue() {
      this.getList()
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      if (this.enumerationValue) {
        this.list = this.enumerationValue.split(',')
      }
    },
    submitForm() {
      if (this.name) {
        this.list.push(this.name)
        this.name = ''
        this.getEnumeratedValues()
      }
    },
    handleClose(tag) {
      this.list.splice(this.list.indexOf(tag), 1)
      this.getEnumeratedValues()
    },
    getEnumeratedValues() {
      var str = this.list.join(',')
      this.$emit('getdata', str)
    }
  }
}

</script>
<style lang="scss" scoped>
.enumeratedValuesList {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
}
</style>

使用

* @Author: 858834013@qq.com
* @Name: index
* @Date: 2022-03-25
* @Desc:
*/
<template>
  <div class="other">
    <div class="otherItem">
      <enumeratedValues :enumerationValue="enumerationValue"
                        @getdata="getEnumeratedValues"></enumeratedValues>
    </div>
  </div>
</template>

<script>
import enumeratedValues from '@/components/other/enumeratedValues'

export default {
  name: "index",
  components: {enumeratedValues},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      enumerationValue: '你好,哈哈'
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    getEnumeratedValues(e) {
      this.enumerationValue = e
    }
  }
}
</script>

<style lang="scss" scoped>
.otherItem {
  width: 100%;
  height: 200px;
}

.other {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
}
</style>