本文通过Vue.extend创建组件构造器的方法写弹窗组件，供大家参考，具体内容如下
alert.js文件代码
import Vue from 'vue'// 创建组件构造器const alertHonor = Vue.extend(require('./alert.vue'));
var currentMsg = {
callback:function(){
}
}
export default function(options){
var alertComponent = new alertHonor({
el: document.createElement('div')}
);
alertComponent.title = options.title;
alertComponent.ranking = options.ranking;
// 把alertHonor.vue加入body中 alertComponent.$appendTo(document.body);
// 回调函数 alertComponent.callback = function(action) {
if (action == 'share') {
options.share();
}
}
;
}
alert.vue代码
<template> <div class="alertHonor" v-if="showAlertHonor"> <div class="alertHonorBox" @click="alertHonorClick"></div> <div class="honorWindow"> <div class="honorClose" @click="honorClose"></div> <div class="honorBg"> <div class="honorShare"> <div class="honorBgLeft">升级通知</div> <div class="honorBgRight" @click='handleActions("share")'>分享</div> </div> <div class="honorText">{
{
title}
}
</div> </div> <div class="honorRanking"> {
{
ranking}
}
</div> </div> </div></template><script> export default{
props:{
img:{
type:String}
, //图片 title:{
type:String}
, //达人昵称 ranking:{
type:String}
, //排名 share:{
type:Function}
, //分享 }
, data(){
return{
showAlertHonor:true }
}
, methods:{
alertHonorClick(){
//点击其他区域 this.showAlertHonor = false;
//关闭整个窗口 }
, honorClose(){
//点击关闭图标 this.showAlertHonor = false;
}
, handleActions(action){
this.callback(action);
}
}
}
</script>
引用页面代码
<script> import AlertHonor from '../alert.js' export default{
data(){
return{
title:'我的荣誉' }
}
, ready(){
}
, methods:{
back(){
alert(1) }
, submit(){
var vm = this;
AlertHonor({
title:'拜访达人', ranking:'您在全国排名第99', share: function(){
vm.share();
}
}
);
}
, share(){
//点击分享 alert('分享');
}
, }
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vue实现模态框的通用写法推荐
- Vue.js弹出模态框组件开发的示例代码
- 利用vue实现模态框组件
- vue中的模态对话框组件实现过程
