vue實現模態(tài)框的通用寫法推薦
更新時間：2018年02月26日 10:03:59 作者：_小小黑
下面小編就為大家分享一篇vue實現模態(tài)框的通用寫法推薦，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在看了element組件的源碼后發(fā)現，所有模態(tài)框其實實現方法都差不多，主要用到了vue在組件化上的雙向綁定。代碼：
<!--查看槽點對話框-->
<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里面的代碼，實現監(jiān)聽數據變化，及時更新。所以在使用的時候就很方便了，在component注冊組件之后：
<g-key-dialog :visible.sync="keyDialogVisible"></g-key-dialog>
注：這里必須使用sync，要不是無法雙向綁定的
以上這篇vue實現模態(tài)框的通用寫法推薦就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了關于vue.js v-bind 的一些理解和思考，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了基于Vue實現微信小程序的圖文編輯器,由于微信小程序不能使用常規(guī)的圖文編輯器(比如百度的UEditor )編輯新聞內容之類的，所以用vue寫了個針對小程序用的圖文編輯器需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細介紹了vue使用動畫實現滾動表格效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
VueX 提供了一個全局都可以使用的數據管理倉庫，不用考慮父子傳值之類的問題，并且可以跨頁面?zhèn)鬟f數據，提高了可維護性，這篇文章主要介紹了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以參考下2022-12-12
本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內容，感興趣的話一起來看看吧2021-08-08
在vue項目中有時會使用到Base6464轉碼,現將自己使用的一種方法記錄下來,對vue使用Base64相關知識感興趣的朋友一起看看吧2024-02-02
axios中post請求json和application/x-www-form-urlencoded詳解
Axios是專注于網絡數據請求的庫,相比于原生的XMLHttpRequest對象,axios簡單易用,下面這篇文章主要給大家介紹了關于axios中post請求json和application/x-www-form-urlencoded的相關資料,需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了關于Vue關閉當前彈窗頁面的兩種方式,這是最近項目中遇到的一個需求,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue運行環(huán)境搭建全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
keepalive?是?Vue?內置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染，也就是所謂的組件緩存，這篇文章主要介紹了說說你對Vue的keep-alive的理解,需要的朋友可以參考下2022-11-11