feat(popconfirm): [popconfirm] enable message slot (#3176)

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: '',

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>

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('这是气泡确认框自定义提示内容文本描述。')
+})

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>

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: {

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">