更新记录

1.0.0（2021-08-26）

1.0.0第一次发布

平台兼容性

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

<template>
    <view class="container">
        <view class="cont">
            <view @click="openPop(1)">自定义标题</view>
        </view>
        <view class="cont">
            <view @click="openPop(2)">自定义小标题</view>
        </view>
        <view class="cont">
            <view @click="openPop(3)">自定义标题大小</view>
        </view>
        <view class="cont">
            <view @click="openPop(4)">自定义按钮文字</view>
        </view>
        <view class="cont">
            <view @click="openPop(5)">自定义按钮颜色</view>
        </view>
        <view class="cont">
            <view @click="openPop(6)">自定义点击左侧按钮事件</view>
        </view>
        <xzw-centerPopup ref="centerPopup" :title="title" :subTitle="subTitle" @confirmClick="confirmClick" :fontSize="fontSize" :color="color" :leftText="leftText" :rightText="rightText"/>
        <xzw-centerPopup ref="centerPopup2" :default="false" @leftClick="leftClick" @confirmClick="confirmClick"/>
    </view>
</template>

    export default {
        data() {
            return {
                title: '',//标题
                subTitle:'',//小标题
                fontSize:'',//标题大小
                color:'',//弹窗颜色
                leftText:'取消',//左侧文字
                rightText:'确定'//右侧文字
            }
        },
        methods: {
            openPop(type){
                this.type=type
                this.subTitle=""
                this.color="#f00"
                this.fontSize="32upx"
                if(type==1){
                    this.title="确定删除吗?"
                }else if(type==2){
                    this.title="确定注销账号?"
                    this.subTitle="注销后将不可恢复!"
                }else if(this.type==3){
                    this.title="这是20upx"
                    this.fontSize="20upx"
                }else if(this.type==4){
                    this.title="登录过期"
                    this.leftText="返回"
                    this.rightText="重新登录"
                }else if(this.type==5){
                    this.title="变成黑色按钮"
                    this.color="#000"
                }else{
                    this.title="自定义点击左侧按钮事件"
                    this.$refs.centerPopup2.open()
                }
                if(type<6){
                    this.$refs.centerPopup.open()
                }
            },
            confirmClick(){
                this.$refs.centerPopup.close()
                this.$refs.centerPopup2.close()
                uni.showToast({
                    title: '成功!'
                })
            },
            leftClick(){
                this.$refs.centerPopup2.close()
                uni.showToast({
                    title: '点击左侧按钮!'
                })
            }
        }
    }

API

Tag Props

Tag Events