fix(tag): [tag] Fix the pre deletion operation function (#1057)

examples/sites/demos/pc/app/tag/before-delete.vue

@@ -1,64 +0,0 @@
-<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>

examples/sites/demos/pc/app/tag/closable-composition-api.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="tiny-tag-demo">
-    <tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @close="handleClose(tag)">{{
-      tag.name
-    }}</tiny-tag>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Tag as TinyTag, Modal } from '@opentiny/vue'
-
-const tags = ref([
-  { name: '标签一', type: '' },
-  { name: '标签二', type: 'success' },
-  { name: '标签三', type: 'info' },
-  { name: '标签四', type: 'warning' },
-  { name: '标签五', type: 'danger' }
-])
-
-function handleClose(tag) {
-  tags.value.splice(tags.value.indexOf(tag), 1)
-  Modal.message('close 事件')
-}
-</script>

examples/sites/demos/pc/app/tag/closable.spec.ts

@@ -1,14 +0,0 @@
-import { expect, test } from '@playwright/test'
-
-test('是否正常移除标签', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
-  await page.goto('tag#closable')
-
-  const first = page.locator('.tiny-tag').filter({ hasText: '标签一' })
-  const close = first.locator('.tiny-tag__close')
-  const modal = page.locator('.tiny-modal__box').nth(0)
-
-  await close.click()
-  await modal.waitFor({ state: 'attached', timeout: 100 })
-  await expect(first).not.toBeVisible()
-})

examples/sites/demos/pc/app/tag/delete-composition-api.vue

@@ -1,16 +1,11 @@
 <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)"
+      @close="handleClose(tag)"
       :before-delete="beforeDelete"
       >{{ tag.name }}</tiny-tag
     >
@@ -19,7 +14,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { Tag as TinyTag, Switch as TinySwitch } from '@opentiny/vue'
+import { Tag as TinyTag, Modal } from '@opentiny/vue'
 
 const tags = ref([
   { name: '标签一', type: '' },
@@ -28,20 +23,15 @@ const tags = ref([
   { name: '标签四', type: 'warning' },
   { name: '标签五', type: 'danger' }
 ])
-const beforeDeleteValue = ref(false)
-const beforeDeleteText = computed(() => {
-  return beforeDeleteValue.value
-    ? '可执行 close 事件，点击删除图标可以删除标签'
-    : '将拦截 close 事件的执行，点击删除图标将无法删除标签'
-})
 
-function close(tag) {
+function handleClose(tag) {
   tags.value.splice(tags.value.indexOf(tag), 1)
+  Modal.message('close 事件')
 }
 
 function beforeDelete(done) {
-  setTimeout(() => {
+  Modal.confirm('确认删除？').then((res) => {
-    beforeDeleteValue.value && done()
+    res === 'confirm' && done()
   })
 }
 </script>

examples/sites/demos/pc/app/tag/delete.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+
+test('是否能阻止删除或正常删除标签', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('tag#delete')
+
+  const first = page.locator('.tiny-tag').filter({ hasText: '标签一' })
+  const close = first.locator('.tiny-tag__close')
+  const modal = page.locator('.tiny-modal__box').getByText('消息提示确认删除？确认取消')
+
+  await close.click()
+  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await page.getByRole('button', { name: '取消' }).click()
+  await first.isVisible()
+  await close.click()
+  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await page.getByRole('button', { name: '确认' }).click()
+  await expect(first).not.toBeVisible()
+})

examples/sites/demos/pc/app/tag/delete.vue

@@ -1,12 +1,18 @@
 <template>
-  <div class="tiny-tag-demo">
+  <div>
-    <tiny-tag v-for="tag in tags" :key="'tiny-tag1-' + tag.name" closable :type="tag.type" @close="handleClose(tag)">{{
+    <tiny-tag
-      tag.name
+      v-for="tag in tags"
-    }}</tiny-tag>
+      :key="'tiny-tag1-' + tag.name"
+      closable
+      :type="tag.type"
+      @close="handleClose(tag)"
+      :before-delete="beforeDelete"
+      >{{ tag.name }}</tiny-tag
+    >
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Tag, Modal } from '@opentiny/vue'
 
 export default {
@@ -28,7 +34,18 @@ export default {
     handleClose(tag) {
       this.tags.splice(this.tags.indexOf(tag), 1)
       Modal.message('close 事件')
+    },
+    beforeDelete(done) {
+      Modal.confirm('确认删除？').then((res) => {
+        res === 'confirm' && done()
+      })
     }
   }
 }
 </script>
+
+<style scoped>
+.tiny-tag + .tiny-tag {
+  margin-left: 10px;
+}
+</style>

examples/sites/demos/pc/app/tag/webdoc/tag.js

@@ -50,14 +50,15 @@ export default {
       'codeFiles': ['disabled.vue']
     },
     {
-      'demoId': 'closable',
+      'demoId': 'delete',
-      'name': { 'zh-CN': '移除', 'en-US': 'Remove' },
+      'name': { 'zh-CN': '删除操作', 'en-US': 'Delete' },
       'desc': {
-        'zh-CN': '通过 <code>closable</code> 设置展示关闭按钮， <code>close</code> 监听关闭按钮点击事件，做删除操作。',
+        'zh-CN':
+          '通过 <code>closable</code> 设置展示关闭按钮， <code>before-delete</code> 设置删除前的操作，可以在此钩子中做提示或确认；<code>close</code> 监听关闭按钮点击事件，做删除操作。',
         'en-US':
-          'Set the display close button through <code>close</code> , listen to the close button click event, and perform the deletion operation.'
+          'Set the display close button through<code>close</code>, and<code>before-delete</code>to set the operation before deletion, which can be prompted or confirmed in this hook< Code>close</code>Listen to the close button click event and perform the deletion operation.'
       },
-      'codeFiles': ['closable.vue']
+      'codeFiles': ['delete.vue']
     },
     {
       'demoId': 'create',
@@ -95,12 +96,19 @@ export default {
       'name': 'tag',
       'type': 'component',
       'props': [
+        {
+          'name': 'before-delete',
+          'type': '(close: () => void) => void',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '删除前回调函数', 'en-US': 'Delete callback function before deletion' },
+          'demoId': 'delete'
+        },
         {
           'name': 'closable',
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': { 'zh-CN': '是否可关闭', 'en-US': 'Can be disabled' },
-          'demoId': 'closable'
+          'demoId': 'delete'
         },
         {
           'name': 'color',
@@ -189,7 +197,7 @@ export default {
             'zh-CN': '点击关闭按钮时触发的事件',
             'en-US': 'Event triggered when the close button is clicked'
           },
-          'demoId': 'closable'
+          'demoId': 'delete'
         }
       ],
       'slots': [

packages/vue/src/tag/src/pc.vue

@@ -37,10 +37,7 @@ export default defineComponent({
     ]
 
     const tagElement = (
-      <span
+      <span class={classes} style={{ backgroundColor: color }} onClick={handleClick}>
-        class={classes}
-        style={{ backgroundColor: color, display: state.show ? null : 'none' }}
-        onClick={handleClick}>
         {value ? <span>{value}</span> : slots.default && slots.default()}
         {closable && <icon-close class="tiny-svg-size tiny-tag__close " onClick={handleClose}></icon-close>}
       </span>