vue移动端模态框(可传参)的实现


Posted in Javascript onNovember 20, 2019

1-封装模态框组件Mydialog (样式可以自己写)

<template>
 <transition name="modal" tag="div">
  <div class="modal" v-show="visible" transition="fade">
   <div class="modal-dialog">
    <div class="modal-content">
     <!--头部-->
     <div class="modal-header">
      <slot name="header">
       <!-- <p class="title">{{modal.title}}</p> -->
      </slot>
      <a @click="close(0)" class="xd xd-close" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
     </div>
     <!--内容区域-->
     <div class="modal-body">
      <slot name="body">
      </slot>
     </div>
     <!--尾部,操作按钮-->
     <div class="modal-footer">
      <slot name="footer">
       <slot name="button" class="footer">>
        <a v-if="modal.showCancelButton" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button" :class="modal.cancelButtonClass" @click="close">{{modal.cancelButtonText}}</a>
        <a v-if="modal.showConfirmButton" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="button" :class="modal.confirmButtonClass" @click="close()">{{modal.confirmButtonText}}</a>
       </slot>
      </slot>
     </div>
    </div>
   </div>
  </div>
  <!-- <div v-show="show" class="modal-backup"></div> -->
 </transition>
</template>

<script>
export default {
 props: {
  visible: { type: Boolean, default: false },
  options: {
   type: Object,
   default: {}
  }
 },
 // 采用v-bind将visible传入
 methods: {
  ConfirmHandler () {
   this.$emit('update:visible', false);  // 更新visible的值(可选,如果想点击确认之后,进行一些处理再决定关不关闭,可取消在这里更新visible)
   this.$emit('Confirm');  // 传递确认事件
  },
  CancelHandler () {
   this.$emit('update:visible', false);  // 更新visible的值
   this.$emit('Cancel');  // 传递取消事件
  },
  close () {
   this.visible = false;
  }
 },
 /**
  * modal 模态接口参数
  * @param {string} modal.title 模态框标题
  * @param {boolean} modal.showCancelButton 是否显示取消按钮
  * @param {string} modal.cancelButtonClass 取消按钮样式
  * @param {string} modal.cancelButtonText 取消按钮文字
  * @param {string} modal.showConfirmButton 是否显示确定按钮
  * @param {string} modal.confirmButtonClass 确定按钮样式
  * @param {string} modal.confirmButtonText 确定按钮标文字
  */
 computed: {
  /**
   * 格式化props进来的参数,对参数赋予默认值
   */
  modal () {
   let modal = this.options;
   if (modal) {
    modal = {
     title: modal.title || '提示',
     showCancelButton: typeof modal.showCancelButton == 'undefined' ? true : modal.showCancelButton,
     cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
     cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
     showConfirmButton: typeof modal.showConfirmButton == 'undefined' ? true : modal.cancelButtonClass,
     confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
     confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定',
    };
   } else { // 使用时没有传递参数
    modal = {
     title: '提示',
     showCancelButton: true,
     cancelButtonClass: 'btn-default',
     cancelButtonText: '取消',
     showConfirmButton: true,
     confirmButtonClass: 'btn-active',
     confirmButtonText: '确定',
    };
   }
   return modal;
  },
 },

}
</script>

<style lang="scss" scoped>
.modal-enter-active {
 animation: modal-in 0.35s linear;
}

.modal-leave-active {
 animation: modal-in 0.35s reverse linear;
}

@keyframes modal-in {
 0% {
  transform: translateY(-20px) rotateX(-35deg);
  opacity: 0;
 }
 50% {
  opacity: 0.5;
 }
 100% {
  transform: translateY(0) rotateX(0);
  opacity: 1;
 }
}

.modal {
 width: 100%;
 height: 100%;
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 z-index: 1001;
 outline: 0;
 overflow: hidden;
 background-color: rgba(0, 0, 0, 0.8);
}

.modal-dialog {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: auto;
 width: 608px;
 background: #fff;
 border-radius: 20px;
 box-shadow: 0 8px 24px 7px rgba(0, 0, 0, 0.11);
 z-index: 1002;
 overflow: hidden;

 .modal-content {
  > div {
   // padding: 0.15rem 0.4rem;
  }
  .modal-header {
   background: url("../assets/images/tournaments/1.png") no-repeat;
   background-size: cover;
   height: 70px;
   img {
    width: 100%;
   }
  }
  .modal-body {
   // padding: 90px 0 72px 0;
   color: #3c3c43;
   font-size: 25px;
   border-bottom: 1px solid #bdbdbd;
   font-weight: 500;
  }
  .footer {
   a {
    font-size: 30px;
    color: #2c2c2c;
   }
  }
  .modal-footer {
   padding: 30px 0 40px 0;
   color: #3c3c43;
   font-size: 30px;
   font-weight: 500;
  }
 }
}

