File tree Expand file tree Collapse file tree 5 files changed +23
-17
lines changed Expand file tree Collapse file tree 5 files changed +23
-17
lines changed Original file line number Diff line number Diff line change 1
1
# Vuejs Dialog
2
2
3
- | Vue Version | Plugin Version |
4
- | ----------| ----------------|
5
- | Vue 2 | 1.x |
6
- | Vue 3 | 2.x |
3
+ > A lightweight, promise based alert, prompt and confirm dialog.
7
4
5
+ [ ![ npm version] ( https://badge.fury.io/js/vuejs-dialog.svg )] ( https://badge.fury.io/js/vuejs-dialog )
6
+ [ ![ Build Status] ( https://travis-ci.org/Godofbrowser/vuejs-dialog.svg?branch=master )] ( https://travis-ci.org/Godofbrowser/vuejs-dialog )
7
+ [ ![ Scrutinizer] ( https://img.shields.io/scrutinizer/g/Godofbrowser/vuejs-dialog.svg?branch=master )] ( https://scrutinizer-ci.com/g/Godofbrowser/vuejs-dialog/?branch=master )
8
+ [ ![ npm] ( https://img.shields.io/npm/dt/vuejs-dialog.svg )] ( https://github.com/Godofbrowser/vuejs-dialog/archive/master.zip )
9
+
10
+ The content below is for the Vue3 compatible version of vuejs-dialog, you can find the Vue2 compatible version [ here] ( https://github.com/Godofbrowser/vuejs-dialog/tree/v1.x )
11
+
12
+ | Vue Version | Plugin Version |
13
+ | -------------| -----------------------------------------------------------------|
14
+ | Vue 2 | [ 1.x] ( https://github.com/Godofbrowser/vuejs-dialog/tree/v1.x ) |
15
+ | Vue 3 | [ 2.x] ( https://github.com/Godofbrowser/vuejs-dialog/tree/master ) |
8
16
9
17
## Recommended IDE Setup
10
18
11
19
- [ Documentation] ( https://example.com/ )
12
20
- [ Live Demos] ( https://example.com/ )
13
- - Older Vue2 compatible version [ here ] ( https://example .com/ )
14
-
21
+ - [ 2.x ] ( https://github .com/Godofbrowser/vuejs-dialog/tree/master )
22
+ - Older Vue2 compatible version [ here ] ( https://github.com/Godofbrowser/vuejs-dialog/tree/v1.x )
Original file line number Diff line number Diff line change @@ -7,7 +7,7 @@ import {shikiPlugin} from "@vuepress/plugin-shiki";
7
7
// Ref (default theme): https://ecosystem.vuejs.press/themes/default/markdown.html
8
8
9
9
export default defineUserConfig ( {
10
- title : 'Vuejs Dialog Plugin ' ,
10
+ title : 'Vuejs Dialog' ,
11
11
description : 'A lightweight, promise based alert, prompt and confirm dialog' ,
12
12
repo : 'godofbrowser/vuejs-dialog' ,
13
13
bundler : viteBundler ( ) ,
@@ -28,7 +28,7 @@ export default defineUserConfig({
28
28
'/index.md' ,
29
29
'/features.md' ,
30
30
'/digging-deeper.md' ,
31
- '/example-use-cases .md' ,
31
+ '/demos .md' ,
32
32
]
33
33
} ) ,
34
34
} )
Original file line number Diff line number Diff line change 1
- # Example use cases
1
+ # Live Demos
2
2
Below are some practical example use cases that you may find useful.
3
3
4
4
## Quick alert after an event occurs
Original file line number Diff line number Diff line change 1
1
# Features
2
2
3
+ [[ toc]]
4
+
3
5
## Alert
4
6
An alert dialog can be triggered using the ` $dialog.alert() ` method. This method returns a promise which resolves when the dialog is dismissed.
5
7
6
8
<UIExamplesWrapper ><FeaturesExampleAlert /></UIExamplesWrapper >
7
9
@[ code] ( components/examples/FeaturesExampleAlert.vue )
8
10
9
-
10
-
11
11
## Confirm
12
12
A confirm dialog can be triggered with the ` $dialog.confirm() ` method. Like the alert dialog, this method returns a promise which resolves when the dialog is dismissed.
13
13
In this section we shall explore how to create a basic confirm dialog as well as the two other variations of the confirm dialog namely; soft and hard confirmation dialogs.
14
14
15
-
16
15
### Basic confirm dialog
17
16
<UIExamplesWrapper ><FeaturesExampleConfirm /></UIExamplesWrapper >
18
17
@[ code] ( components/examples/FeaturesExampleConfirm.vue )
19
18
20
-
21
19
### Soft confirm dialog
22
20
<UIExamplesWrapper ><FeaturesExampleConfirmSoft /></UIExamplesWrapper >
23
21
@[ code] ( components/examples/FeaturesExampleConfirmSoft.vue )
24
22
25
-
26
23
### Hard confirm dialog
27
24
<UIExamplesWrapper ><FeaturesExampleConfirmHard /></UIExamplesWrapper >
28
25
@[ code] ( components/examples/FeaturesExampleConfirmHard.vue )
29
26
30
-
31
27
## Prompt
32
28
The ` $dialog.prompt() ` method creates a prompt dialog. Use the prompt dialog to ask user directly for input.
33
29
34
30
<UIExamplesWrapper ><FeaturesExamplePrompt /></UIExamplesWrapper >
35
31
@[ code] ( components/examples/FeaturesExamplePrompt.vue )
36
32
37
-
38
-
39
33
## Confirm directive
40
34
Add the ` v-confirm ` directive to any element to instantly cause it to trigger a confirm dialog. This dialog upon confirmation will trigger the default action or the provided callback when available.
41
35
Original file line number Diff line number Diff line change @@ -108,3 +108,7 @@ export default {
108
108
<button v-confirm="'Hello world!'">Open dialog</button>
109
109
</template>
110
110
```
111
+
112
+ ## Typescript support
113
+
114
+ // Todo:
You can’t perform that action at this time.
0 commit comments