指南组件定制

Dialog 对话框

用于显示重要信息或获取用户确认的对话框组件

sKy
@skiyee
Source
该组件目前处于实验性阶段，可能存在不稳定性。诚挚邀请开发者们访问 GitHub仓库 参与技术讨论或提交贡献
<script setup lang="ts">
import { ref } from 'vue'

const showBasicDialog = ref(false)
</script>

<template>
  <div class="flex flex-col items-center gap-4 p-4">
    <SkButton @click="showBasicDialog = true">
      基础对话框
    </SkButton>
  </div>

  <SkDialog
    v-model:visible="showBasicDialog"
    title="提示"
    content="这是一段提示信息"
    left-btn-label="取消"
    right-btn-label="确认"
    @click-left-btn="showBasicDialog = false"
    @click-right-btn="showBasicDialog = false"
  />
</template>

用法

基础用法

最简单的用法，设置标题、内容和按钮文本。

<script setup lang="ts">
import { ref } from 'vue'

const showBasicDialog = ref(false)
</script>

<template>
  <div class="flex flex-col items-center gap-4 p-4">
    <SkButton @click="showBasicDialog = true">
      基础对话框
    </SkButton>
  </div>

  <SkDialog
    v-model:visible="showBasicDialog"
    title="提示"
    content="这是一段提示信息"
    left-btn-label="取消"
    right-btn-label="确认"
    @click-left-btn="showBasicDialog = false"
    @click-right-btn="showBasicDialog = false"
  />
</template>

不可关闭

设置 dismissable 属性为 false，使对话框不能通过点击背景层关闭。

<script setup lang="ts">
import { ref } from 'vue'

const showDismissableDialog = ref(false)
</script>

<template>
  <div class="flex flex-col items-center gap-4 p-4">
    <SkButton @click="showDismissableDialog = true">
      不可关闭对话框
    </SkButton>
  </div>

  <SkDialog
    v-model:visible="showDismissableDialog"
    title="提示"
    content="这个对话框不能通过点击背景层关闭"
    left-btn-label="取消"
    right-btn-label="确认"
    :dismissable="false"
    @click-left-btn="showDismissableDialog = false"
    @click-right-btn="showDismissableDialog = false"
  />
</template>

长内容

当内容较长时，对话框会自动显示滚动条。

<script setup lang="ts">
import { ref } from 'vue'

const showLongContentDialog = ref(false)
const longContent = `这是一段很长的内容，用来演示当对话框内容过长时的效果。当内容超出对话框的高度时，会自动显示垂直滚动条，让用户可以滚动查看全部内容。${'这是重复的内容，用来增加长度。'.repeat(20)}`
</script>

<template>
  <div class="flex flex-col items-center gap-4 p-4">
    <SkButton @click="showLongContentDialog = true">
      长内容对话框
    </SkButton>
  </div>

  <SkDialog
    v-model:visible="showLongContentDialog"
    title="长内容"
    :content="longContent"
    left-btn-label="取消"
    right-btn-label="确认"
    @click-left-btn="showLongContentDialog = false"
    @click-right-btn="showLongContentDialog = false"
  />
</template>

接口

Props

属性名类型默认值描述
v-model:visiblebooleanfalse对话框是否可见
titlestring-对话框标题
contentstring-对话框内容
dismissablebooleantrue是否可以通过点击背景层关闭对话框
leftBtnLabelstring-左侧按钮文本
rightBtnLabelstring-右侧按钮文本（必需）

Emits

事件名参数描述
clickLeftBtn-点击左侧按钮时触发
clickRightBtn-点击右侧按钮时触发

Slots

插槽名属性描述
default--
Copyright © sKy(skiyee) 2025-present