Vue之简易弹窗组件
组件模板
Notice.vue
<template>
<div class="box" v-if="isShow">
<h3>{ { title}}</h3>
<p class="box-content">{ { message}}</p>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ""
},
message: {
type: String,
default: ""
},
duration: {
type: Number,
default: 1000
}
},
data() {
return {
isShow: false
};
},
methods: {
show() {
this.isShow = true;
setTimeout(this.hide, this.duration);
},
hide() {
this.isShow = false;
this.remove();
}
}
};
</script>
<style>
.box {
position: fixed;
width: 100%;
top: 16px;
left: 0;
text-align: center;
pointer-events: none;
background-color: #fff;
border: grey 3px solid;
box-sizing: border-box;
}
.box-content {
width: 200px;
margin: 10px auto;
font-size: 14px;
padding: 8px 16px;
background: #fff;
border-radius: 3px;
margin-bottom: 8px;
}
</style>
创建组件实例
create.js
import Vue from "vue";
// 传递一个组件配置,返回一个组件实例,并且挂载它到body上
function create(Component, props) {
// 组件实例创建
const Ctor = Vue.extend(Component);
const comp = new Ctor({ propsData: props})
comp.$mount()
// dom追加
document.body.appendChild(comp.$el)
// 获取组件实例
comp.remove = () => {
document.body.removeChild(comp.$el)
comp.$destroy()
}
return comp
}
export default create;
编写插件,挂载到vue原型上,便于全局调用
notice.js
import Notice from "../components/Notice.vue"
import create from "../utils/create"
export default {
install(Vue){
Vue.prototype.$notice = function(options){
create(Notice,options).show();
}
}
}
main.js引入使用
import notice from './plugins/notice.js'
Vue.use(notice)
组件内调用
this.$notice({
title: "请求成功",
message: "成功",
duration: 3000,
})
效果展示
还没有评论,来说两句吧...