更新记录
1.0.0(2024-07-24) 下载此版本
初版完成,功能上传
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | × | × | × | × | × |
页面通知飘浮插件
此插件为通知提示飘浮插件,将一个通知类的元素组件在屏幕中飘浮而过,具体效果可查看效果图
兼容app端、小程序端等...
- 传参使用
参数名 | 类型 | 默认 | 说明 |
---|---|---|---|
mode | String.Enum | left | 通知的展示形式,枚举值有【'left','right'】,分别代表通知悬浮窗从左边向右边展示,和右向左展示 |
beforText | String | 欢迎 | 通知内容的前段的文字 |
afterText | String | 加入直播间 | 通知内容的中间的文字 |
userName | String | 用户 | 通知内容的后段的文字 |
isConnect | Boolean | false | 是否支持多个通知衔接滚动播放 |
isImmediatelyEnd | Boolean | false | 当通知在滚动时,是否立即结束动画,然后开启下一个通知 |
-
内部方法:start()
fei-nocice-enter-item内部有start()方法,通过this.$refs去调用即可。(具体可查看完整示例的代码)
-
完整示例
<template> <view > <button @click="rightTo">右往左停留模式</button> <button @click="leftTo" style="margin-bottom:30px;">左往右飘过模式</button> <fei-nocice-enter-item ref="noticeRef" :mode="mode" :isConnect="isConnect" :isImmediatelyEnd="isImmediatelyEnd"></fei-nocice-enter-item> </view> </template> <script> export default { data() { return { mode:"", isConnect:false,//是否支持多个通知衔接滚动播放 isImmediatelyEnd:true,//当通知在滚动时,是否立即结束动画,然后开启下一个通知 } }, methods: { rightTo(){ this.mode="right"; this.start(); }, leftTo(){ this.mode="left"; this.start(); }, start(){ this.$refs.noticeRef.start(); } } } </script>