mirror of
https://github.com/KevinMidboe/vue-js-modal.git
synced 2025-10-29 09:50:22 +00:00
Updated README
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,4 +1,5 @@
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
node_modules/
|
node_modules/
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
|
package-lock.json
|
||||||
*.map
|
*.map
|
||||||
|
|||||||
47
README.md
47
README.md
@@ -18,7 +18,7 @@ npm install vue-js-modal --save
|
|||||||
|
|
||||||
### How to use
|
### How to use
|
||||||
|
|
||||||
Include plugin in your main.js file.
|
Include plugin in your `main.js` file.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import vmodal from 'vue-js-modal'
|
import vmodal from 'vue-js-modal'
|
||||||
@@ -26,13 +26,15 @@ import vmodal from 'vue-js-modal'
|
|||||||
Vue.use(vmodal)
|
Vue.use(vmodal)
|
||||||
```
|
```
|
||||||
|
|
||||||
Create modal
|
Create modal:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<modal name="hello-world">
|
<modal name="hello-world">
|
||||||
hello, world!
|
hello, world!
|
||||||
</modal>
|
</modal>
|
||||||
```
|
```
|
||||||
Call it from anywhere in the app
|
Call it from anywhere in the app:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
methods: {
|
methods: {
|
||||||
show () {
|
show () {
|
||||||
@@ -44,6 +46,27 @@ methods: {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### SSR
|
||||||
|
|
||||||
|
Include plugin in your `nuxt.config.js` file:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
module.exports = {
|
||||||
|
plugins: ['~plugins/vue-js-modal']
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
And your `plugins/vue-js-modal.js` will look like:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VModal from 'vue-js-modal/dist/ssr.index'
|
||||||
|
|
||||||
|
Vue.use(VModal)
|
||||||
|
```
|
||||||
|
|
||||||
|
For full demo please look at `demo/server_side_rendering`
|
||||||
|
|
||||||
### Properties
|
### Properties
|
||||||
|
|
||||||
| Name | Required | Type | Default | Description |
|
| Name | Required | Type | Default | Description |
|
||||||
@@ -60,7 +83,7 @@ methods: {
|
|||||||
| minWidth | false | Number | 0 | The minimum width to which modal can be resized |
|
| minWidth | false | Number | 0 | The minimum width to which modal can be resized |
|
||||||
| minHeight | false | Number | 0 | The minimum height to which modal can be resized |
|
| minHeight | false | Number | 0 | The minimum height to which modal can be resized |
|
||||||
| pivotX | false | Number (0 - 1.0) | 0.5 | Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window |
|
| pivotX | false | Number (0 - 1.0) | 0.5 | Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window |
|
||||||
| pivotY | false | Number (0 - 1.0) | 0.5 | |
|
| pivotY | false | Number (0 - 1.0) | 0.5 | |
|
||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
@@ -109,7 +132,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
This example, initializes `time` variable every time the modal is being opened.
|
This example, initializes `time` variable every time the modal is being opened.
|
||||||
And then forbits closing it for the next 5000 ms
|
And then forbits closing it for the next 5000 ms
|
||||||
|
|
||||||
### Other
|
### Other
|
||||||
@@ -122,15 +145,15 @@ Example:
|
|||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<modal name="foo">
|
<modal name="foo">
|
||||||
|
|
||||||
<div slot="top-right">
|
<div slot="top-right">
|
||||||
<button @click="$modal.hide('foo')">
|
<button @click="$modal.hide('foo')">
|
||||||
❌
|
❌
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
Hello, ☀️!
|
Hello, ☀️!
|
||||||
|
|
||||||
</modal>
|
</modal>
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
@@ -138,7 +161,7 @@ Example:
|
|||||||
|
|
||||||
#### Draggable handler
|
#### Draggable handler
|
||||||
|
|
||||||
Draggable property can accept not only `Boolean` but also `String` paramenters. With `String` value, you can specify a CSS selector to the element which will be a "handler" for dragging.
|
Draggable property can accept not only `Boolean` but also `String` paramenters. With `String` value, you can specify a CSS selector to the element which will be a "handler" for dragging.
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
@@ -156,7 +179,7 @@ Example:
|
|||||||
|
|
||||||
To run an example:
|
To run an example:
|
||||||
```sh
|
```sh
|
||||||
# Clone repo
|
# Clone repo
|
||||||
|
|
||||||
git clone https://github.com/euvl/vue-js-modal.git
|
git clone https://github.com/euvl/vue-js-modal.git
|
||||||
|
|
||||||
@@ -172,5 +195,3 @@ cd demo
|
|||||||
npm install
|
npm install
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import VModal from 'vue-js-modal/dist/ssr.index.js'
|
import VModal from 'vue-js-modal/dist/ssr.index'
|
||||||
|
|
||||||
Vue.use(VModal)
|
Vue.use(VModal)
|
||||||
|
|||||||
Reference in New Issue
Block a user