input空格回车输入标签

分析

我们自己封装input输入标签需要注意一下几点:

1. 样式实现，span实现标签效果、input隐藏边框(Element-UI可以直接使用tag)。
2. 事件监听，确定生成标签的操作，可以是回车,并且需要监听离开焦点的情况。
3. 标签限制,最多几个,以及输入验证

• html:

  <template>
        <!-- 外层div -->
        <div ref="arrbox" :style="{width:`${width}px`,'min-height':`${height}px`}" class="arrbox" @click="onclick">
          <!-- 标签 -->
          <el-tag v-for="(item,index) in tagsArr" :key="index" type="info" closable @close.stop="removeTag(index)"><span :ref="`span_${index}`" :show="getTitle(index,item)" class="tagSPan"><span :ref="`spanRef_${index}`" @dblclick="selectDiv">{{ item }}</span></span></el-tag>
          <!-- 标签 自定义的标签样式 -->
          <!-- <div v-for="(item,index) in tagsArr" :key="index" class="spantab">
            <span class="tagtext" :ref="`span_${index}`"  :show="getTitle(index,item)" ><span :ref="`spanRef_${index}`" @dblclick="selectDiv">{{ item }}</span></span>
            <i class="tagclose" @click.stop="removeTag(index)" />
          </div> -->
          <!-- 输入框 -->
          <input
            ref="inputTag"
            v-model="currentval"
            :placeholder="tagsArr.length==0?placeholder:''"
            class="inputTag"
            type="text"
            @keyup="keyupFn"
            @blur="addTags('bulr')"
          >
        </div>
      </template>
  

• js:

1. 首先我们需要在点击最外层的div时,让input聚焦
2. 在css样式上,我们让input和那些tag使用flex布局放在一行,并加上换行属性,同时设置input最小宽度和flex:1,这样就可以让input一直更在tag后面,宽度小于定义的最小宽度时也会自动换行
3. 需要监听空格和回车,以及失焦,将input的值放到tag数组里面,然后清空tag.
4. 在添加tag的时候加一些限制,这样可以更好的用户操作

   export default {
         name: 'inputTags',
         model: {
           prop: 'parentArr',
           event: 'change-parentArr'
         },
         props: {
           width: {
             type: Number,
             default: 300
           },
           height: {
             type: Number,
             default: 40
           },
           parentArr: {
             type: Array,
             default() {
               return []
             }
           },
           limit: { // 最多生成标签数
             type: Number,
             default: -1
           },
           placeholder: {
             type: String,
             default: '请输入'
           },
           reg: {
             type: String,
             default: ''
           }
         },
         data() {
           return {
             currentval: '',
             tagsArr: [],
             inputLength: ''
           }
         },
         watch: {
           tagsArr(value) {
             this.$emit('change-parentArr', value)
           },
           parentArr: {
             handler(value) {
               this.tagsArr = value
             },
             deep: true,
             immediate: true
           },
           currentval(val) {
     // 获取最后三个字符，如果是逗号或者分号就分割，主要是为了使用者复制整段话
   	      const lastValue = val.substr(-3)
   	      //   输入逗号，生成标签
   	      if (lastValue.indexOf(',') > -1 || lastValue.indexOf('，') > -1 || lastValue.indexOf(';') > -1 || lastValue.indexOf('；') > -1) {
   	        this.currentval = this.currentval.split(',')[0]
   	        this.currentval = this.currentval.split('，')[0]
   	        this.currentval = this.currentval.split(';')[0]
   	        this.currentval = this.currentval.split('；')[0]
   	        this.addTags()
   	      }
   	    }
         },
         mounted() {
         },
         methods: {
          getTitle(index, title) {
             this.$nextTick(() => {
               const spanDom = this.$refs[`span_${index}`][0]
               const textDom = this.$refs[`spanRef_${index}`][0]
               if (textDom.offsetWidth > spanDom.offsetWidth) {
                 spanDom.setAttribute('title', title)
               }
             })
           },
            // 双击选中
   	    selectDiv (e){
   	      var range;
   	      var element=e.currentTarget
   	      if (document.body.createTextRange) {
   	        range = document.body.createTextRange()
   	        range.moveToElementText(element)
   	        range.select()
   	      } else if (window.getSelection) {
   	        var selection = window.getSelection()
   	        range = document.createRange()
   	        range.selectNodeContents(element)
   	        selection.removeAllRanges()
   	        selection.addRange(range)
   	        /* if(selection.setBaseAndExtent){
   	              selection.setBaseAndExtent(text, 0, text, 1);
   	          }*/
   	      } else {
   	        console.log('none')
   	      }
   	    },
           removeTag(index) {
             this.tagsArr.splice(index, 1)
           },
           // 监听按键,空格或者Enter
           keyupFn(e) {
           //   if (e.code == 'Space' || e.keyCode == 32) {
           //     this.currentval = this.currentval.slice(0, -1)
           //     this.addTags()
           //   }
             if (e.key == 'Enter' || e.keyCode == 13) {
               this.addTags()
             }
           },
           addTags(type = 'click') {
             if (this.limit != -1 && this.tagsArr.length >= this.limit) {
               this.$message.warning(`只能输入${this.limit}个`)
               return
             }
             if (this.tagsArr.indexOf(this.currentval) > -1) {
               if (type == 'click') {
                 this.$message.warning(`已经输入了【${this.currentval}】`)
               } else {
                 this.currentval = ''
               }
   
               return
             }
             // 格式校验
             if (this.reg != '') {
               if (!this.reg.test(this.currentval)) {
                 this.$message.warning('格式不正确！')
                 this.currentval = ''
                 return
               }
             }
             this.tagsArr.push(this.currentval)
             this.tagsArr = this.tagsArr.filter(n => n != '')
             this.currentval = ''
           },
           onclick() {
             this.$nextTick(() => {
               this.$refs.inputTag.focus()
             })
           }
         }
       }
   

