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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
jQuery入门知识简介
Mar 04 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python assert的用处示例详解
2019/04/01 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
电子商务专业毕业生求职信
2014/06/12 职场文书
银行实习推荐信
2015/03/27 职场文书
员工升职自荐信
2015/03/27 职场文书