ui弹框效果的实例代码

日期：2020-12-06 栏目：程序人生浏览：次

最近要写个弹框，发现element-ui弹框样式还可以，就copy下来改吧改吧。也不分步骤详细介绍了直接上代码。

在组件目录中新建文件夹message

我把message目录里的东西给大家贴出来

ui弹框效果的实例代码

message文件夹

ui弹框效果的实例代码

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> <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">{{ message }}</p> <p v-else v-html="message"></p> </slot> <i v-if="showClose" @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 });

ui弹框效果的实例代码