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 相关文章推荐
jquery清空textarea等输入框实现代码
Apr 22 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
JSON stringify方法原理及实例解析
Oct 23 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
PHP 高手之路(三)
2006/10/09 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
webpack4简单入门实例
2018/09/06 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
详解vuex之store源码简单解析
2019/06/13 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书