https://github.com/wormtql/element-dialog-helper
ElementUI imperative dialog
https://github.com/wormtql/element-dialog-helper
Last synced: 5 months ago
JSON representation
ElementUI imperative dialog
- Host: GitHub
- URL: https://github.com/wormtql/element-dialog-helper
- Owner: wormtql
- Created: 2021-04-07T10:17:02.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-07T10:23:07.000Z (over 5 years ago)
- Last Synced: 2025-02-24T01:12:08.598Z (over 1 year ago)
- Language: Vue
- Size: 118 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# element-dialog-helper
Open/Close ElementUI dialogs in an imperative way
```html
Open dialog-1-1
Open dialog-1-2
Open dialog2
```
## Install
```
npm install element-dialog-helper
```
## Use in Vue projects
make sure you have ElementUI installed
```js
import Vue from "vue"
import ElementDialogHelper from "element-dialog-helper"
Vue.use(ElementDialogHelper);
```
## Usage
In file `Dialog1.vue`(this can be any of your custom dialog):
```html
Close
Dialog1
export default {
name: "Dialog1",
}
```
In file `Dialog2.vue`(this can be any of your custom dialog):
```html
Close
Dialog2
export default {
name: "Dialog2",
}
```
In file `MyComponent.vue`(the component where you have many dialogs):
```html
Open Dialog1
Open Dialog2
import Dialog1 from "./components/Dialog1"
import Dialog2 from "./components/Dialog2"
export default {
name: "MyComponent",
components: {
Dialog1, Dialog2,
},
}
```
***If you wish to use a dialog multiple times, remember to provide a unique name to each of them***
For example:
```html
Close
Dialog1
export default {
name: "Dialog1",
props: ["name"],
}
```
## API
```js
// in your Vue instance
// remember, name is unique through the whole app lifetime
this.$dialog.open("dialog-name");
this.$dialog.close("dialog-name");
```
the component `el-dialog-helper` is a wrap of `el-dialog`
so you can use any props/events/slots of `el-dialog`
for example, you can use this:
```html
<el-dialog-helper name="my-dialog" title="dialog" width="80%">
content
</el-dialog-helper>
```