弹框 Dialog

Dialog 弹框

通过按钮或事件触发

基础用法

dialog弹框

这是一个标题

这是内容部分

取消 确认

<template>
    <div>
        <div class="box">
            <mc-btn type="primary" @click="dislogChange">dialog弹框</mc-btn>
        </div>
        <mc-dialog
            title="这是一个弹窗"
            :visible="showDialog"
            width="60%"
            @close="showDialog = false"
        >
            <template v-slot:title>
            <h3>这是一个标题</h3>
            </template>
            <div>这是内容部分</div>
            <template v-slot:footer>
            <mc-btn @click="showDialog = false" plain type="none"
                >取消</mc-btn
            >
            <mc-btn plain type="primary" @click="showDialog = false" >确认</mc-btn>
            </template>
        </mc-dialog>
      </div>
</template>
<script>
export default {
  data() {
    return {
      showDialog: false
    }
  },
  methods: {
    dislogChange() {
      this.showDialog = true;
    }
  }
}
</script>

显示代码 复制代码 复制代码

Attributes

参数	说明	类型	默认值	可选值
visible	弹框可视	Boolean	false	-
title	标题	String	"提示"	-
width	宽度	String	50%	-
top	距离顶部	String	15vh	-
handleClose	传入的关闭方法	Function	-	-