From 1dfdc4e1a4cfffbfa2f10222ea9bb1c6332fc515 Mon Sep 17 00:00:00 2001
From: betavs <34408516+betavs@users.noreply.github.com>
Date: Sat, 12 Apr 2025 09:44:11 +0800
Subject: [PATCH] feat(popconfirm): [popconfirm] enable message slot (#3176)

---
 examples/sites/demos/apis/popconfirm.js       | 17 ++++++++++-
 .../slot-message-composition-api.vue          | 22 ++++++++++++++
 .../pc/app/popconfirm/slot-message.spec.ts    | 11 +++++++
 .../demos/pc/app/popconfirm/slot-message.vue  | 30 +++++++++++++++++++
 .../pc/app/popconfirm/webdoc/popconfirm.js    | 12 ++++++++
 packages/vue/src/popconfirm/src/pc.vue        |  4 ++-
 6 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/popconfirm/slot-message-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/popconfirm/slot-message.spec.ts
 create mode 100644 examples/sites/demos/pc/app/popconfirm/slot-message.vue

diff --git a/examples/sites/demos/apis/popconfirm.js b/examples/sites/demos/apis/popconfirm.js
index bd5376c8f..7658a81de 100644
--- a/examples/sites/demos/apis/popconfirm.js
+++ b/examples/sites/demos/apis/popconfirm.js
@@ -162,12 +162,27 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '底部插槽',
-            'en-US': 'default slot'
+            'en-US': 'footer slot'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'slot-footer',
           mfDemo: ''
         },
+        {
+          name: 'message',
+          type: '',
+          defaultValue: '',
+          meta: {
+            stable: '3.22.2'
+          },
+          desc: {
+            'zh-CN': '信息插槽',
+            'en-US': 'message slot'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'slot-message',
+          mfDemo: ''
+        },
         {
           name: 'reference',
           type: '',
diff --git a/examples/sites/demos/pc/app/popconfirm/slot-message-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/slot-message-composition-api.vue
new file mode 100644
index 000000000..2baf6d070
--- /dev/null
+++ b/examples/sites/demos/pc/app/popconfirm/slot-message-composition-api.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-popconfirm :title="title" :message="message" ref="popconfirmRef">
+      <template #reference>
+        <tiny-button>悬浮我提示</tiny-button>
+      </template>
+      <template #message>
+        <p>{{ customMessage }}</p>
+      </template>
+    </tiny-popconfirm>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
+
+const title = ref('这是气泡标题')
+const message = ref('这是气泡确认框提示内容文本描述。')
+const customMessage = ref('这是气泡确认框自定义提示内容文本描述。')
+const popconfirmRef = ref()
+</script>
diff --git a/examples/sites/demos/pc/app/popconfirm/slot-message.spec.ts b/examples/sites/demos/pc/app/popconfirm/slot-message.spec.ts
new file mode 100644
index 000000000..6c2580d22
--- /dev/null
+++ b/examples/sites/demos/pc/app/popconfirm/slot-message.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义消息内容', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('popconfirm#slot-message')
+
+  const demo = page.locator('#slot-message')
+  const popconfirm = demo.locator('.tiny-popconfirm')
+
+  await expect(popconfirm).toContainText('这是气泡确认框自定义提示内容文本描述。')
+})
diff --git a/examples/sites/demos/pc/app/popconfirm/slot-message.vue b/examples/sites/demos/pc/app/popconfirm/slot-message.vue
new file mode 100644
index 000000000..fbdab2048
--- /dev/null
+++ b/examples/sites/demos/pc/app/popconfirm/slot-message.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <tiny-popconfirm :title="title" :message="message" ref="popconfirm">
+      <template #reference>
+        <tiny-button>悬浮我提示</tiny-button>
+      </template>
+      <template #message>
+        <p>{{ customMessage }}</p>
+      </template>
+    </tiny-popconfirm>
+  </div>
+</template>
+
+<script>
+import { TinyPopconfirm, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyPopconfirm,
+    TinyButton
+  },
+  data() {
+    return {
+      title: '这是气泡标题',
+      message: '这是气泡确认框提示内容文本描述。',
+      customMessage: '这是气泡确认框自定义提示内容文本描述。'
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/popconfirm/webdoc/popconfirm.js b/examples/sites/demos/pc/app/popconfirm/webdoc/popconfirm.js
index acb2efe91..50815aee6 100644
--- a/examples/sites/demos/pc/app/popconfirm/webdoc/popconfirm.js
+++ b/examples/sites/demos/pc/app/popconfirm/webdoc/popconfirm.js
@@ -78,6 +78,18 @@ export default {
       },
       codeFiles: ['slot-footer.vue']
     },
+    {
+      demoId: 'slot-message',
+      name: {
+        'zh-CN': '消息插槽',
+        'en-US': 'Message slot'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>message</code> 插槽自定义消息内容。</p>',
+        'en-US': '<p>Customize the message content through the<code>message</code>slot.</p>'
+      },
+      codeFiles: ['slot-message.vue']
+    },
     {
       demoId: 'width',
       name: {
diff --git a/packages/vue/src/popconfirm/src/pc.vue b/packages/vue/src/popconfirm/src/pc.vue
index f256d6e58..abf250c3b 100644
--- a/packages/vue/src/popconfirm/src/pc.vue
+++ b/packages/vue/src/popconfirm/src/pc.vue
@@ -27,7 +27,9 @@
             </div>
           </div>
           <div class="tiny-popconfirm-popover__content">
-            {{ message }}
+            <slot name="message">
+              {{ message }}
+            </slot>
           </div>
           <div class="tiny-popconfirm-popover__footer">
             <slot name="footer">