@hyjiacan/vue-slideout 3.0.2 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +135 -135
- package/dist/slideout.common.js +3201 -1107
- package/dist/slideout.css +1 -1
- package/dist/slideout.umd.js +3201 -1107
- package/dist/slideout.umd.min.js +1 -1
- package/package.json +6 -6
- package/src/App.vue +332 -332
- package/src/assets/lang-directive.js +22 -22
- package/src/assets/langs.json +82 -82
- package/src/components/index.js +31 -31
- package/src/components/methods.js +11 -2
- package/src/components/renderer.js +3 -2
- package/src/components/slideout.js +203 -199
- package/src/main.js +14 -14
- package/src/styles/index.less +119 -119
- package/src/views/Main.vue +81 -81
package/README.md
CHANGED
|
@@ -1,135 +1,135 @@
|
|
|
1
|
-
# Slideout
|
|
2
|
-
|
|
3
|
-
[](https://github.com/hyjiacan/vue-slideout/blob/master/LICENSE)
|
|
4
|
-
[](https://www.travis-ci.org/hyjiacan/vue-slideout)
|
|
5
|
-
[](https://www.npmjs.com/package/@hyjiacan/vue-slideout)
|
|
6
|
-
|
|
7
|
-
[](https://npmcharts.com/compare/@hyjiacan/vue-slideout?minimal=true)
|
|
8
|
-
[](https://coveralls.io/github/hyjiacan/vue-slideout?branch=master)
|
|
9
|
-
[](https://www.jsdelivr.com/package/npm/@hyjiacan/vue-slideout)
|
|
10
|
-
|
|
11
|
-
A Slide-Out component for Vue3
|
|
12
|
-
|
|
13
|
-
## Dependencies
|
|
14
|
-
|
|
15
|
-
- Vue.js 3.x
|
|
16
|
-
- Less
|
|
17
|
-
|
|
18
|
-
## Install
|
|
19
|
-
|
|
20
|
-
### NodeJS ENV (commonjs)
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
npm i @hyjiacan/vue-slideout@3
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
or
|
|
27
|
-
|
|
28
|
-
```bash
|
|
29
|
-
yarn add @hyjiacan/vue-slideout@3
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
If you need compatible with Vue.js 2.x, use version `@hyjiacan/vue-slideout@2`.
|
|
33
|
-
|
|
34
|
-
You can get the latest code:
|
|
35
|
-
|
|
36
|
-
```bash
|
|
37
|
-
git clone https://github.com/hyjiacan/vue-slideout.git
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
or just [download archive](https://github.com/hyjiacan/vue-slideout/archive/master.zip)
|
|
41
|
-
|
|
42
|
-
### Browser ENV (umd)
|
|
43
|
-
|
|
44
|
-
Like node-env, a global `Slideout` will be attached onto `window`.
|
|
45
|
-
|
|
46
|
-
The newest version
|
|
47
|
-
|
|
48
|
-
```html
|
|
49
|
-
|
|
50
|
-
<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/dist/slideout.umd.min.js"></script>
|
|
51
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/dist/slideout.css"/>
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
Specified version
|
|
55
|
-
|
|
56
|
-
```html
|
|
57
|
-
|
|
58
|
-
<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/dist/slideout.umd.min.js"></script>
|
|
59
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/dist/slideout.css"/>
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
> **unpkg** is also available: instead *cdn.jsdelivr.net* with *unpkg.com*.
|
|
63
|
-
>
|
|
64
|
-
> Also, you can use the uncompressed dist by instead *slideout.umd.min.js* with *slideout.umd.js*
|
|
65
|
-
|
|
66
|
-
## Usage
|
|
67
|
-
|
|
68
|
-
### Global (recommended)
|
|
69
|
-
|
|
70
|
-
*main.js*
|
|
71
|
-
|
|
72
|
-
```javascript
|
|
73
|
-
import Vue from 'vue'
|
|
74
|
-
import Slideout from '@hyjiacan/vue-slideout'
|
|
75
|
-
import '@hyjiacan/vue-slideout/dist/slideout.css'
|
|
76
|
-
|
|
77
|
-
// import Slideout component, and set the defaults props
|
|
78
|
-
Vue.use(Slideout, {
|
|
79
|
-
// set default props here
|
|
80
|
-
})
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### In Component
|
|
84
|
-
|
|
85
|
-
*Foobar.vue*
|
|
86
|
-
|
|
87
|
-
```html
|
|
88
|
-
<template>
|
|
89
|
-
<slideout @closing="onClosing" v-model="visible" title="The title">
|
|
90
|
-
<div>content</div>
|
|
91
|
-
</slideout>
|
|
92
|
-
</template>
|
|
93
|
-
<script>
|
|
94
|
-
import Slideout from '@hyjiacan/vue-slideout'
|
|
95
|
-
import '@hyjiacan/vue-slideout/dist/slideout.css'
|
|
96
|
-
|
|
97
|
-
export default {
|
|
98
|
-
name: 'Foobar',
|
|
99
|
-
components: { Slideout },
|
|
100
|
-
data () {
|
|
101
|
-
return {
|
|
102
|
-
visible: false
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
methods: {
|
|
106
|
-
onClosing (e) {
|
|
107
|
-
// prevent close and wait
|
|
108
|
-
e.pause = true
|
|
109
|
-
// close after 3 seconds
|
|
110
|
-
setTimeout(() => {
|
|
111
|
-
// assign true to close, do nothing or assign false to cancel close.
|
|
112
|
-
e.resume = true
|
|
113
|
-
}, 3000)
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
</script>
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
- For more usage, see https://hyjiacan.github.io/vue-slideout/
|
|
121
|
-
- API reference: [API.md](./API.md)
|
|
122
|
-
|
|
123
|
-
Try it on the fly [CodePen][codepen]
|
|
124
|
-
|
|
125
|
-
[codepen]: https://codepen.io/hyjiacan/pen/LYRZONE
|
|
126
|
-
|
|
127
|
-
## Development
|
|
128
|
-
|
|
129
|
-
```bash
|
|
130
|
-
yarn
|
|
131
|
-
# start dev server
|
|
132
|
-
yarn serve
|
|
133
|
-
# Build library
|
|
134
|
-
yarn release
|
|
135
|
-
```
|
|
1
|
+
# Slideout
|
|
2
|
+
|
|
3
|
+
[](https://github.com/hyjiacan/vue-slideout/blob/master/LICENSE)
|
|
4
|
+
[](https://www.travis-ci.org/hyjiacan/vue-slideout)
|
|
5
|
+
[](https://www.npmjs.com/package/@hyjiacan/vue-slideout)
|
|
6
|
+
|
|
7
|
+
[](https://npmcharts.com/compare/@hyjiacan/vue-slideout?minimal=true)
|
|
8
|
+
[](https://coveralls.io/github/hyjiacan/vue-slideout?branch=master)
|
|
9
|
+
[](https://www.jsdelivr.com/package/npm/@hyjiacan/vue-slideout)
|
|
10
|
+
|
|
11
|
+
A Slide-Out component for Vue3
|
|
12
|
+
|
|
13
|
+
## Dependencies
|
|
14
|
+
|
|
15
|
+
- Vue.js 3.x
|
|
16
|
+
- Less
|
|
17
|
+
|
|
18
|
+
## Install
|
|
19
|
+
|
|
20
|
+
### NodeJS ENV (commonjs)
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm i @hyjiacan/vue-slideout@3
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
or
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
yarn add @hyjiacan/vue-slideout@3
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
If you need compatible with Vue.js 2.x, use version `@hyjiacan/vue-slideout@2`.
|
|
33
|
+
|
|
34
|
+
You can get the latest code:
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
git clone https://github.com/hyjiacan/vue-slideout.git
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
or just [download archive](https://github.com/hyjiacan/vue-slideout/archive/master.zip)
|
|
41
|
+
|
|
42
|
+
### Browser ENV (umd)
|
|
43
|
+
|
|
44
|
+
Like node-env, a global `Slideout` will be attached onto `window`.
|
|
45
|
+
|
|
46
|
+
The newest version
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
|
|
50
|
+
<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/dist/slideout.umd.min.js"></script>
|
|
51
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout/dist/slideout.css"/>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Specified version
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
|
|
58
|
+
<script src="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/dist/slideout.umd.min.js"></script>
|
|
59
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hyjiacan/vue-slideout@<VERSION>/dist/slideout.css"/>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
> **unpkg** is also available: instead *cdn.jsdelivr.net* with *unpkg.com*.
|
|
63
|
+
>
|
|
64
|
+
> Also, you can use the uncompressed dist by instead *slideout.umd.min.js* with *slideout.umd.js*
|
|
65
|
+
|
|
66
|
+
## Usage
|
|
67
|
+
|
|
68
|
+
### Global (recommended)
|
|
69
|
+
|
|
70
|
+
*main.js*
|
|
71
|
+
|
|
72
|
+
```javascript
|
|
73
|
+
import Vue from 'vue'
|
|
74
|
+
import Slideout from '@hyjiacan/vue-slideout'
|
|
75
|
+
import '@hyjiacan/vue-slideout/dist/slideout.css'
|
|
76
|
+
|
|
77
|
+
// import Slideout component, and set the defaults props
|
|
78
|
+
Vue.use(Slideout, {
|
|
79
|
+
// set default props here
|
|
80
|
+
})
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### In Component
|
|
84
|
+
|
|
85
|
+
*Foobar.vue*
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
<template>
|
|
89
|
+
<slideout @closing="onClosing" v-model="visible" title="The title">
|
|
90
|
+
<div>content</div>
|
|
91
|
+
</slideout>
|
|
92
|
+
</template>
|
|
93
|
+
<script>
|
|
94
|
+
import Slideout from '@hyjiacan/vue-slideout'
|
|
95
|
+
import '@hyjiacan/vue-slideout/dist/slideout.css'
|
|
96
|
+
|
|
97
|
+
export default {
|
|
98
|
+
name: 'Foobar',
|
|
99
|
+
components: { Slideout },
|
|
100
|
+
data () {
|
|
101
|
+
return {
|
|
102
|
+
visible: false
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
methods: {
|
|
106
|
+
onClosing (e) {
|
|
107
|
+
// prevent close and wait
|
|
108
|
+
e.pause = true
|
|
109
|
+
// close after 3 seconds
|
|
110
|
+
setTimeout(() => {
|
|
111
|
+
// assign true to close, do nothing or assign false to cancel close.
|
|
112
|
+
e.resume = true
|
|
113
|
+
}, 3000)
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
</script>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
- For more usage, see https://hyjiacan.github.io/vue-slideout/
|
|
121
|
+
- API reference: [API.md](./API.md)
|
|
122
|
+
|
|
123
|
+
Try it on the fly [CodePen][codepen]
|
|
124
|
+
|
|
125
|
+
[codepen]: https://codepen.io/hyjiacan/pen/LYRZONE
|
|
126
|
+
|
|
127
|
+
## Development
|
|
128
|
+
|
|
129
|
+
```bash
|
|
130
|
+
yarn
|
|
131
|
+
# start dev server
|
|
132
|
+
yarn serve
|
|
133
|
+
# Build library
|
|
134
|
+
yarn release
|
|
135
|
+
```
|