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 相关文章推荐
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
几种tab切换详解
Feb 03 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
js常用代码段整理
2011/11/30 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
input框中的name和id的区别
2016/11/16 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
python3 xpath和requests应用详解
2020/03/06 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
Django中ORM的基本使用教程
2020/12/22 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
十佳教师事迹材料
2014/01/11 职场文书
上班看电影检讨书
2014/02/12 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
反对邪教标语
2014/06/30 职场文书
优秀团支部申报材料
2014/12/26 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js