<template>
    <pied-button click="handle">open the dialog</pied-button>

    <pied-dialog 
        v-model="dialogShow" 
        title="标题"
        beforeClose="beforeClose"
    >
        <span>我是dialog中的内容</span>
        <template #footer>
        <span>
            <pied-button size="mini" type="info" click="dialogShow = false">cancel</pied-button>
            <pied-button size="mini" click="dialogShow = false">confirm</pied-button>
        </span>
        </template>
    </pied-dialog>
</template>

<script>
import { confirm } from 'pied-design-ui'
import { ref } from 'vue'
const dialogShow = false
const handle = () => {
    this.dialogShow = true
}
const beforeClose = (done) => {
    confirm('提示', '确定关闭dialog对话窗口吗', 'cancel', 'confirm').then(() => {
        done && done()
    }).catch(err => {

    })
}
</script>

<template>
    <pied-button click="handle1">open the columnBody dialog</pied-button>

    <pied-dialog 
        v-model="dialogShow" 
        title="标题"
    >
        <pied-form model="form">
            <pied-form-item>
                <pied-input v-model="form.username" label="账户"></pied-input>
            </pied-form-item>
            <pied-form-item>
                <pied-input v-model="form.password" label="密码"></pied-input>
            </pied-form-item>
        </pied-form>
        <template #footer>
        <span>
            <pied-button size="mini" type="info" click="dialogShow = false">cancel</pied-button>
            <pied-button size="mini" click="dialogShow = false">confirm</pied-button>
        </span>
        </template>
    </pied-dialog>
</template>

<script>
import { confirm } from 'pied-design-ui'
import { ref, reactive} from 'vue'
const dialogShow = ref(false)
const form = reactive({
    username: '',
    password: ''
})
const handle = () => {
    this.dialogShow = true
}
</script>

<template>
    <pied-button click="handle">open the columnHeader dialog</pied-button>

    <pied-dialog 
        v-model="dialogShow" 
        title="标题"
    >
        <template #header>
            <div class="columnTitle">Tips</div>
        </template>
        <span>这是一个dialog标题</span>
        <template #footer>
            <span>
                <pied-button size="mini" type="info" click="dialogShow = false">cancel</pied-button>
                <pied-button size="mini" click="dialogShow = false">confirm</pied-button>
            </span>
        </template>
    </pied-dialog>
</template>

<script>
import { confirm } from 'pied-design-ui'
import { ref } from 'vue'
const dialogShow = ref(false)
const handle = () => {
    this.dialogShow = true
}
</script>

<template>
    <pied-button click="handle1">open the center dialog</pied-button>

    <pied-dialog 
        v-model="dialogShow" 
        title="标题"
        center
    >
        <span>这是一个dialog标题</span>
        <template #footer>
            <span>
                <pied-button size="mini" type="info" click="dialogShow = false">cancel</pied-button>
                <pied-button size="mini" click="dialogShow = false">confirm</pied-button>
            </span>
        </template>
    </pied-dialog>
</template>

<script>
import { confirm } from 'pied-design-ui'
import { ref } from 'vue'
const dialogShow = ref(false)
const handle = () => {
    this.dialogShow = true
}
</script>