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 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
js location.replace与location.reload的区别
Sep 08 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
Node.js的特点详解
Feb 03 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
ajax php 实现写入数据库
2009/09/02 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python中open函数的基本用法示例
2019/09/07 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
新年寄语大全
2014/04/12 职场文书
银行金融服务方案
2014/06/11 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
大学生创业计划书
2014/08/14 职场文书
推荐信范文大全
2015/03/27 职场文书
活动简报范文
2015/07/22 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL