Select: add delete-tag event (#3632)

examples/docs/en-US/select.md

@@ -647,6 +647,7 @@ Create and select new items that are not included in select options
 |---------|---------|---------|
 | change | triggers when the selected value changes | current selected value |
 | visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
+| delete-tag | triggers when deletes tag in multiple mode | deleted tag value |
 
 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/zh-CN/select.md

@@ -648,6 +648,7 @@
 |---------|---------|---------|
 | change | 选中值发生变化时触发 | 目前的选中值 |
 | visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
+| delete-tag | 多选模式下删除tag时触发 | 删除的tag值 |
 
 ### Option Group Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

packages/select/src/select.vue

@@ -599,7 +599,8 @@
       deleteTag(event, tag) {
         let index = this.selected.indexOf(tag);
         if (index > -1 && !this.disabled) {
-          this.value.splice(index, 1);
+          let deletedTag = this.value.splice(index, 1)[0];
+          this.$emit('delete-tag', deletedTag);
         }
         event.stopPropagation();
       },

test/unit/specs/select.spec.js

@@ -442,6 +442,66 @@ describe('Select', () => {
     }, 100);
   });
 
+  it('multiple delete-tag', done => {
+    sinon.stub(window.console, 'log');
+    vm = createVue({
+      template: `
+        <div>
+          <el-select v-model="value" multiple @delete-tag="handleDeleteTag">
+            <el-option
+              v-for="item in options"
+              :label="item.label"
+              :value="item.value">
+              <p>{{item.label}} {{item.value}}</p>
+            </el-option>
+          </el-select>
+        </div>
+      `,
+
+      data() {
+        return {
+          options: [{
+            value: '选项1',
+            label: '黄金糕'
+          }, {
+            value: '选项2',
+            label: '双皮奶'
+          }, {
+            value: '选项3',
+            label: '蚵仔煎'
+          }, {
+            value: '选项4',
+            label: '龙须面'
+          }, {
+            value: '选项5',
+            label: '北京烤鸭'
+          }],
+          value: ['选项1', '选项3']
+        };
+      },
+
+      methods: {
+        handleDeleteTag() {
+          console.log('delete tag');
+        }
+      }
+    }, true);
+    const tagCloseIcons = vm.$el.querySelectorAll('.el-tag__close');
+    expect(vm.value.length).to.equal(2);
+    tagCloseIcons[1].click();
+    setTimeout(() => {
+      expect(vm.value.length).to.equal(1);
+      expect(window.console.log.callCount).to.equal(1);
+      tagCloseIcons[0].click();
+      setTimeout(() => {
+        expect(vm.value.length).to.equal(0);
+        expect(window.console.log.callCount).to.equal(2);
+        window.console.log.restore();
+        done();
+      }, 100);
+    }, 100);
+  });
+
   it('multiple limit', done => {
     vm = getSelectVm({ multiple: true, multipleLimit: 1 });
     const options = vm.$el.querySelectorAll('.el-select-dropdown__item');