vue项目中仿element-ui弹框效果的实例代码
(编辑:jimmy 日期: 2024/11/5 浏览:3 次 )
最近要写个弹框,发现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 " 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 "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弹框效果的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
下一篇:对于防止按钮重复点击的尝试详解