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

* feat(alert): [alert] display title when size is large * feat(alert): [alert] display title when size is large
opentiny · Jan 7, 2025 · 929e136 · 929e136
1 parent 6205193
commit 929e136
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 7 deletions.
diff --git a/examples/sites/demos/apis/alert.js b/examples/sites/demos/apis/alert.js
@@ -118,6 +118,20 @@ export default {
           pcDemo: 'show-icon',
           mfDemo: ''
         },
+        {
+          name: 'show-title',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示标题，在 size 为 large 时有效',
+            'en-US': 'Display title,valid when size is large'
+          },
+          mode: ['pc'],
+          pcDemo: 'title',
+          meta: {
+            stable: '3.21.0'
+          }
+        },
         {
           name: 'single-line',
           type: 'String',

diff --git a/examples/sites/demos/pc/app/alert/title-composition-api.vue b/examples/sites/demos/pc/app/alert/title-composition-api.vue
@@ -6,7 +6,7 @@
       <template #title>通过 slot 设置自定义 title</template>
     </tiny-alert>
     <br />
-    <tiny-alert size="large" description="描述内容"></tiny-alert>
+    <tiny-alert size="large" :show-title="false" description="描述内容"></tiny-alert>
     <br />
     <tiny-alert size="large" type="success" description="描述内容"></tiny-alert>
     <br />

diff --git a/examples/sites/demos/pc/app/alert/title.spec.ts b/examples/sites/demos/pc/app/alert/title.spec.ts
@@ -9,4 +9,7 @@ test('测试 Alert 自定义标题', async ({ page }) => {
   const title = alert.locator('.tiny-alert__title')
   await expect(title).toHaveCount(1)
   await expect(title).toHaveText('通过属性设置自定义 title')
+
+  const alert1 = page.locator('.tiny-alert--large').nth(2)
+  await expect(alert1).not.toHaveText('消息')
 })
diff --git a/examples/sites/demos/pc/app/alert/title.vue b/examples/sites/demos/pc/app/alert/title.vue
@@ -6,7 +6,7 @@
       <template #title>通过 slot 设置自定义 title</template>
     </tiny-alert>
     <br />
-    <tiny-alert size="large" description="描述内容"></tiny-alert>
+    <tiny-alert size="large" :show-title="false" description="描述内容"></tiny-alert>
     <br />
     <tiny-alert size="large" type="success" description="描述内容"></tiny-alert>
     <br />

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>插槽，可以自定义组件的标题。<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/theme/src/alert/index.less b/packages/theme/src/alert/index.less
@@ -54,6 +54,8 @@
       font-size: var(--tv-Alert-desc-font-size);
       font-weight: var(--tv-Alert-desc-font-weight);
       color: var(--tv-Alert-desc-text-color);
+      // 由于close-icon是abs， 需要给出安全边距防止重叠
+      margin-right: calc(var(--tv-Alert-close-icon-font-size) + var(--tv-Alert-close-icon-right) + 16px);
     }
 
     .@{alert-prefix-cls}__opration {

diff --git a/packages/vue/src/alert/src/index.ts b/packages/vue/src/alert/src/index.ts
@@ -85,6 +85,10 @@ export const alertProps = {
     type: Boolean,
     default: false
   },
+  showTitle: {
+    type: Boolean,
+    default: true
+  },
   target: {
     type: String,
     default: ''

diff --git a/packages/vue/src/alert/src/pc.vue b/packages/vue/src/alert/src/pc.vue
@@ -17,10 +17,8 @@
     >
       <component v-if="showIcon" :is="state.getIcon" class="tiny-svg-size tiny-alert__icon" />
       <div class="tiny-alert__content" :class="{ 'close-hidden': !closable }">
-        <div v-if="size === 'large'" class="tiny-alert__title">
-          <slot name="title">
-            {{ state.getTitle }}
-          </slot>
+        <div v-if="size === 'large' && showTitle" class="tiny-alert__title">
+          <slot name="title"> {{ state.getTitle }}</slot>
         </div>
         <div
           :class="[
@@ -67,6 +65,7 @@ export default defineComponent({
     'closable',
     'center',
     'showIcon',
+    'showTitle',
     'closeText',
     'customClass'
   ],