下面我就為大家分享一篇vue實現模態框的通用寫法推薦,具有很好的參考價值,希望對大家有所幫助。
看了element元件的原始碼後發現,所有模態框其實實作方法都差不多,主要用到了vue在元件化上的雙向綁定。程式碼:
<!--查看槽点对话框--> <template lang="html"> <transition name="el-fade-in-linear"> <p draggable="true" @drag="mouseDrag" @dragend="mouseDragend" :style="dialogStyle" class="g-dialog-wrapper" v-show="myVisible"> <p class="g-dialog-header"> <p class="left"> 模态框 </p> <p class="right"> <i class="g-times-icon fa fa-times" @click="myVisible=false" aria-hidden="true"></i> </p> </p> <p class="g-dialog-container"> </p> </p> </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裡面的程式碼,實作監聽資料變化,及時更新。所以在使用的時候就很方便了,在component註冊元件之後:
<g-key-dialog :visible.sync="keyDialogVisible"></g-key-dialog>
註:這裡必須使用sync,要不是無法雙向綁定的
##上面是我整理給大家的,希望今後對大家有幫助。 相關文章:vue輪播圖外掛程式vue-concise-slider的使用#
以上是vue中實作模態框(通用寫入)的詳細內容。更多資訊請關注PHP中文網其他相關文章!