vue.js 回车生成label标签组件

以你之姓@ 2023-06-04 12:53 85阅读 0赞

效果图：  
![1340563-20190823112607923-917022538.png][]

示例代码如下：

<template>
      <div>
        
        <div class="inputbox">
          <div class="arrbox">
            <div v-for="(item,index) in labelarr" :key="index" class="spanbox">
              <span>{
        {item}}</span>
              <i class="spanclose" @click="removeitem(index,item)"></i>
            </div>
            <input
              placeholder="输入后回车"
              size="5"
              v-model="currentval"
              @keyup.enter="addlabel"
              class="input"
              type="text"
            />
          </div>
        </div>
    
        
        <div></div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'enterlabel',
      props: {
        parentarr: {
          type: Array,
          default () {
            return []
          }
        }
      },
      data () {
        return {
          currentval: '',
          labelarr: []
        }
      },
      watch: {
        labelarr (old, cur) {
          this.$emit('on-change', this.labelarr)
        },
        parentarr () {
          if (this.parentarr.length > 0) {
            this.labelarr = []
            for (let i = 0; i < this.parentarr.length; i++) {
              this.labelarr.push(this.parentarr[i])
            }
          } else {
            this.labelarr = []
          }
        }
      },
      methods: {
        // 移除标签
        removeitem (index, item) {
          this.labelarr.splice(index, 1)
        },
        // input回车加入labelarr中
        addlabel () {
          let count = this.labelarr.indexOf(this.currentval)
          if (count === -1) {
            this.labelarr.push(this.currentval)
          }
          this.currentval = ''
        }
      }
    }
    </script>
    
    <style>
    .inputbox {
      background-color: white;
      font-size: 12px;
      border: 1px solid #dcdee2;
      border-radius: 6px;
      margin-bottom: 18px;
      padding: 6px 1px 1px 6px;
      text-align: left;
      font-size: 0;
      margin-bottom: 0;
    }
    .input {
      font-size: 14px;
      border: none;
      box-shadow: none;
      outline: none;
      background-color: transparent;
      padding: 0;
      margin: 0;
      width: auto !important;
      max-width: inherit;
      min-width: 80px;
      vertical-align: top;
      height: 30px;
      color: #34495e;
      margin: 2px;
      line-height: 30px;
    }
    .arrbox {
      border-radius: 6px;
      margin-bottom: 10px;
      padding: 6px 1px 1px 6px;
      text-align: left;
      font-size: 0;
    }
    .spanbox {
      line-height: 30px;
      margin: 2px;
      padding: 0 10px;
      background-color: #1abc9c;
      color: white;
      border-radius: 4px;
      font-size: 13px;
      cursor: pointer;
      display: inline-block;
      position: relative;
      vertical-align: middle;
      overflow: hidden;
      transition: 0.25s linear;
    }
    .spanbox:hover {
      padding: 0px 17px 0 3px;
    }
    .spanclose {
      color: white;
      padding: 0 10px 0 0;
      cursor: pointer;
      font-size: 12px;
      position: absolute;
      right: -3px;
      text-align: right;
      text-decoration: none;
      top: 0;
      width: 100%;
      bottom: 0;
      z-index: 2;
      opacity: 0;
      filter: "alpha(opacity=0)";
      transition: opacity 0.25s linear;
      font-style: normal;
    }
    .spanbox:hover .spanclose {
      padding: 0 10px 5px 0;
      opacity: 1;
      -webkit-filter: none;
      filter: none;
    }
    .spanclose:after {
      content: "x";
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 27px;
    }
    </style>

功能比较简单，需要的同学可以在这基础上再改改。  
随便只记录自己平时遇到的一些需求的解决方法，下次遇到了可以直接用或者不断的改进。

转载于:https://www.cnblogs.com/justyouadmin/p/11398998.html

[1340563-20190823112607923-917022538.png]: /images/20230601/bcb3b75ade8f498cb0fa2e3285240f98.png