input空格回车输入标签

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()
          })
        }
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144