@lanxuexing/vue2toast 0.0.7 → 1.0.2
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 +151 -29
- package/README.zh-CN.md +168 -0
- package/dist/index.d.ts +64 -0
- package/dist/vue2toast.css +1 -0
- package/dist/vue2toast.es.js +166 -0
- package/dist/vue2toast.umd.js +1 -0
- package/package.json +57 -24
- package/.babelrc +0 -3
- package/dist/vue2toast.js +0 -947
- package/postcss.config.js +0 -5
- package/src/index.html +0 -65
- package/src/lib/index.js +0 -53
- package/src/lib/vue2toast.vue +0 -75
- package/webpack.config.js +0 -33
package/postcss.config.js
DELETED
package/src/index.html
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8" />
|
|
6
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
-
<title>Vue2Toast Demo</title>
|
|
8
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
|
-
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
|
|
10
|
-
<script type="text/javascript" src="../dist/vue2toast.js"></script>
|
|
11
|
-
<style>
|
|
12
|
-
.container {
|
|
13
|
-
margin: 0 auto;
|
|
14
|
-
width: 980px;
|
|
15
|
-
background-color: #fff;
|
|
16
|
-
border: 1px solid #d1d5da;
|
|
17
|
-
border-radius: 3px;
|
|
18
|
-
}
|
|
19
|
-
.content {
|
|
20
|
-
margin: 0 20px;
|
|
21
|
-
}
|
|
22
|
-
</style>
|
|
23
|
-
</head>
|
|
24
|
-
|
|
25
|
-
<body>
|
|
26
|
-
<div class="container" id="app">
|
|
27
|
-
<div class="content">
|
|
28
|
-
<h4>Vue2Toast</h4>
|
|
29
|
-
<ul>
|
|
30
|
-
<li>
|
|
31
|
-
<a href="javascript:void(0);" @click="defaultToast">默认Toast</a>
|
|
32
|
-
</li>
|
|
33
|
-
<li>
|
|
34
|
-
<a href="javascript:void(0);" @click="toast">自定义时长Toast</a>
|
|
35
|
-
</li>
|
|
36
|
-
<li>
|
|
37
|
-
<a href="javascript:void(0);" @click="callbackToast">执行回调函数Toast</a>
|
|
38
|
-
</li>
|
|
39
|
-
</ul>
|
|
40
|
-
</div>
|
|
41
|
-
</div>
|
|
42
|
-
|
|
43
|
-
<script>
|
|
44
|
-
new Vue({
|
|
45
|
-
el: '#app',
|
|
46
|
-
methods: {
|
|
47
|
-
defaultToast() {
|
|
48
|
-
this.$toast('Hello, Default Toast');
|
|
49
|
-
},
|
|
50
|
-
toast() {
|
|
51
|
-
this.$toast.show('Hello, Custom Toast', {
|
|
52
|
-
duration: 500
|
|
53
|
-
});
|
|
54
|
-
},
|
|
55
|
-
callbackToast() {
|
|
56
|
-
this.$toast.show('Hello, Custom Toast', function() {
|
|
57
|
-
alert('Hi, everybody, I am callback function');
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
},
|
|
61
|
-
});
|
|
62
|
-
</script>
|
|
63
|
-
</body>
|
|
64
|
-
|
|
65
|
-
</html>
|
package/src/lib/index.js
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import ToastComponent from './vue2toast.vue';
|
|
2
|
-
|
|
3
|
-
let Toast = {};
|
|
4
|
-
Toast.install = function (Vue, options) {
|
|
5
|
-
let opt = {
|
|
6
|
-
duration: 3000, // 时长
|
|
7
|
-
};
|
|
8
|
-
let callback = ''; // 回调函数
|
|
9
|
-
|
|
10
|
-
// 设置用户自定义配置项
|
|
11
|
-
for (const key in options) {
|
|
12
|
-
if (options.hasOwnProperty(key)) {
|
|
13
|
-
const element = options[key];
|
|
14
|
-
opt[key] = element;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
Vue.prototype.$toast = function (message, options) {
|
|
19
|
-
if (typeof options == 'object') {
|
|
20
|
-
for (const key in options) {
|
|
21
|
-
if (options.hasOwnProperty(key)) {
|
|
22
|
-
const element = options[key];
|
|
23
|
-
opt[key] = element;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
} else if (typeof options == 'function') {
|
|
27
|
-
callback = options;
|
|
28
|
-
}
|
|
29
|
-
const ToastController = Vue.extend(ToastComponent);
|
|
30
|
-
const instance = new ToastController().$mount(document.createElement('div'));
|
|
31
|
-
instance.message = message;
|
|
32
|
-
instance.visible = true;
|
|
33
|
-
document.body.appendChild(instance.$el);
|
|
34
|
-
setTimeout(() => {
|
|
35
|
-
instance.visible = false;
|
|
36
|
-
setTimeout(() => {
|
|
37
|
-
document.body.removeChild(instance.$el);
|
|
38
|
-
callback && callback();
|
|
39
|
-
}, 0);
|
|
40
|
-
}, opt.duration);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
// 扩展自定义配置项
|
|
44
|
-
Vue.prototype.$toast['show'] = function (message, options) {
|
|
45
|
-
return Vue.prototype.$toast(message, options);
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
if (typeof window !== 'undefined' && window.Vue) {
|
|
50
|
-
window.Vue.use(Toast);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
export default Toast;
|
package/src/lib/vue2toast.vue
DELETED
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<section class="toast-container">
|
|
3
|
-
<div class="toast" v-bind:class="[visible ? 'fade-in' : 'fade-out']">
|
|
4
|
-
<span class="message">{{message}}</span>
|
|
5
|
-
</div>
|
|
6
|
-
</section>
|
|
7
|
-
</template>
|
|
8
|
-
|
|
9
|
-
<script>
|
|
10
|
-
export default {
|
|
11
|
-
data() {
|
|
12
|
-
return {
|
|
13
|
-
visible: false,
|
|
14
|
-
message: ""
|
|
15
|
-
};
|
|
16
|
-
}
|
|
17
|
-
};
|
|
18
|
-
</script>
|
|
19
|
-
|
|
20
|
-
<style lang='scss'>
|
|
21
|
-
.toast-container {
|
|
22
|
-
position: fixed;
|
|
23
|
-
left: 0;
|
|
24
|
-
top: 0;
|
|
25
|
-
bottom: 0;
|
|
26
|
-
right: 0;
|
|
27
|
-
z-index: 9999 !important;
|
|
28
|
-
display: flex;
|
|
29
|
-
justify-content: center;
|
|
30
|
-
align-items: center;
|
|
31
|
-
.toast {
|
|
32
|
-
width: 180px;
|
|
33
|
-
height: 60px;
|
|
34
|
-
line-height: 60px;
|
|
35
|
-
text-align: center;
|
|
36
|
-
background-color: rgba(0, 0, 0, 0.61);
|
|
37
|
-
border-radius: 10px;
|
|
38
|
-
color: white;
|
|
39
|
-
}
|
|
40
|
-
.fade-in {
|
|
41
|
-
animation-name: fade-in;
|
|
42
|
-
animation-duration: 0.3s;
|
|
43
|
-
animation-fill-mode: both;
|
|
44
|
-
}
|
|
45
|
-
.fade-out {
|
|
46
|
-
animation-name: fade-out;
|
|
47
|
-
animation-duration: 0.3s;
|
|
48
|
-
animation-fill-mode: both;
|
|
49
|
-
}
|
|
50
|
-
.message {
|
|
51
|
-
font-size: 14px;
|
|
52
|
-
color: #fff;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
@keyframes fade-in {
|
|
56
|
-
0% {
|
|
57
|
-
opacity: 0;
|
|
58
|
-
transform: scale(0.7);
|
|
59
|
-
}
|
|
60
|
-
100% {
|
|
61
|
-
opacity: 1;
|
|
62
|
-
transform: scale(1);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
@keyframes fade-out {
|
|
66
|
-
0% {
|
|
67
|
-
opacity: 1;
|
|
68
|
-
transform: scale(1);
|
|
69
|
-
}
|
|
70
|
-
100% {
|
|
71
|
-
opacity: 0;
|
|
72
|
-
transform: scale(0.7);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
</style>
|
package/webpack.config.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
var path = require('path');
|
|
2
|
-
module.exports = {
|
|
3
|
-
entry: './src/lib/index.js',
|
|
4
|
-
output: {
|
|
5
|
-
path: path.join(__dirname, './dist'),
|
|
6
|
-
filename: 'vue2toast.js',
|
|
7
|
-
libraryTarget: 'umd',
|
|
8
|
-
library: 'Vue2Toast'
|
|
9
|
-
},
|
|
10
|
-
module: {
|
|
11
|
-
rules: [
|
|
12
|
-
{
|
|
13
|
-
test: /\.vue$/,
|
|
14
|
-
loader: 'vue-loader',
|
|
15
|
-
exclude: /node_modules/,
|
|
16
|
-
options: {
|
|
17
|
-
loaders: {
|
|
18
|
-
scss: 'style-loader!css-loader!postcss-loader!sass-loader'
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
test: /\.js$/,
|
|
24
|
-
loader: 'babel-loader',
|
|
25
|
-
include: path.join(__dirname, 'src'),
|
|
26
|
-
exclude: /node_modules/,
|
|
27
|
-
query:{
|
|
28
|
-
presets:['env']
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
]
|
|
32
|
-
}
|
|
33
|
-
}
|