Dialog 对话框

WARNING

点击遮罩层时关闭弹窗，还有些问题，需要进行修复 🔨

基础用法

Dialog 弹出一个对话框，适合需要定制性更大的场景。

需要设置 model-value / v-model 属性，它接收 Boolean，当为 true 时显示 Dialog。 Dialog 分为两个部分：body 和 footer，footer 需要具名为 footer 的 slot。 title 属性用于定义标题，它是可选的，默认值为空。

<template>
    <Button type="primary" @click="showDialog">显示弹窗</Button>

    <Dialog 
        v-model="visiable" 
        title="Tips" 
        :before-close="beforeClose"
        :closeOnClickModal="true"
    >
        <div>内容区域</div>
        <template #footer>
            <div class="custom-footer">
                <Button @click="closeDialog">取消</Button>
                <Button type="primary" @click="confirm">确定</Button>
            </div>
        </template>
    </Dialog>

</template>
<script setup>
import { ref } from 'vue'
import Button from '@/components/Button/Button.vue'
import { VhMessageBox } from '@/components/Messagebox/method'
import { createMessage } from '@/components/Message/method'
import Dialog from '@/components/Dialog/Dialog.vue'

const visiable = ref(false)

const showDialog = () => {
    visiable.value = true
}

const closeDialog = async () => {
    const state = await VhMessageBox.confirm({
        message: '你确定要关闭弹窗吗？'
    })
    if (state === true) {
        visiable.value = false
    }
}

const confirm = () => {
    visiable.value = false
    createMessage({ message: '确定', duration: 1000, type: 'success' })
}

// 关闭之前
const beforeClose = (done) => {
    VhMessageBox.confirm({
        message: '你确定要关闭弹窗吗？'
    }).then(state => {
        done()
    })
}
</script>
<style scoped>
.custom-footer {
  text-align: right;
}
</style>

自定义内容

对话框的内容可以是任何东西。

<template>
    <Button type="warning" plain @click="showDialog">自定义显示弹窗内容</Button>

    <Dialog 
        v-model="visiable" 
        title="Tips" 
        :before-close="beforeClose"
    >
        <div class="custom-content">
            <Select @change="change" v-model="value" placeholder="有禁用选项，请选择" :options="options" />
        </div>
        <template #footer>
            <div class="custom-footer">
                <Button @click="visiable = false">取消</Button>
                <Button type="primary" @click="visiable = false">确定</Button>
            </div>
        </template>
    </Dialog>

</template>
<script setup>
import { ref } from 'vue'
import Button from '@/components/Button/Button.vue'
import { VhMessageBox } from '@/components/Messagebox/method'
import { createMessage } from '@/components/Message/method'
import Select from '@/components/Select/Select.vue'
import Dialog from '@/components/Dialog/Dialog.vue'

const visiable = ref(false)

const showDialog = () => {
    visiable.value = true
}

const options = ref(
    [
        { label: 'Vue', value: '1' },
        { label: 'React', value: '2' },
        { label: 'Next', value: '3', disabled: true },
        { label: 'Nest', value: '4' }
    ]
)

const value = ref('')
const change = (value) => {
    const item = options.value.find(item => item.value === value)
    createMessage({ 
        message: `label: ${item.label}; value: ${item.value}`, 
        type: 'success', 
        duration: 2000 
    })
}

// 关闭之前
const beforeClose = (done) => {
    VhMessageBox.confirm({
        message: '你确定要关闭弹窗吗？'
    }).then(state => {
        done()
    })
}

</script>
<style scoped>
.custom-footer {
  text-align: right;
}
.custom-content {
    height: 300px;
    display: flex;
    flex-direction: column;
}
</style>

自定义头部

header 可用于自定义显示标题的区域。

<template>
    <Button type="success" plain @click="visiable = true">显示自定义头部弹窗</Button>

    <Dialog 
        v-model="visiable" 
        title="Tips" 
        :showClose="false"
    >
        <template #header>
            <div class="my-header">
                <h4>This is a custom header!</h4>
                <Button type="danger" @click.stop="close">
                    Close
                </Button>
            </div>
        </template>

        <div>内容区域</div>
        <template #footer>
            <div class="custom-footer">
                <Button @click="visiable = false">取消</Button>
                <Button type="primary" @click="visiable = false">确定</Button>
            </div>
        </template>
    </Dialog>

</template>
<script setup>
import { ref } from 'vue'
import Button from '@/components/Button/Button.vue'
import { VhMessageBox } from '@/components/Messagebox/method'
import Dialog from '@/components/Dialog/Dialog.vue'
import Icon from '@/components/Icon/Icon.vue'

const visiable = ref(false)

const close = (done) => {
    VhMessageBox.confirm({
        message: '你确定要关闭弹窗吗？'
    }).then(state => {
        visiable.value = false
    })
}
</script>
<style scoped>
.custom-footer {
  text-align: right;
}
.my-header {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>

嵌套的对话框

WARNING

正在开发中。。。 🔨

可拖拽对话框

WARNING

正在开发中。。。 🔨