欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中的模態(tài)對話框組件實現(xiàn)過程

 更新時間：2018年05月01日 11:43:31   作者：fozero  
這篇文章主要介紹了vue中的模態(tài)對話框組件實現(xiàn)過程,通過template定義組件，并添加相應的對話框樣式，需要的朋友可以參考下

寫在前面

對話框是很常用的組件 ， 在很多地方都會用到，一般我們可以使用自帶的alert來彈出對話框，但是假如是設計出的圖該怎么辦呢 ，所以我們需要自己寫一個對話框，并且如果有很多地方都用到，那我們很有必要寫成一個通用的組件形式，在需要的地方之間引用。

現(xiàn)在我們來動手實現(xiàn)一個對話框組件 ，按照之前的習慣，我們先看下實現(xiàn)的效果圖


1.首先，通過template定義一個組件

<template id="dialog">
    <div class="dialog">
      <div class="dialog_mask"></div>
      <div class="dialog_container">
        <div class="dialog_content">
          <div class="dialog_content_top">提示內容</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>

并添加相應的對話框樣式

/*對話框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注冊一個全局Vue組件，我們將這個組件叫做v-dialog，然后通過template指定這個組件

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

3.最后，在我們需要的地方通過v-dialog標簽來引用這個組件

<v-dialog></v-dialog>

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

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

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

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

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

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

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

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

<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">提示內容</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"這幾個屬性，將其值傳遞給對話框組件

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

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

 我們在data中定義這些屬性

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

然后，我們在按鈕點擊提交的時候觸發(fā)彈出對話框事件

submit:function(){
          //彈出對話框組件
          if(!this.isLogin){//未登錄
            this.msg = "請先去登錄再領取金額";
            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 = "領取成功，請在賬戶中心查看";
              this.showDialog = !this.showDialog;
              this.type = 1;
            }
          }else{
            this.msg = "領取金額不能為空";
            this.showDialog = !this.showDialog;
              this.type = 1;
          }
        }

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

那么，我們該怎么關閉這個對話框呢 ，這里就涉及到子組件需要向父組件傳遞信息了

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

代碼如下：

在v-dialog標簽中添加@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(){//關閉對話框
          this.showDialog = false;
        }

這樣同樣也需要注意的是監(jiān)聽函數(shù)closeDialog需要寫成close-dialog形式

ok，以上我們就實現(xiàn)了一個對話框組件

寫在后面

我們還可以使用slot來分發(fā)內容，這樣可以用來混合父組件的內容與子組件自己的模板，從而實現(xiàn)組件的高度復用，使得組件更加靈活關于slot的用法可以查看文檔https://cn.vuejs.org/v2/guide/components.html#使用插槽分發(fā)內容

完整代碼已上傳到github，地址https://github.com/fozero/front-awesome/blob/master/vue/components/dialog.html，歡迎star~,如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

相關文章

  • Vue.js教程之a(chǎn)xios與網(wǎng)絡傳輸?shù)膶W習實踐

    Vue.js教程之a(chǎn)xios與網(wǎng)絡傳輸?shù)膶W習實踐

    這篇文章主要給大家介紹了Vue.js之a(chǎn)xios與網(wǎng)絡傳輸?shù)南嚓P資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟隨小編一起來學習學習吧。
    2017-04-04
  • Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作

    Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作

    這篇文章主要介紹了Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue項目配置router.js流程分析講解

    Vue項目配置router.js流程分析講解

    第一次寫Vue項目，要用到router.js,看了一下官方文檔，還是很懵逼，不知道怎么配置，又去看視頻查資料，最后終于搞定了。話不多說，先上代碼，我再講一些要注意的細節(jié)
    2022-12-12
  • Vue結合leaflet實現(xiàn)克里金插值

    Vue結合leaflet實現(xiàn)克里金插值

    本文主要介紹了Vue結合leaflet實現(xiàn)克里金插值，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2023-06-06
  • vue 獲取及修改store.js里的公共變量實例

    vue 獲取及修改store.js里的公共變量實例

    今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue自定義指令實現(xiàn)卡片翻轉功能

    Vue自定義指令實現(xiàn)卡片翻轉功能

    這篇文章主要給大家介紹了Vue自定義指令實現(xiàn)卡片翻轉功能的代碼示例,文章通過代碼示例講解的非常詳細,對大家的學習或工作有一定的參幫助,需要的朋友可以參考下
    2023-11-11
  • nuxt3中server routes的使用詳解

    nuxt3中server routes的使用詳解

    本文主要介紹了nuxt3中server routes的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-05-05
  • vue+element+electron仿微信實現(xiàn)代碼

    vue+element+electron仿微信實現(xiàn)代碼

    這篇文章主要介紹了vue+element+electron仿微信實現(xiàn),本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-12-12
  • vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼

    vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼

    本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼，具有一定的參考價值，有興趣的可以了解一下
    2017-08-08
  • vue中利用Promise封裝jsonp并調取數(shù)據(jù)

    vue中利用Promise封裝jsonp并調取數(shù)據(jù)

    Promise就是一個給一步操作提供的容器，在這個容器里，有兩個階段無法改變的階段，這兩個階段在文中給大家提到。對vue中利用Promise封裝jsonp并調取數(shù)據(jù) 的相關知識感興趣的朋友，跟隨小編一起看看吧
    2019-06-06

最新評論