VTJ.PRO

Appearance

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是否显示 Dialogbooleantrue
title标题string-
subtitle副标题string-
icon图标string | object-
size尺寸stringdefault
width宽度number | string70%
height高度number | string70%
leftDialog CSS 中的 margin-left 值number | string-
topDialog CSS 中的 margin-top 值number | string-
modal是否展示遮罩层booleantrue
draggable是否可拖拽boolean | objecttrue
resizable是否可以拉伸boolean | object-
closable是否显示关闭图标booleantrue
maximizable是否显示放大图标booleanfalse
minimizable是否显示缩小图标booleanfalse
mode弹窗模式<最大化、最小化、正常化>stringnormal
content定义内容object <VNode | component>-
src内容路径string-
beforeClose关闭前的回调，会暂停 Dialog 的关闭function-
submit显示确认按钮boolean| string-
cancel显示取消按钮boolean| string-
bodyPadding显示内容区域的内边距booleantrue
primary标题背景颜色boolean-

接收 XPanel 所有参数 ​

事件 ​

名称说明回调参数
'update:modelValue'显示与隐藏 dialog 触发的回调-
openDialog 打开的回调-
closeDialog 关闭的回调-
destroy销毁组件时触发的回调-
maximized点击弹窗最大化时的回调-
minimized点击弹窗最小化时的回调-
normal点击弹窗正常化时的回调-
modeChange当弹窗模式改变时触发的事件mode
dragStart当拖拽开始时触发的事件-
dragging当拖拽中时触发的事件-
dragEnd当拖拽结束时触发的事件-
resizeStart当变换开始时触发的事件-
resizing当变换中时触发的事件-
resizeEnd当变换结束时触发的事件-
submitDialog 点击确认按钮的回-
cancelDialog 点击取消按钮的回-

暴露 ​

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

state 参数说明 ​

参数类型
modestring <normal | maximized | minimized>
wrapperWidthnumber
wrapperHeightnumber
widthnumber
heightnumber
leftnumber
topnumber
zIndexnumber
draggingboolean
resizingboolean

Released under the MIT License.

Copyright © 2024-present VTJ.PRO