快捷導(dǎo)航

vue實(shí)現(xiàn)模態(tài)框的通用寫(xiě)法推薦

更新時(shí)間：2018年02月26日 10:03:59 作者：_小小黑

下面小編就為大家分享一篇vue實(shí)現(xiàn)模態(tài)框的通用寫(xiě)法推薦，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在看了element組件的源碼后發(fā)現(xiàn)，所有模態(tài)框其實(shí)實(shí)現(xiàn)方法都差不多，主要用到了vue在組件化上的雙向綁定。代碼：

<!--查看槽點(diǎn)對(duì)話框-->
<template lang="html">
 <transition name="el-fade-in-linear">
  <div draggable="true" @drag="mouseDrag" @dragend="mouseDragend" :style="dialogStyle" class="g-dialog-wrapper" v-show="myVisible">
   <div class="g-dialog-header">
    <div class="left">
     模態(tài)框
    </div>
    <div class="right">
     <i class="g-times-icon fa fa-times" @click="myVisible=false" aria-hidden="true"></i>
    </div>
   </div>
   <div class="g-dialog-container">
   </div>
  </div>
 </transition>
</template>
<script>
 export default {
  props: {
   visible: Boolean
  },
  created() {
  },
  data() {
   return {
    myVisible: this.visible,
  },
  computed: {},
  methods: {
  },
  components: {},
  watch: {
   myVisible: function (val) {
    this.$emit('update:visible', val)
   },
   visible: function (val) {
    this.myVisible = val
   }
  }
 }
</script>
<style lang="css" scoped>
</style>

上面代碼主要的部分是watch里面的代碼，實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)據(jù)變化，及時(shí)更新。所以在使用的時(shí)候就很方便了，在component注冊(cè)組件之后：

<g-key-dialog :visible.sync="keyDialogVisible"></g-key-dialog>

注：這里必須使用sync，要不是無(wú)法雙向綁定的

以上這篇vue實(shí)現(xiàn)模態(tài)框的通用寫(xiě)法推薦就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue或css動(dòng)畫(huà)實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue或css動(dòng)畫(huà)實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
基于Echarts圖表在div動(dòng)態(tài)切換時(shí)不顯示的解決方式
這篇文章主要介紹了基于Echarts圖表在div動(dòng)態(tài)切換時(shí)不顯示的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue vue-Router默認(rèn)hash模式修改為history需要做的修改詳解
今天小編就為大家分享一篇vue vue-Router默認(rèn)hash模式修改為history需要做的修改詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue動(dòng)態(tài)樣式方法實(shí)例總結(jié)
在vue項(xiàng)目中,很多場(chǎng)景要求我們動(dòng)態(tài)改變?cè)氐臉邮?下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
Vuex modules模式下mapState/mapMutations的操作實(shí)例
這篇文章主要介紹了Vuex modules 模式下 mapState/mapMutations 的操作實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)
這篇文章主要介紹了ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
VUE中的打包刪除文件、圖片的HASH碼
這篇文章主要介紹了VUE中的打包刪除文件、圖片的HASH碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue3?計(jì)算屬性的用法詳解
學(xué)過(guò)?vue2?的寶子們應(yīng)該都清楚，計(jì)算屬性這個(gè)東西在項(xiàng)目開(kāi)發(fā)過(guò)程中使用的還是比較頻繁的，使用頻率相對(duì)來(lái)說(shuō)比較高。本文就來(lái)為大家介紹一下Vue3中計(jì)算屬性的用法，需要的可以參考一下
2022-07-07
vue單頁(yè)面應(yīng)用部署配置詳解
本文主要介紹了vue單頁(yè)面應(yīng)用部署配置詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue3使用videojs播放m3u8格式視頻教程
m3u8是一種基于HTTP Live Streaming（HLS）文件視頻格式,它主要是存放整個(gè)視頻的基本信息和分片(Segment)組成,下面這篇文章主要給大家介紹了關(guān)于vue3使用videojs播放m3u8格式視頻的相關(guān)資料,需要的朋友可以參考下
2023-06-06