• css:

   /* 外层div */
      input::-webkit-input-placeholder {
          /* placeholder颜色  */
          color: #c1c7cf;
          /* placeholder字体大小  */
          font-size: 14px;
      }
      .arrbox {
          box-sizing:border-box;
          background-color: white;
          border: 1px solid #dcdee2;
          border-radius: 4px;
          font-size: 12px;
          text-align: left;
          word-wrap: break-word;
          overflow: hidden;
          display: inline-flex;
          flex-wrap: wrap;
          align-items: center;
      }
      /* input */
      .inputTag {
          font-size: 12px;
          border: none;
          box-shadow: none;
          outline: none;
          background-color: transparent;
          min-width: 40%;
          color: #495060;
          flex: 1;
          height: 30px;
          margin-left: 15px;
          padding-left: 0;
      }
      .el-tag{
          height: 25px;
          line-height: 25px;
          margin: 3px 3px;
          max-width: calc(100% - 5px) !important;
  
      }
      .tagSPan{
          display: inline-block;
          max-width: calc(100% - 10px) !important;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
      }
      ::v-deep .el-tag__close {
          background-color: #C0C4CC;
          top:-10px;
          transform: scale(.8);
          &::before{
              transform: translate(0,0.5px);
          }
      }
  
      /* 自定义的标签 */
      .spantab {
          display: inline-block;
          font-size: 14px;
          margin: 3px;
          height: 20px;
          background-color: #f7f7f7;
          border: 1px solid #e8eaec;
          border-radius: 3px;
          max-width: calc(100% - 5px);
          position: relative;
          padding-right: 20px;
        }
  
        .tagtext {
          height: 20px;
          line-height: 20px;
          max-width: 100%;
          position: relative;
          display: inline-block;
          padding-left: 8px;
          color: #495060;
          font-size: 12px;
          cursor: pointer;
          opacity: 1;
          vertical-align: top;
          overflow: hidden;
          transition: 0.25s linear;
          max-width: 100% !important;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
  
        .tagclose {
          opacity: 1;
          -webkit-filter: none;
          filter: none;
          position: absolute;
          top: 0;
          right: 0;
        }
  
        .tagclose:after {
          content: "x";
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          line-height: 14px;
          vertical-align: top;
          text-align: center;
          margin: 2px 2px 2px 5px;
          cursor: pointer;
          width: 14px;
          height: 14px;
          display: inline-block;
          background-color: #C0C4CC;
          border-radius: 50%;
        }
  
  

• 使用:

  <template>
          <tagInput v-model="from.tag" :width="302" placeholder="请输入标签" />
  </template>
  <script>
  import tagInput from ./tagInput'
  export default {
    components: {
      tagInput
    },
    data(){
          return{
                  from:{
                          tag:[]
                  }
          }
    }
  }
  </script>