对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法

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

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

<script lang="ts" setup>
import { ref } from 'vue';
const dialogConfirmVisible = ref(false)

</script>
<vt-button @click="dialogConfirmVisible = true">Click to open the dialog</vt-button>
<vt-dialog
  v-model="dialogConfirmVisible"
  title="Tips"
>
  <div>This is a message</div>
  <template #footer>
    <div class="dialog-footer">
      <vt-button @click="dialogConfirmVisible = false">Cancel</vt-button>
      <vt-button @click="dialogConfirmVisible = false" type="primary">
        Confirm
      </vt-button>
    </div>
  </template>
</vt-dialog>

<style lang="scss">
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
  }
</style>

自定义标题

标题可以由属性title传入或者是使用header插槽传入自定义的标题

<vt-button @click="dialogHeaderVisible = true">Click to open the dialog</vt-button>
<vt-dialog
  v-model="dialogHeaderVisible"
  title="这是自定义标题"
>
  <div>This is a message</div>
  <template #footer>
    <div class="dialog-footer">
      <vt-button @click="dialogHeaderVisible = false">Cancel</vt-button>
      <vt-button @click="dialogHeaderVisible = false" type="primary">
        Confirm
      </vt-button>
    </div>
  </template>
</vt-dialog>

自定义内容

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

<vt-button @click="dialogContentVisible = true">open a form dialog</vt-button>
<vt-dialog
  v-model="dialogContentVisible"
  title="Tips"
>
  <div>
    <vt-form
      ref="formRef"
      :model="state"
      :rules="{
        username: {min: 6, max: 10,  message: '用户名6-10位', trigger: ['change', 'blur']}
      }"
    >
      <vt-form-item 
        prop="username" 
        :rules="[
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ]"
      >
        <vt-input placeholder="请输入用户名" v-model="state.username"></vt-input>
        <template #label>用户名</template>
      </vt-form-item>
    </vt-form>
  </div>
  <template #footer>
    <div class="dialog-footer">
      <vt-button @click="dialogContentVisible = false">Cancel</vt-button>
      <vt-button @click="dialogContentVisible = false" type="primary">
        Confirm
      </vt-button>
    </div>
  </template>
</vt-dialog>

<style lang="scss">
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
  }
</style>

自定义底部

自定义底部允许通过footer插槽传入自定义底部的内容

<vt-button @click="dialogFooterVisible = true">Click to open the dialog</vt-button>
<vt-dialog
  v-model="dialogFooterVisible"
  title="title"
>
  <div>This is a message</div>
  <template #footer>
    这是自定义底部的内容
  </template>
</vt-dialog>

API

属性

名称	类型	默认值	说明
model-value / v-model	boolean	-	是否显示对话框
title	string	''	Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入

插槽

名称	说明
default	对话框的默认内容
header	对话框标题的内容；会替换标题部分，但不会移除关闭按钮。
footer	Dialog 按钮操作区的内容