Skip to content

$XDialog

简介

$XDialog 是一个全局的对话框组件,用于在页面中弹出对话框,支持自定义内容和样式。

注册方法

ts
import { createApp , type App } from 'vue'
import { $XDialog } from 'cjx-low-code'
const app: App = createApp()
app.config.globalProperties.$XDialog = $XDialog(app._context)

基础用法

<template>
  <div>
    <el-button type="primary" @click="openDialog">打开命令式弹窗</el-button>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
import Dome from './demo.vue';
const proxy = getCurrentInstance()?.appContext.config.globalProperties

const openDialog = () => {
  proxy?.$XDialog(Dome, {
    option: {
      title: '命令式弹窗',
      width: '500px',
    }
  })
}
</script>

demo.vue 代码

我是cjx-low-code组件库命令式弹窗示例

<template>
  <div>
    我是cjx-low-code组件库命令式弹窗示例
  </div>
</template>

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