From f617f42cc798915f33572f5c7a20052d8581cc13 Mon Sep 17 00:00:00 2001
From: wuyiping0628 <42107997+wuyiping0628@users.noreply.github.com>
Date: Wed, 8 Jan 2025 00:00:54 -0800
Subject: [PATCH] feat(alert): [alert] display title when size is large in
 mobile-first (#2765)

* feat(alert): [alert] display title when size is large

* feat(alert): [alert] display title when size is large

* feat(alert): [alert] display title when size is large in mobile-first
---
 examples/sites/demos/apis/alert.js                         | 2 +-
 examples/sites/demos/mobile-first/app/alert/title.vue      | 2 ++
 .../sites/demos/mobile-first/app/alert/webdoc/alert.js     | 2 +-
 examples/sites/demos/pc/app/alert/webdoc/alert.js          | 2 +-
 packages/vue/src/alert/src/mobile-first.vue                | 7 ++++---
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/examples/sites/demos/apis/alert.js b/examples/sites/demos/apis/alert.js
index bbdd03f01b..1014c1d4f0 100644
--- a/examples/sites/demos/apis/alert.js
+++ b/examples/sites/demos/apis/alert.js
@@ -126,7 +126,7 @@ export default {
             'zh-CN': '是否显示标题，在 size 为 large 时有效',
             'en-US': 'Display title,valid when size is large'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'title',
           meta: {
             stable: '3.21.0'
diff --git a/examples/sites/demos/mobile-first/app/alert/title.vue b/examples/sites/demos/mobile-first/app/alert/title.vue
index 9e8b07b374..7c88a15765 100644
--- a/examples/sites/demos/mobile-first/app/alert/title.vue
+++ b/examples/sites/demos/mobile-first/app/alert/title.vue
@@ -5,6 +5,8 @@
     <tiny-alert size="large">
       <template #title>通过 slot 设置自定义 title</template>
     </tiny-alert>
+    <br />
+    <tiny-alert size="large" :show-title="false" description="描写内容"></tiny-alert>
   </div>
 </template>
 
diff --git a/examples/sites/demos/mobile-first/app/alert/webdoc/alert.js b/examples/sites/demos/mobile-first/app/alert/webdoc/alert.js
index f4748515e0..6df256d67a 100644
--- a/examples/sites/demos/mobile-first/app/alert/webdoc/alert.js
+++ b/examples/sites/demos/mobile-first/app/alert/webdoc/alert.js
@@ -36,7 +36,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>当  <code>size</code>为 large 时显示标题，可设置  <code>title</code> 或  <code>slot</code> 自定义标题。默认标题根据设置的 <code>type</code> 显示。</p>',
+          '<p>当  <code>size</code>为 large 时显示标题，可设置  <code>title</code> 或  <code>slot</code> 自定义标题，通过 <code> show-title </code>属性控制标题是否显示。默认标题根据设置的 <code>type</code> 显示。</p>',
         'en-US':
           '<p>When <code>size</code> is set to large, the title is displayed. You can set <code>title</code> or <code>slot</code> to customize the title. The default title is displayed according to the set <code>type</code>.</p>'
       },
diff --git a/examples/sites/demos/pc/app/alert/webdoc/alert.js b/examples/sites/demos/pc/app/alert/webdoc/alert.js
index 5cec406d51..394c18002c 100644
--- a/examples/sites/demos/pc/app/alert/webdoc/alert.js
+++ b/examples/sites/demos/pc/app/alert/webdoc/alert.js
@@ -53,7 +53,7 @@ export default {
         'en-US': 'Custom Title'
       },
       desc: {
-        'zh-CN': `当 <code>size</code> 为 <code>large</code> 时，通过 <code>title </code>属性或 <code>title </code>插槽，可以自定义组件的标题 ，通过 <code> show-title </code>属性 控制标题是否显示<br>
+        'zh-CN': `当 <code>size</code> 为 <code>large</code> 时，通过 <code>title </code>属性或 <code>title </code>插槽，可以自定义组件的标题 ，通过 <code> show-title </code>属性控制标题是否显示<br>
            如果未自定义标题，会根据对应的 <code>type</code> 显示相应的默认标题。`,
         'en-US':
           '<p>When <code>size</code> is set to large, the title is displayed. You can set <code>title</code> or <code>slot</code> to customize the title. <br>The default title is displayed according to the set <code>type</code> . </p>'
diff --git a/packages/vue/src/alert/src/mobile-first.vue b/packages/vue/src/alert/src/mobile-first.vue
index f596fee81b..0f704c471d 100644
--- a/packages/vue/src/alert/src/mobile-first.vue
+++ b/packages/vue/src/alert/src/mobile-first.vue
@@ -34,7 +34,7 @@
       >
         <div
           data-tag="tiny-alert-large"
-          v-if="size === 'large'"
+          v-if="size === 'large' && showTitle"
           @click="handleHeaderClick"
           class="inline-flex cursor-pointer font-medium"
         >
@@ -94,8 +94,8 @@
         class="flex-1 leading-6 text-sm overflow-hidden cursor-pointer"
         :class="[showIcon ? 'ml-2' : '', closable ? 'mr-2' : '']"
       >
-        <div data-tag="tiny-alert-large" v-if="size === 'large'" class="font-medium">
-          <slot name="title">{{ state.getTitle }}</slot>
+        <div data-tag="tiny-alert-large" v-if="size === 'large' && showTitle" class="font-medium">
+          <slot name="title">{{ state.getTitle }} </slot>
         </div>
         <div
           data-tag="tiny-alert-singlelinebox"
@@ -152,6 +152,7 @@ export default defineComponent({
     'closable',
     'center',
     'showIcon',
+    'showTitle',
     'closeText',
     'singleLine',
     'scrolling',