這次給大家?guī)韛ue.extend實(shí)現(xiàn)alert模態(tài)框彈窗步驟詳解，vue.extend實(shí)現(xiàn)alert模態(tài)框彈窗的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

alert.js文件代碼import Vue from 'vue'

// 創(chuàng)建組件構(gòu)造器

const alertHonor = Vue.extend(require('./alert.vue'));

var currentMsg = {callback:function(){

}}

export default function(options){

var alertComponent = new alertHonor({el: document.createElement('p')});

alertComponent.title = options.title;

alertComponent.ranking = options.ranking;

// 把a(bǔ)lertHonor.vue加入body中

alertComponent.$appendTo(document.body);

// 回調(diào)函數(shù)

alertComponent.callback = function(action) {

if (action == 'share') {

options.share();

}

};

}

alert.vue代碼

升級(jí)通知

分享

{{title}}

{{ranking}}

export default{

props:{

img:{type:String}, //圖片

title:{type:String}, //達(dá)人昵稱

ranking:{type:String}, //排名

share:{type:Function}, //分享

},

data(){

return{

showAlertHonor:true

}

},

methods:{

alertHonorClick(){ //點(diǎn)擊其他區(qū)域

this.showAlertHonor = false; //關(guān)閉整個(gè)窗口

},

honorClose(){ //點(diǎn)擊關(guān)閉圖標(biāo)

this.showAlertHonor = false;

},

handleActions(action){

this.callback(action);

}

}

}

引用頁面代碼

import AlertHonor from '../alert.js'

export default{

data(){

return{

title:'我的榮譽(yù)'

}

},

ready(){

},

methods:{

back(){

alert(1)

},

submit(){

var vm = this;

AlertHonor({

title:'拜訪達(dá)人',

ranking:'您在全國(guó)排名第99',

share: function(){

vm.share();

}

});

},

share(){ //點(diǎn)擊分享

alert('分享');

},

}

}

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

Vue實(shí)現(xiàn)PopupWindow組件使用步驟解析

vue彈窗組件使用步驟詳解

總結(jié)

以上是生活随笔為你收集整理的vue弹出alert_vue.extend实现alert模态框弹窗步骤详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。