更新记录
2.0.0(2023-12-09)
更新优化组件
1.0.0(2023-06-19)
组件初始化
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.7.0 app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
cc-serviceDialog 自定义服务说明弹窗 自下而上 底部弹窗
使用方法
<!-- 服务组件弹窗 close:关闭事件 class:定义类(显示或隐藏) -->
<cc-serviceDialog @close="closeService" class="hidden" :class="{show:serviceFlag}"></cc-serviceDialog>
HTML代码实现部分
<template>
<view class="content">
<!-- 服务组件弹窗 close:关闭事件 class:定义类(显示或隐藏) -->
<cc-serviceDialog @close="closeService" class="hidden" :class="{show:serviceFlag}"></cc-serviceDialog>
<button @click="showSerivicClick" style="margin-top: 60px; width: 190px;">显示服务说明弹窗</button>
</view>
</template>
<script>
export default {
data() {
return {
serviceFlag: false,
}
},
methods: {
closeService() {
this.serviceFlag = false
},
showSerivicClick() {
this.serviceFlag = true;
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
}
.hidden {
display: none;
}
.show {
display: block;
}
</style>