feat(tag): add beforeDelete props (#52)

example/src/demo/pc/tag/before-delete.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <p>
+      <tiny-switch v-model="beforeDeleteValue"></tiny-switch>
+      before-change 返回 {{ beforeDeleteValue }} 时 {{ beforeDeleteText }}
+      <br>
+    </p>
+    <tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @close="close(tag)" :before-delete="beforeDelete">{{ tag.name }}</tiny-tag>
+  </div>
+</template>
+
+<script>
+import { Tag, Switch } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag: Tag,
+    TinySwitch: Switch
+  },
+  data() {
+    return {
+      tags: [
+        { name: '标签一', type: '' },
+        { name: '标签二', type: 'success' },
+        { name: '标签三', type: 'info' },
+        { name: '标签四', type: 'warning' },
+        { name: '标签五', type: 'danger' }
+      ],
+      beforeDeleteValue: false
+    }
+  },
+  computed: {
+    beforeDeleteText() {
+      return this.beforeDeleteValue ? '可执行 close 事件，点击删除图标可以删除标签' : '将拦截 close 事件的执行，点击删除图标将无法删除标签'
+    }
+  },
+  methods: {
+    close(tag) {
+      this.tags.splice(this.tags.indexOf(tag), 1)
+    },
+    beforeDelete(done) {
+      setTimeout(() => {
+        this.beforeDeleteValue && done()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag + .tiny-tag {
+  margin-left: 10px;
+}
+</style>

example/src/docs/zh-CN/tag/before-delete.md

@@ -0,0 +1,20 @@
+<div class="demo-header">
+<p class="overviewicon">
+  <span class="wapi-form-tag"/>
+</p>
+
+## Tag 标签
+
+<nova-uxlink widget-name="Tag"></nova-uxlink>
+
+Tag 标签组件，用于标记事物的属性和维度
+</div>
+
+### 删除前的回调
+
+<p>before-delete 回调函数会暂停 close 事件的执行，回调函数内执行 done 参数方法的时候才是真正执行 close 事件的时候。</p>
+<nova-demo-view link="tag/before-delete"></nova-demo-view>
+
+<br>
+
+<nova-attributes link="tag"></nova-attributes>

example/src/nav.config.comp.json

@@ -4238,6 +4238,10 @@
             {
               "path": "/tag/tag-events",
               "name": "事件"
+            },
+            {
+              "path": "/tag/before-delete",
+              "name": "删除前的回调"
             }
           ]
         },

example/src/route.config.comp1.js

@@ -1305,6 +1305,11 @@ export default [
     meta: { title: '其他组件-Tag 标签-事件', lang: 'zh-CN', sign: 'component' },
     component: () => import(/* webpackChunkName: 'v3-tag' */ './docs/zh-CN/tag/tag-events.md')
   },
+  {
+    path: 'tag/before-delete',
+    meta: { title: '其他组件-Tag 标签-删除前的回调', lang: 'zh-CN', sign: 'component' },
+    component: () => import(/* webpackChunkName: 'v3-tag' */ './docs/zh-CN/tag/before-delete.md')
+  },
   {
     path: 'textpopup',
     meta: { title: '其他组件-TextPopup 输入框', lang: 'zh-CN', sign: 'component' },

packages/tag/src/index.js

@@ -28,7 +28,8 @@ export default {
       type: String,
       default: 'light',
       validator: (value) => ~['dark', 'light', 'plain'].indexOf(value)
-    }
+    },
+    beforeDelete: Function
   },
   setup(props, context) {
     return $setup({ props, context, template })

packages/tag/src/pc.vue

@@ -19,7 +19,7 @@ export default {
     IconClose: iconClose()
   },
   emits: ['click', 'close'],
-  props: [...props, 'text', 'closable', 'type', 'hit', 'disabled', 'color', 'size', 'effect'],
+  props: [...props, 'text', 'closable', 'type', 'hit', 'disabled', 'color', 'size', 'effect', 'beforeDelete'],
   setup(props, context) {
     return setup({ props, context, renderless, api, h })
   },