建站
咨詢
售后
建站咨詢
新聞中心
最近要寫個彈框，發(fā)現(xiàn)element-ui彈框樣式還可以，就copy下來改吧改吧。也不分步驟詳細(xì)介紹了直接上代碼。
10余年的寬城網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整寬城建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“寬城網(wǎng)站設(shè)計”,“寬城網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
在組件目錄中新建文件夾message
我把message目錄里的東西給大家貼出來
message文件夾
src文件夾
index.js
import Message from './src/main.js'; export default Message;
mian.js
import Vue from 'vue';
import Main from './main.vue';
let MessageConstructor = Vue.extend(Main);
let instance;
let instances = [];
let seed = 1;
const Message = (options = {}) => {
if (typeof options === 'string') {
options = {
message: options
};
}
let userOnClose = options.onClose;
let id = 'message_' + seed++;
options.onClose = function() {
Message.close(id, userOnClose);
};
instance = new MessageConstructor({
data: options
});
instance.id = id;
instance.vm = instance.$mount();
document.body.appendChild(instance.vm.$el);
instance.vm.visible = true;
instance.dom = instance.vm.$el;
instance.dom.style.zIndex = 999;
instances.push(instance);
return instance.vm;
}
['success', 'warning', 'info', 'error'].forEach(type => {
Message[type] = options => {
if (typeof options === 'string') {
options = {
message: options
};
}
options.type = type;
return Message(options);
};
});
Message.close = function(id, userOnClose) {
for (let i = 0, len = instances.length; i < len; i++) {
if (id === instances[i].id) {
if (typeof userOnClose === 'function') {
userOnClose(instances[i]);
}
instances.splice(i, 1);
break;
}
}
};
Message.closeAll = function() {
for (let i = instances.length - 1; i >= 0; i--) {
instances[i].close();
}
};
export default Message;mian.vue
以上就是封裝的所有代碼
接下來就來看看如何引用
main.js中引入
import Message from '@/components/message/index.js'
Vue.prototype.$message = Message
調(diào)用
在你需要的頁面調(diào)用
this.$message({
message: '提示消息',
type:'error' //type有四個值 1.error 2.success 3.info 4.warning
});
type為success
type為warning
type為info
type為errpr
小icon的圖片用自己的圖片哦
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目中仿element-ui彈框效果的實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
標(biāo)題名稱：vue項(xiàng)目中仿element-ui彈框效果的實(shí)例代碼
標(biāo)題URL：http://www.dlmjj.cn/article/jodpgi.html
