vue函数组件
vue函数组件有时候我们需要在非vue文件使用组件,这时候我们可以通过vue插件的方式使用一、js加载文件import Vue from 'vue';import toast from'./index.vue';const ToastConstructor = Vue.extend(toast);let toastPool = [];let instance;let install...
·
vue函数组件
有时候我们需要在非vue文件使用组件,这时候我们可以通过vue插件的方式使用
一、js加载文件
import Vue from 'vue';
import toast from'./index.vue';
const ToastConstructor = Vue.extend(toast);
let toastPool = [];
let instance;
let installed = false;
//安装组件
const install = function (Vue, config = {}) {
if (installed) return;
console.log(installed);
Vue.component(toast.name, toast);
installed = true;
};
install(Vue);
let getAnInstance = () => {
if (toastPool.length > 0) {
let instance = toastPool[0];
toastPool.splice(0, 1);
return instance;
}
return new ToastConstructor({
el: document.createElement('div')
});
};
let Toast = (options = {}) => {
console.log('Toast', options);
let duration = options.duration || 3000;
let instance = getAnInstance();
instance.closed = false;
clearTimeout(instance.timer);
instance.message = typeof options === 'string' ? options : options.message;
instance.position = options.position || 'middle';
instance.className = options.className || '';
instance.type = options.type || '';
instance.iconClass = options.iconClass || '';
instance.duration = duration / 1000;
document.body.appendChild(instance.$el);
Vue.nextTick(function () {
instance.visible = true;
setTimeout(() => {
instance.visible = false;
if (options.close) {
options.close();
}
}, duration);
});
return instance;
};
export default Toast;
二、vue件
<template>
<div class="toast " :class="position " v-if="visible" :style="style()">
<span class="toast-msg" :class="type">{{message}}span>
div>
template>
<style>
@keyframes toastKF {
0% {
opacity: 0;
}
25% {
opacity: 1;
z-index: 9999
}
50% {
opacity: 1;
z-index: 9999
}
75% {
opacity: 1;
z-index: 9999
}
100% {
opacity: 0;
z-index: 0
}
}
style>
<style scoped lang="less">
.toast {
opacity: 0;
position: fixed;
color: #fff;
width: 100%;
text-align: center;
&.top {
top: 5%;
}
&.bottom {
bottom: 5%;
}
&.middle {
top: 50%;
}
.toast-msg {
background-color: rgba(0, 0, 0, 0.7);
padding: 8px 15px;
border-radius: 4px;
max-width: 80%;
display: inline-block;
margin: auto;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.danger {
background: red;
color: #fff;
}
&.success {
background: #70ca63;
color: #fff;
}
&.primary {
background: #3bafda;
color: #fff;
}
&.warning {
background: #f6bb42;
color: #fff;
}
}&.toastAnimate {
animation: toastKF 3s;
}
}
style>
<script type="text/babel">
export default {
name: 'toast',
props: {
duration: {
type: Number,
default: 2
},
type: {
type: String,
default: 'primary'
},
message: {
type: String,
default: ''
},
position: {
type: String,
default: 'middle'
}
},
mounted(){
console.log('mounted');
},
watch: {
duration(){
this.toastAnimate = `animation: toastKF ${this.duration}s;`;
}
},
data() {
return {
el: this.$el,
visible: false,
toastAnimate: `animation: toastKF ${this.duration}s;`
};
},
methods: {
style(){
if (this.visible) {
return this.toastAnimate;
}
} },
computed: {}
};
script>
三、使用
import Toast from '../../../../components/toast/index.js';
Toast({
message: msg,
type: 'warning'
});
更多推荐
已为社区贡献1条内容
所有评论(0)