Getting started
use-el-dialog is library, help you to use el-dialog from element-plus, easy and simple to use el-dialog by hook type.
Quick start
- Install the package:
bash
npm i use-el-dialognpm i use-el-dialogbash
yarn add use-el-dialogyarn add use-el-dialogbash
pnpm add use-el-dialogpnpm add use-el-dialog- Installed & Use Element Plus:
js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)INFO
The above is just one way to reference element plus, you can import element plus according to your preferences, but it should be noted that element plus must be imported in advance, otherwise the plugin will be invalid. Please refer to the element plus document for details.
- Add the plugin into your app:
js
import BasicElDialog from 'use-el-dialog'
app.use(BasicElDialog)import BasicElDialog from 'use-el-dialog'
app.use(BasicElDialog)- Use the
use-el-dialogdirective:
vue
<template>
<div class="box-container">
<el-button size="large" @click="handleOpen">Open Dialog</el-button>
<basic-el-dialog @register="registerDialog" />
</div>
</template>
<script setup>
import { useElDialog } from 'use-el-dialog'
const [registerDialog, dialogMethods] = useElDialog({
title: 'Custom Title'
})
const handleOpen = () => {
dialogMethods.openModal()
}
</script><template>
<div class="box-container">
<el-button size="large" @click="handleOpen">Open Dialog</el-button>
<basic-el-dialog @register="registerDialog" />
</div>
</template>
<script setup>
import { useElDialog } from 'use-el-dialog'
const [registerDialog, dialogMethods] = useElDialog({
title: 'Custom Title'
})
const handleOpen = () => {
dialogMethods.openModal()
}
</script>