$XDialog

Introduction

$XDialog is a global dialog component used to display dialogs on the page, supporting custom content and styles.

Registration Method

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

Basic Usage

<template>
  <div>
    <el-button type="primary" @click="openDialog">Open command style pop-up window</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: 'Command style pop-up window',
      width: '500px',
    }
  })
}
</script>

demo.vue Code

I am cjx low code component library command style pop-up example

<template>
  <div>
    I am cjx low code component library command style pop-up example
  </div>
</template>

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