vue项目中仿element-ui弹框效果的实例代码
最近要写个弹框,发现element-ui
弹框样式还可以,就copy下来改吧改吧。也不分步骤详细介绍了直接上代码。
10余年的宽城网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整宽城建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“宽城网站设计”,“宽城网站推广”以来,每个客户项目都认真落实执行。
在组件目录中新建文件夹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
调用
在你需要的页面调用
this.$message({ message: '提示消息', type:'error' //type有四个值 1.error 2.success 3.info 4.warning });
type为success
type为warning
type为info
type为errpr
小icon的图片用自己的图片哦
总结
以上所述是小编给大家介绍的vue项目中仿element-ui弹框效果的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
名称栏目:vue项目中仿element-ui弹框效果的实例代码
网页URL:http://myzitong.com/article/jodpgi.html