更新记录
1.0(2020-04-07)
下载此版本
新增从四个方向弹出,分别是
从左到右 bounceInLeft
从右到左 bounceInRight
从上到下 bounceInDown
从下到上 bounceInUp
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
使用方式
在 script
中引用组件
import uniLocker from '@/components/uni-locker/uni-locker.vue';
export default {
components: { uniLocker },
}
在 template
中使用组件
<uniLocker :isshow="isShow" classname="bounceInLeft" title="菜单" :lockermenu="lockerMenu" @close="close" ></uniLocker>
属性说明
属性名 |
类型 |
必填 |
默认值 |
说明 |
classname |
String |
是 |
bounceInLeft |
抽屉的弹出方向 |
isshow |
Boolean |
是 |
false |
刚进入页面时是否显示 |
title |
String |
否 |
功能列表 |
抽屉的标题 |
lockermenu |
Array |
否 |
[] |
菜单列表 |
事件说明
事件名 |
说明 |
返回值 |
@close |
点击关闭按钮时关闭弹窗 |
无返回值 |
备注
本插件是基于animate动画的,如果想要其他动画可以进入css动画官网
https://daneden.github.io/animate.css/
查看demo然后替换class
名称即可