引入组件

局部引入

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

基础用法

list 属性：新闻列表，每项包含 label（展示文案）与 value（业务标识）

isRolling 属性：是否自动轮播（默认 true）

<f-news :list="list" :is-rolling="false"></f-news>

const list = [
  { value: 1, label: '致力发展负责任的人工智能 中国发布八大治理原则' },
  { value: 2, label: '格兰仕暗示拜访拼多多后遭天猫打压，拼多多高层赞其有勇气' },
  { value: 3, label: '阿里计划将每股普通股拆为8股，增加筹资灵活性' }
]

自定义样式

bgColor、width、radius、padding 等属性可自定义外观

<f-news class="mx-auto" :list="list" bg-color="#FFF8D5" width="680rpx" radius="32rpx" padding="0 24rpx"></f-news>

自定义前缀图标

prefix 插槽：新闻栏左侧内容

<f-news class="mx-auto" :list="list" bg-color="#FFF8D5" width="680rpx" radius="32rpx" padding="0 24rpx">
  <template #prefix>
    <tui-icon name="news-fill" :size="48" unit="rpx" color="#f54f46"></tui-icon>
  </template>
</f-news>

滚动方向

rollingDirection 属性：轮播方向（默认 vertical）

• vertical：纵向切换
• horizontal：横向切换

<f-news :list="list" text-color="#FF7900" bg-color="#FFF8D5" rolling-direction="horizontal">
  <template #prefix>
    <tui-icon name="news-fill" :size="48" unit="rpx" color="#f54f46"></tui-icon>
  </template>
</f-news>

插槽

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

属性

名称	类型	说明	默认值
list	{ label: string; value: string | number }[]	新闻列表	-
bgColor	string	背景颜色	#FFFFFF
padding	string	内边距	0rpx
width	string	宽度	100%
height	string	内容区高度	72rpx
radius	string	圆角	0rpx
textSize	string	文字大小	28rpx
textColor	string	文字颜色	#0b1d4a
textBold	boolean	文字是否加粗	false
isRolling	boolean	是否自动轮播	true
rollingInterval	number	轮播间隔，单位 ms	3000
rollingDirection	horizontal / vertical	轮播方向：vertical 纵向；horizontal 横向	vertical

事件

事件名	说明	回调参数
click	点击某条新闻时触发	{ value: string | number; index: number }

方法

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