更新记录
1.0.8(2020-03-28)
下载此版本
无
1.0.7(2020-01-17)
下载此版本
修复自动关闭异常Bug
1.0.6(2020-01-14)
下载此版本
更新自定义位置 上下左右 位置
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
× |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
Popup 弹出层
组件名:open-alert,代码块: openAlert。
使用方式
在 main.js 中引用组件
import openAlert from '@/components/open-alert/open-alert';
Vue.component('openAlert', openAlert);
在 template 中使用组件
<view class="open-view" @tap="open(0, 'center')">淡入</view>
<openAlert ref="openAlert" :AlertClass="AlertClass" :AlertPosition="AlertPosition">
<view>自定义内容</view>
</openAlert>
export default {
data() {
return {
AlertClass: 0,
AlertPosition: '',
};
},
methods: {
open(Class, Position) {
this.$nextTick(function() {
this.AlertClass = Class;
this.AlertPosition = Position;
this.$nextTick(function() {
this.$refs.openAlert.Show();
});
});
}
}
};
属性说明
属性名 |
类型 |
默认值 |
说明 |
AlertPosition |
String |
center |
自定义内容显示位置(top, center, bottom) |
AlertClass |
Number |
0 |
动画类型 (17种动画类型 任意选择) |
IsBgShow |
Boolean |
true |
是否显示背景 |
BgColor |
String |
rgba(0, 0, 0, 0.2) |
自定义背景颜色(rgba格式) |
closeBtn |
Boolean |
false |
关闭按钮 |
shadeClose |
Boolean |
true |
是否点击遮罩关闭 |
time |
Number |
0 |
自动关闭所需毫秒 (不能小于1000毫秒) |
isOutAnim |
Boolean |
true |
是否显示关闭动画 |
CustomPosition |
Object |
{} |
自定义位置 (上,下,左,右 距离) |
方法说明
通过 ref 获取组件调用方法
方法称名 |
说明 |
Show |
打开弹出层 |
Close |
关闭弹出层 |