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 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
使用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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
php更新修改excel中的内容实例代码
2014/02/26 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
python Django 创建应用过程图示详解
2019/07/29 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
医院学雷锋活动策划方案
2014/02/15 职场文书
党员承诺书格式
2014/05/21 职场文书
应届生求职信范文
2014/06/30 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript