XDialog 弹窗

示例

基础用法

<template>
  <div>
    <ElButton type="primary" @click="open1">open 弹窗1</ElButton>
    <ElButton type="primary" @click="open2">open 弹窗2</ElButton>
    <ElButton type="primary" @click="open3">open 弹窗3</ElButton>
    <XDialog
      ref="dialog"
      key="dialog1"
      v-model="visible1"
      title="弹窗标题"
      subtitle="我是副标题内容"
      :modal="false"
      submit
      cancel
      :resizable="false"
      @open="onOpen">
      <div>
        <div v-for="n in 50">{{ n }}</div>
      </div>
    </XDialog>

    <XDialog
      key="dialog2"
      title="弹窗标题"
      subtitle="我是副标题内容"
      v-model="visible2"
      :icon="VtjIconBug"
      modal
      width="800px"
      height="400px"
      submit
      cancel
      :maximizable="true"
      :minimizable="true"
      @maximized="onMaximized"
      @minimized="onMinimized"
      @normal="onNormal"
      @modeChange="onModeChange"
      resizable
      @open="onOpen">
      <div style="text-align: right">可放大缩小</div>
    </XDialog>

    <XDialog
      title="弹窗标题"
      v-model="visible3"
      :icon="VtjIconBug"
      modal
      :submit="false"
      :cancel="false"
      resizable
      @resizeStart="onResizeStart"
      @resizing="onResizing"
      @resizeEnd="onResizeEnd"
      @open="onOpen">
      <div style="text-align: right">可拉伸</div>
    </XDialog>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { XDialog } from '@vtj/ui';
  import { VtjIconBug } from '@vtj/icons';
  import { ElButton } from 'element-plus';

  const visible1 = ref(false);
  const visible2 = ref(false);
  const visible3 = ref(false);
  const open1 = () => {
    visible1.value = true;
  };
  const open2 = () => {
    visible2.value = true;
  };
  const open3 = () => {
    visible3.value = true;
  };

  const onOpen = () => {
    console.log('open');
  };

  const onMaximized = () => {
    console.log('最大化');
  };
  const onMinimized = () => {
    console.log('最小化');
  };

  const onNormal = () => {
    console.log('正常化');
  };

  const onModeChange = (mode) => {
    console.log('onModeChange', mode);
  };

  const onResizeStart = (e) => {
    console.log('onResizeStart', e);
  };

  const onResizing = (e) => {
    console.log('onResizing', e);
  };

  const onResizeEnd = (e) => {
    console.log('onResizeEnd', e);
  };
</script>

<style scoped></style>

自定义内容

<template>
  <div>
    <ElButton type="primary" @click="open1">open vNode</ElButton>
    <ElButton type="primary" @click="open3">open component</ElButton>
    <ElButton type="primary" @click="open2">open src</ElButton>
    <XDialog
      ref="dialog"
      key="dialog1"
      v-model="visible1"
      title="弹窗标题"
      subtitle="我是副标题内容"
      :modal="false"
      submit
      cancel
      :resizable="true"
      @open="onOpen"
      :content="vNode()">
    </XDialog>

    <XDialog
      ref="dialog"
      key="dialog1"
      v-model="visible3"
      title="弹窗标题"
      subtitle="展示的是基础元件中XQrCode组件的基础用法"
      :modal="false"
      submit
      cancel
      :resizable="true"
      @open="onOpen"
      :content="XQrCode">
    </XDialog>

    <XDialog
      key="dialog2"
      title="弹窗标题"
      subtitle="我是副标题内容"
      v-model="visible2"
      :icon="VtjIconBug"
      modal
      src="/#/ui/startup"
      width="800px"
      height="400px"
      submit
      cancel
      resizable
      @open="onOpen">
    </XDialog>
  </div>
</template>

