更新记录
0.9(2023-10-11) 下载此版本
初次发布
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
示例如下
<template>
<view class="main">
<button @click="click()">弹出模态框</button>
<!-- 默认方法 -->
<cModal :show="modalShow" title="标题" confirmText="确认" @confirm="confirm()" @cancel="cancel()"
content="这是一串神奇的文字">
</cModal>
<!-- 自定义插槽写法 -->
<cModal :show="modalShow" title="修改昵称" confirmText="保存" @cancel="cancel()" @cancel="cancel()">
<view slot="content">
<u--input placeholder="请输入昵称"></u--input>
</view>
</cModal>
</view>
</template>
<script>
import cModal from "@/uni_modules/c-modal/c-modal.vue";
export default {
components: {
cModal
},
data() {
return {
modalShow: false,
},
methods: {
click() {
console.log('弹出模态框');
this.modalShow = true;
},
confirm() {
console.log('点击确定');
this.modalShow = false;
},
cancel() {
console.log('点击取消,或点击遮罩层');
this.modalShow = false;
}
}
}
</script>