vue彈窗組件的實(shí)現(xiàn)示例代碼

更新時(shí)間：2018年09月10日 13:46:51 作者：妹紙前端

這篇文章主要介紹了vue彈窗組件的實(shí)現(xiàn)示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

vue彈窗組件的樣子

我們先看一下，我們要實(shí)現(xiàn)出來(lái)的彈窗組件長(zhǎng)什么樣子：

吶，我們要用vue組件實(shí)現(xiàn)的彈窗就是這個(gè)樣子，跟我們用js插件實(shí)現(xiàn)的效果一樣，下面我們開(kāi)始講述怎么實(shí)現(xiàn)一個(gè)通用的vue彈窗組件。

實(shí)現(xiàn)vue彈窗組件需要的知識(shí)

是vue組件，當(dāng)然最基礎(chǔ)的是vue的知識(shí)，我假設(shè)大家是有一定vue功底的，然后你還需要了解：

1、vue的事件系統(tǒng)，vue組件間的單項(xiàng)數(shù)據(jù)流，props從父組件向子組件傳遞數(shù)據(jù)，子組件通過(guò)事件emit向父組件傳遞事件，父組件通過(guò)on監(jiān)聽(tīng)子組件的事件來(lái)處理具體事務(wù)。

2、具名插槽slot，通過(guò)name屬性來(lái)接收不同的父組件傳遞過(guò)來(lái)的內(nèi)容，具名插槽接收兩個(gè)數(shù)據(jù)，一是彈窗的標(biāo)題，二是彈窗的顯示內(nèi)容。

vue彈窗組件的實(shí)現(xiàn)代碼

vue彈窗的具體實(shí)現(xiàn)代碼采用單頁(yè)面組件的形式寫(xiě)的，具體代碼如下：

<template>
  <div class='md-cont' v-show='showstate'>
    <div class='md-wrapper' >
      <div class='md-title'>
      <slot name='tlt' >
        標(biāo)題
      </slot>
      </div>
      <div class='md-text'>
      <slot name='text' >
        這里是彈框內(nèi)容
      </slot>
      </div>
      <div class='footer'>
        <div v-if='type=="confirm"' @click='tocancel' class='md-btn'>取消</div>
        <div class='md-btn' @click='took'>確定</div>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  name:'modal',
  props:['type','showstate'],
  methods:{
    tocancel:function(){
      this.$emit('tocancel');
    },
    took:function(){
      this.$emit('took');
    }
  }
}
</script>
<style scoped>
.md-cont{position:fixed;left:0;right: 0;top:0;bottom: 0;
  z-index: 500;background:rgba(0,0,0,0.3);text-align:center;
  overflow: hidden;white-space:nowrap;}
.md-cont:after{content:"";display:inline-block;width:0;
height:100%;visibility: hidden;vertical-align:middle;}
.md-wrapper{display:inline-block;vertical-align:middle;
  background:#fff;color:#333333;font-size:0.34rem;
  padding-top:0.2rem;border-radius: 0.1rem;max-width:100%;}
