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 相关文章推荐
jQuery的each终止或跳过示例代码
Dec 12 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 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
PHP实现文件安全下载
2006/10/09 PHP
我常用的几个类
2006/10/09 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
php cli配置文件问题分析
2015/10/15 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python探索之自定义实现线程池
2017/10/27 Python
python简单区块链模拟详解
2019/07/03 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python如何实现邮件功能
2020/05/27 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
关于打架的检讨书
2014/01/17 职场文书
组织鉴定材料
2014/06/02 职场文书
市场策划求职信
2014/08/07 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技