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 相关文章推荐
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
Javascript创建类和对象详解
May 31 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
JavaScript实现移动小精灵的案例代码
Dec 12 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
Zend Guard一些常见问题解答
2008/09/11 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
python实现微信远程控制电脑
2018/02/22 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python for循环及基础用法详解
2019/11/08 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
2015年幼儿园班主任工作总结
2015/05/12 职场文书
python垃圾回收机制原理分析
2022/04/13 Python