vue项目中仿element-ui弹框效果的实例代码
最近要写个弹框,发现element-ui
弹框样式还可以,就copy下来改吧改吧。也不分步骤详细介绍了直接上代码。
在组件目录中新建文件夹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
<template> <transition name="message-fade"> <div :class="[ 'message', type && !iconClass ? `message-${ type }` : '', center ? 'center' : '', showClose ? 'closable' : '', customClass ]" v-show="visible" @mouseenter="clearTimer" @mouseleave="startTimer"> <i :class="iconClass" v-if="iconClass"></i> <i :class="typeClass" v-else></i> <slot> <p v-if="!dangerouslyUseHTMLString" class="message-content">{{ message }}</p> <p v-else v-html="message" class="message-content"></p> </slot> <i v-if="showClose" class="message-close-btn icon-close" @click="close"></i> </div> </transition> </template> <script> const typeMap = { success: 'success', info: 'info', warning: 'warning', error: 'error' }; export default { data () { return { visible: false, message: '', duration: 1000, type: 'info', iconClass: '', customClass: '', onClose: null, showClose: false, closed: false, timer: null, dangerouslyUseHTMLString: false, center: false } }, computed: { typeClass() { return this.type && !this.iconClass ? `message-icon icon-${ typeMap[this.type] }` : ''; } }, watch: { closed(newVal) { if (newVal) { this.visible = false; this.$el.addEventListener('transitionend', this.destroyElement); } } }, methods: { destroyElement() { this.$el.removeEventListener('transitionend', this.destroyElement); this.$destroy(true); this.$el.parentNode.removeChild(this.$el); }, close() { this.closed = true; if (typeof this.onClose === 'function') { this.onClose(this); } }, clearTimer() { clearTimeout(this.timer); }, startTimer() { if (this.duration > 0) { this.timer = setTimeout(() => { if (!this.closed) { this.close(); } }, this.duration); } }, keydown(e) { if (e.keyCode === 27) { // esc关闭消息 if (!this.closed) { this.close(); } } } }, mounted() { this.startTimer(); document.addEventListener('keydown', this.keydown); }, beforeDestroy() { document.removeEventListener('keydown', this.keydown); } } </script> <style lang="less"> .message { min-width: 200px; box-sizing: border-box; border-radius: 3px; border: 1px solid #ebeef5; position: fixed; left: 50%; top: 20px; transform: translateX(-50%); background-color: #edf2f3; transition: opacity 0.3s, transform .4s; overflow: hidden; padding: 10px; display: flex; align-items: center; } .message-icon{ width: 15px; height: 15px; border-radius: 100%; background: #fff; display: inline-block; margin-right: 10px; &.icon-success{ background: url("../../../assets/image/icon-success.png") no-repeat center center; background-size: auto 100%; } &.icon-error{ background: url("../../../assets/image/icon-error.png") no-repeat center center; background-size: auto 100%; } &.icon-info{ background: url("../../../assets/image/icon-info.png") no-repeat center center; background-size: auto 100%; } &.icon-warning{ background: url("../../../assets/image/icon-warning.png") no-repeat center center; background-size: auto 100%; } } .message-success{ background: #f2f8ec; border-color: #e4f2da; .message-content{ color: #7ebe50; } } .message-error{ background: #fcf0f0; border-color: #f9e3e2; .message-content{ color: #e57470; } } .message-warning{ background: #fcf6ed; border-color: #f8ecda; .message-content{ color: #dca450; } } .message-info{ background: #eef2fb; border-color: #ebeef4; .message-content{ color: #919398; } } .message-fade-enter, .message-fade-leave-active { opacity: 0; transform: translate(-50%, -100%); } </style>
以上就是封装的所有代码
接下来就来看看如何引用
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弹框效果的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
赞 (0)