KLDialog

考拉弹窗组件

效果

<script setup lang="ts">
import { ref, inject } from 'vue';
import DialogCom from './DialogCom.vue';
const klDialog = inject<Function>('klDialog') as Function;

const showDialog = ref(false);
function openDialog() {
  klDialog(DialogCom, {
    title: '注入方式',
  });
}
</script>

<template>
  <div class="wh-full">
    <KLButton content="注入方式" class="mr30" @click="openDialog" />
    <KLButton content="显示/隐藏弹窗" @click="showDialog = !showDialog" />
    <KLDialog v-model:showDialog="showDialog" title="显示/隐藏弹窗" canMove>
      <template #main>
        <div class="flex-center hl-color" style="width: 500px;height:300px;font-size:100px;">
          <KLIcon name="plc-1" />
          <KLIcon name="plc" class="ml30" />
        </div>
      </template>
    </KLDialog>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string;
}>()
</script>

<template>
  <KLDialog :title="title" canMove>
    <template #main>
      <div class="flex-center hl-color" style="width: 500px;height:300px;font-size:100px;">
        <KLIcon name="plc-1" />
        <KLIcon name="plc" class="ml30" />
      </div>
    </template>
  </KLDialog>
</template>

Attributes

属性	说明	类型	默认值
title	弹窗标题	string	-
width	宽度	string|number	-
height	高度	string|number	-
full	是否全屏	boolean	-
footer	是否显示页脚	boolean	true
canMove	是否可以移动弹窗组件	boolean	-
close	关闭按钮回调函数，返回值为是否阻止关闭弹窗	() => boolean	-
sure	确认按钮回调函数，返回值为是否阻止关闭弹窗	() => boolean	-
cancel	取消按钮回调函数，返回值为是否阻止关闭弹窗	() => boolean	-
sureFirst	footer确认按钮与取消按钮交换位置	boolean	-

slot

插槽名	说明	数据
header	头部	-
main	主体	-
footer	尾部	{hiddenDialog: () => void}