.md-title{font-size:0.34rem;text-align:center;line-height:0.6rem;}
.md-text{font-size:0.25rem;text-align:center;line-height:0.4rem;padding:0.2rem 0.5rem;}
.footer{display:flex;border-top:0.01rem solid #E5E5E5;
  line-height:0.88rem;color:#488BF1;font-size:0.32rem;}
.md-btn{flex:1;}
.md-btn +.md-btn{border-left:0.01rem solid #E5E5E5;}
</style>

組件中模版代碼很簡(jiǎn)單，其中主要的就是兩個(gè)具名插槽slot；兩個(gè)按鈕觸發(fā)兩個(gè)事件，這兩個(gè)事件通過(guò)$emit上傳到父組件。根據(jù)父組件傳遞過(guò)來(lái)的type屬性來(lái)決定是否顯示取消按鈕。

對(duì)于具名插槽和$emit事件系統(tǒng)不理解的可以去vue官網(wǎng)查看，這里不多做贅述了。

vue彈窗組件的使用

在父組件里面使用彈窗組件也是很方便的，如果你是bootstrap的使用者或者愛(ài)好者，你會(huì)對(duì)這種使用方式感到熟悉和親切。

下面我展示使用代碼：

<template>
<div>
  <div class='aft-box'>
      <div class='aft-flex aft-pd'>
        <div class='aft-btn' @click='alerts'>alert</div>
      </div>
      <div class='aft-flex aft-pd'>
        <div class='aft-btn aft-blue' @click='confirms'>confirm</div>
      </div>
  </div>
  <Modal type='alert' @took='okfall' :showstate='showa'>
      <span slot='tlt'>提示</span>
      <div slot='text'>我是一個(gè)alert提示彈窗</div>
  </Modal>
  <Modal type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'>
      <span slot='tlt'>確認(rèn)</span>
      <div slot='text'>{{msg}}</div>
  </Modal>
</div>
</template>
<script>
import Modal from './modal'
export default{
  name:'container',
  components:{
    Modal
  },
  data(){
    return {
      showa:false,
      showc:false,
      msg:"我有兩個(gè)按鈕，是confirm確認(rèn)彈窗"
    }
  },
  methods:{
    alerts(){
      this.showa=true;
    },
    confirms(){
      this.showc=true;
      this.msg="我有兩個(gè)按鈕，是confirm確認(rèn)彈窗";
    },
    okfall(){
      this.showa=false;
    },
    okfall2(){
      this.msg="點(diǎn)擊了確認(rèn)按鈕，2秒后彈窗關(guān)閉";
      setTimeout(()=>{
        this.showc=false;
      },2000);
    },
    cancelfall(){
      this.showc=false;
    }
 
  }
}
</script>
<style>
.aft-box{display:flex;line-height:0.65rem;font-size:0.26rem;color:#333;padding:0.5rem 0;}
.aft-flex{flex:1;}
.aft-pd{padding:0.5rem 0.1rem;}
.aft-btn{display:block;line-height:0.88rem;text-align:Center;
  color:#fff;border-radius: 0.12rem;background:#FFB63B ;}
.aft-blue{background:#488BF1;}
</style>

這里我們需要先通過(guò)import引入modal彈窗組件，再在父組件里面通過(guò)components屬性聲明使用此組件。

然后在template模版中通過(guò)Modal標(biāo)簽使用彈窗組件；

在彈窗組件上通過(guò)type來(lái)設(shè)置彈窗的特性；

通過(guò):showstate屬性來(lái)標(biāo)識(shí)彈窗的打開(kāi)和關(guān)閉；

通過(guò)@took來(lái)設(shè)置確定按鈕點(diǎn)擊后的操作；

通過(guò)@tocancel來(lái)確定取消按鈕點(diǎn)擊后的操作;

在Modal標(biāo)簽中通過(guò)內(nèi)容上的slot屬性來(lái)標(biāo)識(shí)內(nèi)容是標(biāo)題還是顯示內(nèi)容，slot='tlt'中的文字將會(huì)作為彈窗標(biāo)題顯示，slot='text'的文字將會(huì)作為彈窗的正文顯示；

在這里你也可以通過(guò){{msg}}插值表達(dá)式的形式來(lái)把內(nèi)容和父組件的數(shù)據(jù)綁定到一塊；

在script中我們通過(guò)data中的兩個(gè)變量showa和showb來(lái)標(biāo)識(shí)彈框的打開(kāi)和關(guān)閉；

頁(yè)面中的按鈕事件中通過(guò)設(shè)置showa和showb的值來(lái)打開(kāi)和關(guān)閉彈窗。

vue彈窗組件結(jié)語(yǔ)

這樣一個(gè)vue彈窗組件就算完成了，使用簡(jiǎn)單靈活，哪里需要引入到里面就可以使用了，而且其中的內(nèi)容和標(biāo)題可以自由設(shè)置，而且vue彈窗組件相對(duì)于js彈窗插件來(lái)說(shuō)實(shí)現(xiàn)起來(lái)更簡(jiǎn)單，更清晰。只是我們需要很好的掌握vue提供的特性以及能夠按照vue所在的思想框架進(jìn)行思考。而vue開(kāi)中的重要思想就是：我們操作數(shù)據(jù)，頁(yè)面變化dom操作交給vue來(lái)處理。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: