Viog UI

对话框 dialog 待优化 待新增

简单的对话框

使用说明

简单引入

你需要通过v-model命令向对话框绑定一个boolean控制变量

展开代码
<vi-dialog v-model="open">这是一个对话框</vi-dialog>
<vi-button @click="open = true">打开对话框</vi-button>

对话框标题

通过title属性向对话框绑定标题

展开代码
<vi-dialog v-model="open2" title="标题">这是一个对话框</vi-dialog>
<vi-button @click="open2 = true">打开对话框</vi-button>

确认、取消与关闭按钮

通过no-sure、no-unsure与no-shutdown控制确认、取消与关闭按钮是否显示

展开代码
<vi-dialog v-model="open3" title="标题" no-unsure no-shutdown>这是一个对话框</vi-dialog>
<vi-button @click="open3 = true">打开对话框</vi-button>

通过修改sureTitle、unsureTitle更改确认取消文本

展开代码
<vi-dialog v-model="open7" title="标题" sure-title="是" unsure-title="否">是否确认</vi-dialog>
<vi-button @click="open7 = true">打开对话框</vi-button>

你也可以通过插槽sure unsure shutdown直接改变样式

展开代码
<vi-dialog v-model="open8" title="标题">
    这是一个对话框
    <template v-slot:sure>
        <vi-button color="green">确认</vi-button>
    </template>
    <template v-slot:unsure>
        <vi-button color="green" type="plain">取消</vi-button>
    </template>
    <template v-slot:shutdown>
        <vi-button color="red">x</vi-button>
    </template>
</vi-dialog>
<vi-button @click="open8 = true">打开对话框</vi-button>

暗色对话框

通过dark将对话框变为暗色系

展开代码
<vi-dialog v-model="open4" title="标题" dark>这是一个对话框</vi-dialog>
<vi-button @click="open4 = true">打开对话框</vi-button>

对话框样式

你也可以通过修改css变量，直接全局更改所有的字体、背景颜色，例如：

.vi-dialog {
    --vi-dialog-color: var(--vi-purple-color3);
    --vi-dialog-background-color: var(--vi-font-color);
    --vi-dialog-title-color: var(--vi-purple-color1);
}

遮罩色

通过maskColor属性，修改遮罩色

展开代码
<vi-dialog v-model="open11" title="标题" mask-color="white" dark>这是一个对话框</vi-dialog>
<vi-button @click="open11 = true">打开对话框</vi-button>

遮罩模糊

通过blur属性，模糊遮罩层

展开代码
<vi-dialog v-model="open6" title="标题" blur>这是一个对话框</vi-dialog>
<vi-button @click="open6 = true">打开对话框</vi-button>

关闭遮罩

通过属性noMask关闭遮罩层

展开代码
<vi-dialog v-model="open6" title="标题" blur>这是一个对话框</vi-dialog>
<vi-button @click="open6 = true">打开对话框</vi-button>

Props

属性名描述类型默认值

插槽

插槽名描述有无默认内容

css变量

变量名描述默认值