更新记录

1.0.0（2025-11-12） 下载此版本

• 自定义model组件

平台兼容性

uni-app(4.56)

zv-modal

自定义model

示例

    <view class="" @click="show=true">示例</view>
    <zv-modal
        v-model:show="show"
        title="这是标题"
        content="这是弹窗内容"
        confirmText="确认"
        cancelText="返回"
        confirmStyle="width: 200rpx;background: #f55;border-radius: 30rpx;color: #fff;margin:0 auto;height:60rpx;line-height:60rpx"
        :showBorder="true"
        :reverse="true"
        @confirm="confirm()"
        @cancel="cancel()"
        @close="close()"
    ></zv-modal>
    <zv-modal v-model:show="show2" title="这是一个标题">
        <view>
            <view>这是内容1</view>
            <view>这是内容2</view>
            <view>这是内容3</view>
        </view>
    </zv-modal>

    show: { type: Boolean, default: false },        // model显示/隐藏
    title: { type: String, default: '' },           // model标题
    content: { type: String, default: '' },         // model内容 内容为空时可以自定义内容
    contentStyle: { type: String, default: '' },    // content自定义样式
    confirmText: { type: String, default: '' },     // content自定义样式
    confirmText:{ type: String, default: '确认',},    //确认按钮显示文字 设置为空时不显示
    cancelText:{ type: String, default: '取消',},     //取消按钮显示文字 设置为空时不显示
    confirmStyle:{ type: String, default: 'color:#1E7BFE',},//确认按钮自定义样式
    cancelStyle:{ type: String, default: 'color:#666',},//取消按钮自定义样式
    reverse:{ type: Boolean, default: false,},      //底部按钮是否颠倒方向
    showMask:{ type: Boolean, default: true,},      //弹窗遮罩层显示/隐藏
    showBorder:{ type: Boolean, default: true,},    //是否显示边框线
    isMask:{ type: Boolean, default: true,},        //是否允许遮罩层点击关闭
    radius:{ type: String, default: '20rpx',},      //圆角
    bgColor:{ type: String, default: '#ffffff',},   //背景色
    zIndex:{ type: String, default: '1000',},       //层级