uni-app自定义弹窗uniPop.vue模板|uniapp仿微信弹窗/仿ios弹窗效果|msg信息框|alert对话框|loading提示框
uniPop支持多种动画效果、可供选择类型ios/android、可以自定义弹窗内容样式/自定义多按钮及事件/弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭
以下两种方式均可引入uniPop弹窗组件:
1、在main.js里引入全局组件
import uniPop from './components/uniPop/uniPop.vue'
Vue.component('uni-pop', uniPop)
2、在相应页面引入组件
<template>
<view class="container">
...
<!-- 弹窗模板 -->
<uni-pop ref="uniPop"></uni-pop>
</view>
</template>
<script>
import uniPop from './components/uniPop/uniPop.vue'
export default {
data() {
return {
...
}
},
components:{
uniPop
},
...
}
</script>
alert对话框效果
let uniPop = this.$refs.uniPop
uniPop.show({
title: '提示',
content: '询问框 (弹窗内容,用于告知当前状态、提示信息和解决方法,描述文字/文案尽量控制在三行内)',
shadeClose: false,
anim: 'fadeIn',
btns: [
{
text: '取消',
onTap() {
console.log('您点击了取消!');
uniPop.close();
}
},
{
text: '确定',
style: 'color: #41a863',
onTap() {
console.log('您点击了确定!');
}
}
]
})
Toast加载层效果 - 支持loading/success/info/error四种图标
this.$refs.uniPop.show({
skin: 'toast',
content: 'loading',
icon: 'loading', //success | info | error | loading
shade: false,
time: 3
})
/**
* @tpl uni-app自定义弹窗组件 - uniPop.vue
* @author andy by 2019-09-20
* @about Q:282310962 wx:xy190310
*/
<template>
<view v-if="opts.isVisible" class="uniPop" :class="opts.isCloseCls">
<view class="unipop__ui_panel">
<view v-if="opts.shade" class="unipop__ui_mask" @tap="shadeTaped"></view>
<view class="unipop__ui_main">
<view class="unipop__ui_child" :style="opts.style">
<!-- 标题 -->
<view v-if="opts.title" class="unipop__ui_tit">{{opts.title}}</view>
<!-- 内容 -->
<view v-if="opts.content" class="unipop__ui_cnt" :style="opts.contentStyle">
{{opts.content}}
</view>
<view v-if="opts.btns" class="unipop__ui_btns">
<text v-for="(item,index) in opts.btns" :key="index" class="btn" :style="item.style" @tap="btnTaped(item)">{{item.text}}</text>
</view>
</view>
<!-- xclose -->
<view v-if="opts.xclose" class="unipop__xclose" @tap="close"></view>
</view>
</view>
</view>
</template>
data() {
return {
defaultOptions: {
isVisible: false, //是否显示弹窗
title: '', //标题
content: '', //内容
contentStyle: '', //内容样式
style: null, //自定义弹窗样式
skin: '', //弹窗风格
icon: '', //弹窗图标
xclose: false, //自定义关闭按钮
shade: true, //遮罩层
shadeClose: true, //点击遮罩关闭
opacity: '', //遮罩透明度
time: 0, //自动关闭秒数
end: null, //销毁弹窗回调函数
anim: 'scaleIn', //弹窗动画 scaleIn(默认) | fadeIn | shake | top | right | bottom | left
position: '', //弹窗位置 top | right | bottom | left
btns: null, //弹窗按钮
},
opts: {},
timer: null
}
},
methods: {
// 显示弹窗事件(处理传参)
show(args) {
this.opts = Object.assign({}, this.defaultOptions, args, {isVisible: true})
// console.log(this.opts)
// 自动关闭
if(this.opts.time) {
this.timer = setTimeout(() => {
this.close()
}, this.opts.time * 1000)
}
},
...
}
好了,今天的uniapp弹窗组件分享就到这里,希望能喜欢😀😀~~
◆ 最后附上uniApp自定义导航实现
uniapp自定义顶部导航栏:https://cloud.tencent.com/developer/article/1508009
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。