.modal-backup {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1000;
 background: rgba(0, 0, 0, 0.5);
}
</style>

2-使用方法1

页面中引入在进行调用

(1) import Mydialog from '../carrer/mydialog.vue';

(2)引入组件

components: {
  Mydialog
 }

(3  在html中插入组件

<Mydialog v-show="isShowDialog" :dialog-option="dialogOption" ref="mydialog"></Mydialog>

data中的参数

showDialog: false,
   dialogOption: {
    text: '欢迎',
    cancelButtonText: '否',
    confirmButtonText: '是',
    isShowCancelButton: ''
  },

methods中 在需要出现弹框时候让其显示就好啦

showDialog()
   this.dialogOption.text = ` <p>确认拒绝?</p> `;
   this.dialogOption.isShowCancelButton = true
   this.showDialog = true;
   this.$refs.mydialog.confirm().then(() => {
    this.showDialog = false;
    this.refuse(id)
   }).catch(() => {
    this.showDialog = false;
   })
  },

3.使用方法2

因为在项目中经常要使用到,而且每次使用的时候都要带上相同的参数,所以就封装了一个js,(模态框的工具类),使用的时候调用就好了

1)- 新建一个js文件dialogUtil,复制下面的代码就好了

class normalDialog {
 constructor(args) {
  // console.log("args",args);
  this.parent = args.parent;
  this.isShowDialog = args.isShowDialog;
  this.dialogOption = this.parent[args.dialogOption];
  this.mydialog = this.parent.$refs[args.mydialog];
  // console.log("dialogOption=",this.dialogOption);
 }

 showDialog(text, showCancelButton, success, error) {
  console.log("showDialog=="+text);
  this.dialogOption.text = text || "请输入弹框标题";
  let suc = typeof showCancelButton == "function" ? showCancelButton : success;
  let err = typeof showCancelButton == "function" ? success : error;
  if (typeof showCancelButton != "function") {
   this.dialogOption.isShowCancelButton = !!showCancelButton;
  } else {
   this.dialogOption.isShowCancelButton = true;
  }
  this.parent[this.isShowDialog] = true;
  this.confirm(suc, err);
 }

 //弹框回调
 confirm(success, error) {
  let self = this;
  this.mydialog.confirm().then(() => {
   typeof success == "function" && success();
   self.parent[this.isShowDialog] = false;
  }).catch(() => {
   typeof error == "function" && error();
   self.parent[this.isShowDialog] = false;
  })
 }

 toString() {
  // console.log(this.name + " : " + this.age);
 }

}

export default {
 //args:参数, 类型
 creatByType(args, type) {
  type = !!type ? type : 1;

  switch (type) {
   case 1:
    return new normalDialog(args)
    break;
   case 2:
    break
   default:
    break;
  }
 }
}

2) 因为很多页面都用到,所以让他成为全局的(在main中引入就好了),那么别的页面使用就不需要引入了

import dbDiaLogUtil from './assets/js/dialogUtil'
Vue.prototype.$dbDiaLogUtil = dbDiaLogUtil;

3)在使用的时候

页面中引入组件在进行调用

(1) import Mydialog from '../carrer/mydialog.vue';

(2)引入组件

components: {
  Mydialog
 }

 (3) 在html中插入组件

<Mydialog v-show="isShowDialog" :dialog-option="dialogOption" ref="mydialog"></Mydialog>

在data()中用对象的形式

isShowDialog : false,
   dialogOption:{text: '',cancelButtonText: '否',confirmButtonText: '确认',isShowCancelButton: false},
   dialogNormal:null,

在mounted中进行初始化

this.dialogNormal = this.$dbDiaLogUtil.creatByType({parent:this,isShowDialog:'isShowDialog',dialogOption:'dialogOption',mydialog:'mydialog'});

最后在需要弹框的地方调用,一句代码搞定啦

this.dialogNormal.showDialog('dialog要显示的内容',function(){console.log('成功执行的')} , function(){console.log('失败执行的')})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
Javascript实现计算个人所得税
May 10 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
antd table按表格里的日期去排序操作
Nov 17 Javascript
微信小程序实现上拉加载功能
Nov 20 #Javascript
微信小程序实现锚点功能
Nov 20 #Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 #Javascript
微信小程序实现时间进度条功能
Nov 17 #Javascript
小程序实现投票进度条
Nov 20 #Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 #Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 #Javascript
You might like
php的curl实现get和post的代码
2008/08/23 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php数组合并的二种方法
2014/03/21 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
中药专业大学生医药工作求职信
2013/10/25 职场文书
vue的项目如何打包上线
2022/04/13 Vue.js
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS