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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
js计算精度问题小结
Apr 22 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
Js apply方法详解
Feb 16 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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+mysql查询优化简单实例
2015/01/13 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
python区分不同数据类型的方法
2019/10/14 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python如何定义有默认参数的函数
2020/08/10 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
美国在线宠物商店:Chewy
2019/01/12 全球购物
后进生转化工作制度
2014/01/17 职场文书
党的生日演讲稿
2014/09/10 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript