快捷導(dǎo)航

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

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

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

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

<!--查看槽點(diǎn)對話框-->
<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)聽數(shù)據(jù)變化，及時(shí)更新。所以在使用的時(shí)候就很方便了，在component注冊組件之后：

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

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

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

您可能感興趣的文章:

相關(guān)文章

關(guān)于vue.js v-bind 的一些理解和思考
本篇文章主要介紹了關(guān)于vue.js v-bind 的一些理解和思考，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
基于Vue實(shí)現(xiàn)微信小程序的圖文編輯器
這篇文章主要介紹了基于Vue實(shí)現(xiàn)微信小程序的圖文編輯器,由于微信小程序不能使用常規(guī)的圖文編輯器(比如百度的UEditor )編輯新聞內(nèi)容之類的，所以用vue寫了個(gè)針對小程序用的圖文編輯器需要的朋友可以參考下
2018-07-07
vue使用動(dòng)畫實(shí)現(xiàn)滾動(dòng)表格效果
這篇文章主要為大家詳細(xì)介紹了vue使用動(dòng)畫實(shí)現(xiàn)滾動(dòng)表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue3 中的 Vue-Router 和 VueX詳解
VueX 提供了一個(gè)全局都可以使用的數(shù)據(jù)管理倉庫，不用考慮父子傳值之類的問題，并且可以跨頁面?zhèn)鬟f數(shù)據(jù)，提高了可維護(hù)性，這篇文章主要介紹了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以參考下
2022-12-12
Vue3 + TypeScript 開發(fā)總結(jié)
本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內(nèi)容，感興趣的話一起來看看吧
2021-08-08
Vue項(xiàng)目中使用Base64
在vue項(xiàng)目中有時(shí)會(huì)使用到Base6464轉(zhuǎn)碼,現(xiàn)將自己使用的一種方法記錄下來,對vue使用Base64相關(guān)知識(shí)感興趣的朋友一起看看吧
2024-02-02
axios中post請求json和application/x-www-form-urlencoded詳解
Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請求的庫,相比于原生的XMLHttpRequest對象,axios簡單易用,下面這篇文章主要給大家介紹了關(guān)于axios中post請求json和application/x-www-form-urlencoded的相關(guān)資料,需要的朋友可以參考下
2022-10-10
Vue關(guān)閉當(dāng)前彈窗頁面的兩種方式
這篇文章主要給大家介紹了關(guān)于Vue關(guān)閉當(dāng)前彈窗頁面的兩種方式,這是最近項(xiàng)目中遇到的一個(gè)需求,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
vue運(yùn)行環(huán)境搭建全過程
這篇文章主要介紹了vue運(yùn)行環(huán)境搭建全過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
聊聊對Vue中的keep-alive的理解
keepalive?是?Vue?內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染，也就是所謂的組件緩存，這篇文章主要介紹了說說你對Vue的keep-alive的理解,需要的朋友可以參考下
2022-11-11