vue项目中仿element-ui弹框效果的实例代码


Posted in Javascript onApril 22, 2019

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

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

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

vue项目中仿element-ui弹框效果的实例代码

message文件夹

vue项目中仿element-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 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
});

vue项目中仿element-ui弹框效果的实例代码

type为success

vue项目中仿element-ui弹框效果的实例代码

type为warning

vue项目中仿element-ui弹框效果的实例代码

type为info

vue项目中仿element-ui弹框效果的实例代码

type为errpr

小icon的图片用自己的图片哦

总结

以上所述是小编给大家介绍的vue项目中仿element-ui弹框效果的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
ES6的解构赋值实例详解
May 06 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 #Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 #Javascript
详解Vue依赖收集引发的问题
Apr 22 #Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 #Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 #Javascript
深入理解vue中的slot与slot-scope
Apr 22 #Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 #Javascript
You might like
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
php数字游戏 计算24算法
2012/06/10 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
PHP 断点续传实例详解
2017/11/11 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
详解Python中dict与set的使用
2015/08/10 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
常用的10个Python实用小技巧
2020/08/10 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
车祸赔偿收入证明
2014/01/09 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
2014年工程工作总结
2014/11/25 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书