引入组件

局部引入

// parent.vue
const FNotice = defineAsyncComponent(() => import('@/components/formaui/f-notice/f-notice.vue'))

基础用法

isScroll 属性：是否开启横向滚动（默认 false，超出单行省略）

<f-notice :content="content" is-scroll></f-notice>

const content = 'formaUI：一款基于Vue3 + TypeScript的uniapp移动端组件库！'

单行省略（不滚动）

<f-notice :content="content"></f-notice>

自定义前缀图标

prefix 插槽：通知栏左侧内容

<f-notice :content="content" is-scroll>
  <template #prefix>
    <tui-icon name="news-fill" :size="48" unit="rpx" color="#f54f46"></tui-icon>
  </template>
</f-notice>

滚动模式

scrollMode 属性：滚动动画模式（默认 backwards）

• backwards：从容器右侧开始滚动
• forwards：从容器左侧开始滚动

<f-notice :content="content" is-scroll scroll-mode="forwards"></f-notice>

自定义样式

bgColor、textColor、textSize、height 等属性可自定义外观

<f-notice
  :content="content"
  is-scroll
  bg-color="#F5F7FA"
  text-color="#16479D"
  text-size="30rpx"
  height="80rpx"
  padding="0 24rpx"
  text-bold></f-notice>

插槽

名称	说明
prefix	左侧前缀区域
suffix	右侧后缀区域

属性

名称	类型	说明	默认值
content	string	通知内容	-
isScroll	boolean	是否开启横向滚动动画	false
scrollSpeed	number	滚动速度，单位 px/s（越大越快）	100
scrollMode	backwards / forwards	滚动模式：backwards 从右侧开始；forwards 从左侧开始	backwards
bgColor	string	背景颜色	#FFF8D5
padding	string	内边距	0rpx
height	string	内容区高度	72rpx
textSize	string	文字大小	28rpx
textColor	string	文字颜色	主题 warning
textBold	boolean	文字是否加粗	false

事件

事件名	说明	回调参数
click	点击通知栏时触发	-

方法

方法名	说明	传入参数
-	-	-