更新记录

1.0.0(2024-12-06) 下载此版本

  • 初始版本发布
  • 支持多种主题类型
  • 支持滚动和非滚动模式
  • 支持自定义样式
  • 支持事件监听

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

通知栏 Notice Bar

一个功能强大的通知栏组件,支持滚动效果、多种主题、自定义样式等特性。

平台兼容性

  • Vue2 ✅
  • Vue3 ✅
  • H5 ✅
  • 小程序 ✅
  • APP ✅

依赖说明

本组件依赖以下组件:

  • uni-icons:用于显示左侧图标和关闭按钮

    请在插件市场搜索并安装 uni-icons 组件,或直接导入项目下的 uni-icons 组件。

基础用法

在页面中引入组件:

vue
<template>
    <wht-notice-bar text="这是一条通知消息"></wht-notice-bar>
</template>
<script>
import WhtNoticeBar from '@/components/wht-notice-bar/wht-notice-bar.vue'
export default {
    components: {
        WhtNoticeBar
    }
}
</script>

属性

属性名 类型 默认值 说明
text String '' 通知文本内容
type String 'warning' 主题类型
bgColor String '' 背景颜色
color String '' 文字颜色
showIcon Boolean true 是否显示左侧图标
showClose Boolean false 是否显示右侧关闭按钮
speed Number 100 滚动速度,单位px/s
single Boolean true 是否单行显示
rows Number 2 多行显示时的行数
radius Number 12 圆角大小,单位rpx
scrollable Boolean true 是否开启滚动

事件

事件名 说明
click 点击通知内容触发
close 点击关闭按钮触发

示例

<wht-notice-bar
    text="这是一条通知消息"
    type="success"
    :showClose="true"
    @click="handleClick"
    @close="handleClose">
</wht-notice-bar>

贡献

欢迎提交问题和贡献代码。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问