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 相关文章推荐
通过javascript把图片转化为字符画
Oct 24 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
微信小程序实现菜单左右联动
May 19 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扩展ZF――Validate扩展
2008/01/10 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
python statsmodel的使用
2020/12/21 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
鲜花方阵解说词
2014/02/13 职场文书
我爱我家教学反思
2014/05/01 职场文书
安全生产宣传标语
2014/06/06 职场文书
护林防火标语
2014/06/27 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python