vue弹出框组件封装实例代码


Posted in Javascript onOctober 31, 2019

新学vue,参考别人封装弹出层组件。好用!

1.你需要先建一个弹出框的模板:

//首先创建一个mack.vue
<template>
 <div class="mack" v-if="isShow">
  <div class="mackWeb" :style="text.mackStyle">
   <div class="title font_b" v-if="text.title" :style="text.titleStyle">{{text.title.trim()}}</div>
   <div class="mesg font_s" v-if="text.mesg" :style="text.mesgStyle">{{text.mesg.trim()}}</div>
   <div v-html="text.cntMsg"></div>
   <div class="footb font_s">
    <div
     class="foot_l borderlf borderTop"
     @click="cancel"
     v-if="text.cancel"
     :style="text.cancelValStyle"
    >{{text.btn.cancelVal}}</div>
    <div
     class="foot_r borderTop"
     @click="confirm"
     v-if="text.confirm"
     :style="text.confirmValStyle"
    >{{text.btn.confirmVal}}</div>
   </div>
  </div>
 </div>
</template>

//写js
<script>
 export default {
  data() {
   return {
    isShow: true,
    text: {
     title: "",
     mesg: "",
     cnTmesg: "",
     cancel: true,
     confirm: true,
     mackStyle: null,
  titleStyle: null,
  mesgStyle:null,
     cancelValStyle: null,
     confirmValStyle: null,
     btn: {
      confirmVal: "确定",
      cancelVal: "取消"
     }
    }
   };
  },
  methods: {
   cancel() {
    this.isShow = false;
   },
   confirm() {
    this.isShow = false;
   }
  }
};
</script>

//css
<style scoped lang='less'>
 .mack {
 position: fixed;
 width: 100%;
 height: 100%;
 overflow: hidden;
 top: 0;
 left: 0;
 background: rgba(21, 21, 21, 0.7);
 .font_b {
  font-size: 14/50rem;
  color: #231a2f;
 }
 .font_s {
  font-size: 12/50rem;
  color: #655a72;
 }
 .borderTop {
  border-top: 1/50rem solid #e4e4e4;
 }
 .mackWeb {
  background: #ffffff;
  width: 300/50rem;
  min-width: 300/50rem;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .title {
   text-align: center;
   padding: 15/50rem 15/50rem 0 15/50rem;
  }
  .mesg {
   padding: 15/50rem;
   text-align: center;
  }
  .footb {
   display: inline-table;
   width: 100%;
   .borderlf {
    border-right: 1/50rem solid #e4e4e4;
   }
   div {
    display: table-cell;
    box-sizing: border-box;
    text-align: center;
    padding: 10/50rem 0;
   }
  }
 }
}
</style>

2.接着你需要一个js:mackjs.js

import Vue from 'vue';
import confirm from './mack';
let confirmConstructor = Vue.extend(confirm);
let theConfirm = function (text) {
  return new Promise((res, rej) => { //promise封装,ok执行resolve,no执行rejectlet
   let confirmDom = new confirmConstructor({  
    el: document.createElement('div')
   })
   document.body.appendChild(confirmDom.$el); //new一个对象,然后插入body里面
   confirmDom.text = Object.assing( confirmDom.text,text);  //为了使confirm的扩展性更强,这个采用对象的方式传入,所有的字段都可以根据需求自定义
   confirmDom.ok = function () {
    res()
    confirmDom.isShow = false
   }
   confirmDom.close = function () {
    rej()
    confirmDom.isShow = false
   }
  })
 }
 export default theConfirm; 
  //暴露出去,别忘记挂载到vue的原型上 
  //  => 在main.js里面先引入 import theConfirm from './components/confirm/confirm.js'
  //  => 再挂载 Vue.prototype.$confirm = theConfirm;
  //在需要的地方直接用以下方法调用即可:
  //  this.$confirm({
  //   type:'提示',
  //   msg:'是否删除这条信息?',
  //   btn:{
  //     ok:'yes',
  //     no:'no'
  //   }
  // }).then(() => {
  //   console.log('ok')
  // })
  // .catch(() => {
  //   console.log('no')
  // })

-3.你接着需要在main.js导入这个文件

import macksjs from './assets/mackjs'
Vue.prototype.$confirm= macksjs ;

-4.最后在你需要引入的vue文件中直接调用就好了

<button @click="deleteaas">我是弹出框</button>
 methods:{
  deleteaas() {
   this.$confirm({
    title: "addd",
    mesg: "您确定不再关注该客户吗?",
    cntMsg: '<div class="helAA">你好</div>',
    cancelValStyle:{color:'red'},
    btn: {
     confirmVal: "确a定",
     cancelVal: "取a消"
    }
   })
    .then(() => {
     console.log("yes");
     //点击确定之后的处理
    })
    .catch(() => {
     console.log("no");
    });
  }
 }

导入

总结

以上所述是小编给大家介绍的vue弹出框组件封装实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
使用zrender.js绘制体温单效果
Oct 31 #Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 #Javascript
selenium+java中用js来完成日期的修改
Oct 31 #Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 #Javascript
vue项目出现页面空白的解决方案
Oct 31 #Javascript
vue项目引入ts步骤(小结)
Oct 31 #Javascript
微信小程序canvas分享海报功能
Oct 31 #Javascript
You might like
PHP 数组基础知识小结
2010/08/20 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
Ionic快速安装教程
2016/06/03 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
Python入门教程之if语句的用法
2015/05/14 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python中表示字符串的三种方法
2017/09/06 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
python名片管理系统开发
2020/06/18 Python
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
运动会演讲稿
2014/05/07 职场文书
金融专业求职信
2014/08/05 职场文书
咖啡店创业计划书
2014/08/15 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
作文评语集锦
2014/12/25 职场文书
实习证明格式范文
2015/06/16 职场文书
队列队形口号
2015/12/25 职场文书