這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)使用vue怎么實(shí)現(xiàn)移動(dòng)端模態(tài)框，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站專注于杞縣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供杞縣營銷型網(wǎng)站建設(shè)，杞縣網(wǎng)站制作、杞縣網(wǎng)頁設(shè)計(jì)、杞縣網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務(wù)，打造杞縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供杞縣網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

1-封裝模態(tài)框組件Mydialog (樣式可以自己寫)

.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);
}

2-使用方法1

頁面中引入在進(jìn)行調(diào)用

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

(2)引入組件

 components: {
  Mydialog
 }

(3  在html中插入組件

data中的參數(shù)

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

methods中 在需要出現(xiàn)彈框時(shí)候讓其顯示就好啦

 showDialog()
   this.dialogOption.text = ` 
確認(rèn)拒絕？
 `;
   this.dialogOption.isShowCancelButton = true
   this.showDialog = true;
   this.$refs.mydialog.confirm().then(() => {
    this.showDialog = false;
    this.refuse(id)
   }).catch(() => {
    this.showDialog = false;
   })
  },

3.使用方法2

因?yàn)樵陧?xiàng)目中經(jīng)常要使用到，而且每次使用的時(shí)候都要帶上相同的參數(shù)，所以就封裝了一個(gè)js，（模態(tài)框的工具類），使用的時(shí)候調(diào)用就好了

1)- 新建一個(gè)js文件dialogUtil，復(fù)制下面的代碼就好了

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 || "請輸入彈框標(biāo)題";
  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);
 }

 //彈框回調(diào)
 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：參數(shù)， 類型
 creatByType(args, type) {
  type = !!type ? type : 1;

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

2) 因?yàn)楹芏囗撁娑加玫?，所以讓他成為全局的（在main中引入就好了），那么別的頁面使用就不需要引入了

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

3)在使用的時(shí)候

頁面中引入組件在進(jìn)行調(diào)用

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

(2)引入組件

 components: {
  Mydialog
 }

 （3） 在html中插入組件

在data（）中用對象的形式

  isShowDialog : false,
   dialogOption:{text: '',cancelButtonText: '否',confirmButtonText: '確認(rèn)',isShowCancelButton: false},
   dialogNormal:null,

在mounted中進(jìn)行初始化

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

最后在需要彈框的地方調(diào)用，一句代碼搞定啦

this.dialogNormal.showDialog('dialog要顯示的內(nèi)容',function(){console.log('成功執(zhí)行的')} , function(){console.log('失敗執(zhí)行的')})

上述就是小編為大家分享的使用vue怎么實(shí)現(xiàn)移動(dòng)端模態(tài)框了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。