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
opentiny · Jan 8, 2025 · f617f42 · f617f42
1 parent 2e45a76
commit f617f42
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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',