更新记录
1.0(2023-02-23)
1.0
---发布内容
-------showModel.vue(支持自定义html、支持倒计时自动确认、自定义按钮文字,文字颜色、显示区域背景颜色)
(目前仅在微信小程序上测试,其他端未测试)
平台兼容性
HbuilderX/cli最低兼容版本 |
3.3.10 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
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 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
showModel
1、在需要引用的的页面 js部分
<script>
import showModel from '@/compentents/showModel-custom/showModel-custom.vue';// 引用
export default {
components:{ showModel }, // 注册
data(){
return{
show_model: false, // 控制弹窗出现
modelConfig: {
title:'提 示',
tipContent: '访客身份仅能浏览10条商机信息,是否去注册?',
background: '#FFFFFF',
showCancel: false,
cancelText: '取 消',
cancelColor: '#000000',
confirmText: '确 定',
confirmColor: '#007aff',
showCountDown: true, // 是否倒计时 自动确认
countDown: 5, // 倒计时自动触发确认
soltHas:false // 是否自定义 html
}
}
},
methods: {
modelSuccess(){ // 点击确认按钮
// 点击确认 do something
},
modelCancel(){ // 点击取消按钮
// 点击取消 do something
}
}
}
</script>
2、需要使用页面html部分
<showModel v-if="show_model" :modelConfig="modelConfig" @success="modelSuccess" @cancel="modelCancel">
<template slot="slotContent">
<!-- 自定义 html内容 -->
<view class="">
6666666
</view>
</template>
</showModel>
3、配置 modelConfig 参数
modelConfig----Object---对象包含配置参数
|___title-----------String-----非必填。默认'提示'
|___tipContent------String-----非必填。默认'缺少弹框提示内容'
|___background------String-----非必填。默认'#FFFFFF'
|___showCancel------Booleans---非必填。默认'false'
|___cancelText------String-----非必填。默认'取 消'
|___cancelColor-----String-----非必填。默认'#000000'
|___confirmText-----String-----非必填。默认'确 定'
|___confirmColor----String-----非必填。默认'#007aff'
|___showCountDown---Booleans---非必填。默认'false'
|___countDown-------Number-----非必填。无默认值
|___soltHas---------Booleans---非必填。默认'false'