对话框

效果

属性 :visible.sync="visible" 绑定一个boolean值，用于控制对话框遮罩关闭和关闭按钮的点击

代码预览

<template>
    <div class="dialogTop">
        <jul-button type="primary" @click="visible = true">打开对话框</jul-button>
        <!-- 控制对话框 -->
        <jul-dialog width="60%" top="20px" :visible.sync="visible">
          <!-- 具名插槽控制标题 模板替换插槽内容 不写默认插槽内容 -->
          <template v-slot:title>
              温馨提示
          </template>
          <!-- 默认插槽控制内容 -->
          这里是内容区域
          <!-- 具名插槽控制底部 -->
          <template v-slot:footer>
            <jul-button type="primary" @click="visible = false">确定</jul-button>
            <jul-button @click="visible = false">取消</jul-button>
          </template>
        </jul-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            visible: false
        }
    }
}
</script>

<style lang="scss">
    .dialogTop {
        margin-top: 10px;
    }
</style>