怎么在vue中實(shí)現(xiàn)一個(gè)模態(tài)對(duì)話框組件

這篇文章主要介紹了怎么在vue中實(shí)現(xiàn)一個(gè)模態(tài)對(duì)話框組件，億速云小編覺得不錯(cuò)，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨億速云小編來看看吧！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

1.首先，通過template定義一個(gè)組件

<template id="dialog">
    <div class="dialog">
      <div class="dialog_mask"></div>
      <div class="dialog_container">
        <div class="dialog_content">
          <div class="dialog_content_top">提示內(nèi)容</div>
          <div class="dialog_btn">
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">確定</a>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">取消</a>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="login">去登錄</a>
          </div>
        </div>
      </div>
    </div>
  </template>

并添加相應(yīng)的對(duì)話框樣式

/*對(duì)話框style*/
    .dialog{
    }
    .dialog_mask{
      position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
    }
    .dialog_container{
        background: #fff;
  width: 300px;
  height: 120px;
  position: relative;
  border-radius: 10px;
  margin: 0 auto;
    }
    .dialog_content{
      text-align: center;
  padding-top: 30px;
    }
    .dialog_btn{
      margin-top: 20px;
    }
    .dialog_btn a{
      background: yellow;
        padding: 2px 30px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
    width: 50px;
  display: inline-block;
    }
    .dialog_btn a:nth-child(2){
        margin-left: 20px;
    }

2.使用Vue.component注冊(cè)一個(gè)全局Vue組件，我們將這個(gè)組件叫做v-dialog，然后通過template指定這個(gè)組件

Vue.component('v-dialog', {
      template: '#dialog',
      data:function(){
        return {
        }
      },
      methods:{
      },
      created:function(){
      }
    })

3.最后，在我們需要的地方通過v-dialog標(biāo)簽來引用這個(gè)組件

<v-dialog></v-dialog>

創(chuàng)建一個(gè)vue組件步驟大致就是這樣，但是，父組件和子組件該怎么進(jìn)行通信呢？

這里主要使用props傳遞數(shù)據(jù)到子組件

修改如下上面的代碼，添加props屬性

Vue.component('v-dialog', {
      template: '#dialog',
          props:['dialogShow','msg'],
      data:function(){
        return {
        }
      },
      methods:{
      },
      created:function(){
      }
    })

可以看到我們是通過字符串?dāng)?shù)組來定義prop的，除此之外我們還可以用對(duì)象的形式來定義prop，用來為組件的 prop 指定驗(yàn)證規(guī)則，如果類型錯(cuò)誤，在vue中會(huì)有警告，其中 type的值可以是這些：String Number Boolean Function Object Array Symbol

props: {
    name: String,
    showDialog: {
      type: Boolean,
      default: false
    }
   }

在組件模板中通過 v-if="showDialog"判斷是否顯示或隱藏對(duì)話框，通過 v-text="msg"綁定對(duì)話框提示內(nèi)容，

v-if="type==1"用于判斷對(duì)話框類型 ，顯示相應(yīng)的按鈕，代碼如下：

<template id="dialog">
    <div class="dialog" v-if="showDialog">
      <div class="dialog_mask"></div>
      <div class="dialog_container">
        <div class="dialog_content">
          <div class="dialog_content_top" v-text="msg">提示內(nèi)容</div>
          <div class="dialog_btn">
            <a v-if="type==1" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">確定</a>
            <a v-if="type==2" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">取消</a>
            <a v-if="type==2" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="login">去登錄</a>
          </div>
        </div>
      </div>
    </div>
  </template>

在引用組件的地方添加 :show-dialog="showDialog" :msg="msg" :type="type"這幾個(gè)屬性，將其值傳遞給對(duì)話框組件

<v-dialog :show-dialog="showDialog" :msg="msg" :type="type"></v-dialog>

需要注意的是showDialog在組件中需要寫成show-dialog這種形式，不然會(huì)獲取不到數(shù)據(jù)

 我們?cè)赿ata中定義這些屬性

data: {
        msg:'',
        showDialog:false,
        type:1,// 提示類型 1單按鈕提示框 2雙按鈕提示框
      },

然后，我們?cè)诎粹o點(diǎn)擊提交的時(shí)候觸發(fā)彈出對(duì)話框事件

submit:function(){
          //彈出對(duì)話框組件
          if(!this.isLogin){//未登錄
            this.msg = "請(qǐng)先去登錄再領(lǐng)取金額";
            this.showDialog = !this.showDialog;
            this.type = 2;
            return;
          }
          if(this.amount){
            if(this.amount<1 || this.amount>1000){
              this.msg = "輸入金額不能低于1元大于1000";
              this.showDialog = !this.showDialog;
              this.type = 1;
            }else{
              this.msg = "領(lǐng)取成功，請(qǐng)?jiān)谫~戶中心查看";
              this.showDialog = !this.showDialog;
              this.type = 1;
            }
          }else{
            this.msg = "領(lǐng)取金額不能為空";
            this.showDialog = !this.showDialog;
              this.type = 1;
          }
        }

這樣，我們就能彈出對(duì)話框組件了，通過msg設(shè)置不同的提示消息

那么，我們?cè)撛趺搓P(guān)閉這個(gè)對(duì)話框呢 ，這里就涉及到子組件需要向父組件傳遞信息了

主要通過$emit來觸發(fā)父類事件，如：this.$emit('close-dialog');
然后在父類通過v-on來監(jiān)聽子類觸發(fā)的事件，v-on:close-dialog="closeDialog" ,也可簡寫寫成@close-dialog="closeDialog"

代碼如下：

在v-dialog標(biāo)簽中添加@close-dialog="closeDialog"監(jiān)聽子組件觸發(fā)的事件

<v-dialog :show-dialog="showDialog" :msg="msg" :type="type" @close-dialog="closeDialog"></v-dialog>

然后定義closeDialog函數(shù)修改showDialog 的狀態(tài)         

  closeDialog:function(){//關(guān)閉對(duì)話框
          this.showDialog = false;
        }

以上就是億速云小編為大家收集整理的怎么在vue中實(shí)現(xiàn)一個(gè)模態(tài)對(duì)話框組件，如何覺得億速云網(wǎng)站的內(nèi)容還不錯(cuò)，歡迎將億速云網(wǎng)站推薦給身邊好友。