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

Author: wuyiping0628

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'

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>
 

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

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

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