DDR爱好者之家

vue移动端模态框(可传参)的实现
站长资源 2024/11/24 佚名
51 1538
DDR爱好者之家 Design By 杰米

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' "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" "function" "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 "htmlcode">



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('失败执行的')})






以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米