NoticeBar 通知栏

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

重要通知，重要通知

import { DuNoticeBar } from 'dangoui'

示例

各种类型

<template>
  <PreviewBlock title="简单">
    <div class="w-full">
      <DuNoticeBar text="购买后会暂存商家寄存柜" />
    </div>
  </PreviewBlock>
  <PreviewBlock title="带左侧图标">
    <div class="w-full">
      <DuNoticeBar text="购买后会暂存商家寄存柜" icon="info_circle_filled" />
    </div>
  </PreviewBlock>
  <PreviewBlock title="带链接">
    <div class="w-full">
      <DuNoticeBar
        text="购买后会暂存商家寄存柜"
        link-text="如何发货"
        link-icon="question-circle-filled"
        @link-click="handleLinkClick"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="只带链接">
    <div class="w-full">
      <DuNoticeBar
        link-text="打开通知权限，及时获取下单通知"
        link-icon="remind"
        @link-click="handleLinkClick"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="可关闭">
    <div class="w-full">
      <DuNoticeBar
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
        closeable
        @close="handleClose"
        @link-click="handleLinkClick"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="显示省略号">
    <div class="w-full">
      <DuNoticeBar
        text="请注意，购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
        closeable
        @close="handleClose"
        @link-click="handleLinkClick"
        ellipsis
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="垂直">
    <div class="w-full">
      <DuNoticeBar
        text="该商品属于个人卖家，请警惕诈骗风险；平台禁止一切虚拟商品，一经发现平台有权下架追责，欢迎玩家监督举报"
        link-text="如何发货"
        link-icon="question-circle-filled"
        layout="vertical"
        closeable
        @close="handleClose"
        @link-click="handleLinkClick"
      />
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuNoticeBar } from 'dangoui'

function handleClose() {
  console.log('[demo] close')
}

function handleLinkClick() {
  console.log('[demo] link click')
}
</script>

不同颜色/主题

<template>
  <PreviewBlock title="主色调">
    <div class="flex-auto">
      <DuNoticeBar
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="secondary">
    <div class="flex-auto">
      <DuNoticeBar
        color="secondary"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="默认">
    <div class="flex-auto">
      <DuNoticeBar
        color="default"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="成功">
    <div class="flex-auto">
      <DuNoticeBar
        color="success"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="警告">
    <div class="flex-auto">
      <DuNoticeBar
        color="warning"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="失败">
    <div class="flex-auto">
      <DuNoticeBar
        color="error"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="white">
    <div class="flex-auto flex flex-wrap gap-x-8px gap-y-16px bg-black p-8px rounded-8px">
      <DuNoticeBar
        color="white"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="主色调/primary">
    <div class="flex-auto">
      <DuNoticeBar
        type="primary"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="secondary/primary">
    <div class="flex-auto">
      <DuNoticeBar
        type="primary"
        color="secondary"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="默认/primary">
    <div class="flex-auto">
      <DuNoticeBar
        type="primary"
        color="default"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="成功/primary">
    <div class="flex-auto">
      <DuNoticeBar
        type="primary"
        color="success"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="警告/primary">
    <div class="flex-auto">
      <DuNoticeBar
        type="primary"
        color="warning"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="失败/primary">
    <div class="flex-auto">
      <DuNoticeBar
        type="primary"
        color="error"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="white/primary">
    <div class="flex-auto flex flex-wrap gap-x-8px gap-y-16px bg-black p-8px rounded-8px">
      <DuNoticeBar
        type="primary"
        color="white"
        text="购买后暂存商家寄存柜，可累计发货省运费"
        link-text="如何发货"
        link-icon="question-circle-filled"
      />
    </div>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuNoticeBar } from 'dangoui'
</script>

API

属性

属性名	类型	默认值	说明
type	`"primary" \| "secondary"`	`"secondary"`	类型
color	`string`	`"primary"`	色彩，可以使用色板中的颜色名
text	`string`	`""`	提示文案
layout	`"horizontal" \| "vertical"`	`"horizontal"`	文案与链接的布局关系
link-text	`string`	`""`	链接文案
link-icon	`string`	`""`	链接图标
closeable	`boolean`	`false`	是否可关闭
ellipsis	`boolean`	`false`	超长是否截断显示省略号
icon	`string`	-	左边的按钮

事件

名称	类型
close	`(event: "close"): void`
link-click	`(event: "link-click"): void`