<script setup>
  import { ref, h } from 'vue';
  import { XDialog } from '@vtj/ui';
  import { VtjIconBug } from '@vtj/icons';
  import { ElButton } from 'element-plus';
  import XQrCode from '../qrcode/qrcode-1.vue';

  const visible1 = ref(false);
  const visible2 = ref(false);
  const visible3 = ref(false);
  const open1 = () => {
    visible1.value = true;
  };
  const open2 = () => {
    visible2.value = true;
  };
  const open3 = () => {
    visible3.value = true;
  };

  const onOpen = () => {
    console.log('open');
  };

  const foo = 'aa';
  const bool = false;

  const items = Array.from({ length: 10 }, (_, i) => ({
    id: i,
    text: `标题${i}`
  }));

  const vNode = () => {
    return h(
      'div',
      {
        class: 'foo',
        style: { color: 'seagreen' },
        onClick: () => {}
      },
      [
        h('p', { class: 'bg-sky-800, text-3xl' }, 'hello-这是自定义内容'),
        h(
          'h1',
          {
            style: {
              fontSize: '22px'
            }
          },
          'VTJ 一款基于 Vue3 + Typescript 的低代码开发工具，内置低代码引擎、设计器、渲染器和代码生成器。'
        ),
        h(
          'span',
          {
            '^width': '200px',
            '^background': 'salmon',
            style: { color: '#000' }
          },
          '诚邀对该项目感兴趣的同学参与测试体验。'
        ),
        h('div', { class: [foo, { bar: bool }], style: { color: 'red' } }, [
          '如果需要二开或贡献代码，',
          h('span', { style: { color: '#000' } }, '可以拉取仓库master分支')
        ]),
        h(
          'ul',
          {
            class: 'cursor-pointer, text-sky-200',
            onClick: (e) => {}
          },
          [
            items.map(({ id, text }, idx) => {
              return h(
                'li',
                {
                  class: [
                    'hover:text-slate-700, hover:text-xl, w-full, bg-sky-800'
                  ],
                  key: id,
                  onClick: () => {}
                },
                text
              );
            })
          ]
        )
      ]
    );
  };
</script>

<style scoped></style>

API

属性

属性名	说明	类型	默认值
modelValue	是否显示 Dialog	boolean	true
title	标题	string	-
subtitle	副标题	string	-
icon	图标	string | object	-
size	尺寸	string	default
width	宽度	number | string	70%
height	高度	number | string	70%
left	Dialog CSS 中的 margin-left 值	number | string	-
top	Dialog CSS 中的 margin-top 值	number | string	-
modal	是否展示遮罩层	boolean	true
draggable	是否可拖拽	boolean | object	true
resizable	是否可以拉伸	boolean | object	-
closable	是否显示关闭图标	boolean	true
maximizable	是否显示放大图标	boolean	false
minimizable	是否显示缩小图标	boolean	false
mode	弹窗模式<最大化、最小化、正常化>	string	normal
content	定义内容	object <VNode | component>	-
src	内容路径	string	-
beforeClose	关闭前的回调，会暂停 Dialog 的关闭	function	-
submit	显示确认按钮	boolean| string	-
cancel	显示取消按钮	boolean| string	-
bodyPadding	显示内容区域的内边距	boolean	true
primary	标题背景颜色	boolean	-

接收 XPanel 所有参数

事件

名称	说明	回调参数
open	Dialog 打开的回调	-
close	Dialog 关闭的回调	-
destroy	销毁组件时触发的回调	-
maximized	点击弹窗最大化时的回调	-
minimized	点击弹窗最小化时的回调	-
normal	点击弹窗正常化时的回调	-
modeChange	当弹窗模式改变时触发的事件	mode
dragStart	当拖拽开始时触发的事件	-
dragging	当拖拽中时触发的事件	-
dragEnd	当拖拽结束时触发的事件	-
resizeStart	当变换开始时触发的事件	-
resizing	当变换中时触发的事件	-
resizeEnd	当变换结束时触发的事件	-
submit	Dialog 点击确认按钮的回	-
cancel	Dialog 点击取消按钮的回	-

暴露

名称	说明	类型
$vtjEl	组件父元素的实例	-
panelRef	当前组件实例	-
state	组件的参数	object
maximized	是否显示放大图标	-
minimized	是否显示缩小图标	-
changeMode	改变模式（最大化、最小化、正常形状）的回调	-
show	显示 Dialog方法	-
hide	隐藏 Dialog方法	-
submit	Dialog 点击确认按钮的回调	-
cancel-	Dialog 点击取消按钮的回调	-
close	Dialog 关闭的回调	-

state 参数说明

参数	类型
mode	string <normal | maximized | minimized>
wrapperWidth	number
wrapperHeight	number
width	number
height	number
left	number
top	number
zIndex	number
dragging	boolean
resizing	boolean