vue中簡(jiǎn)單彈框dialog的實(shí)現(xiàn)方法
更新時(shí)間:2018年02月26日 10:14:01 投稿:jingxian
下面小編就為大家分享一篇vue中簡(jiǎn)單彈框dialog的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
效果如下,dialog中內(nèi)容自行添加
<template> <div> <div class="dialog-wrap"> <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div> <transition name="drop"> <div class="dialog-content" v-if="isShow"> <p class="dialog-close" @click="closeMyself">x</p> <slot>empty</slot> </div> </transition> </div> </div> </template>
接收父組件傳參isShow,并返回一個(gè)自定義事件on-close
<script> export default { props: { isShow: { type: Boolean, default: false } }, data () { return { } }, methods: { closeMyself () { this.$emit('on-close') } } } </script>
<style scoped> .drop-enter-active { transition: all .5s ease; } .drop-leave-active { transition: all .3s ease; } .drop-enter { transform: translateY(-500px); } .drop-leave-active { transform: translateY(-500px); } .dialog-wrap { position: fixed; width: 100%; height: 100%; } .dialog-cover { background: #000; opacity: .3; position: fixed; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; } .dialog-content { width: 50%; position: fixed; max-height: 50%; overflow: auto; background: #fff; top: 20%; left: 50%; margin-left: -25%; z-index: 10; border: 2px solid #464068; padding: 2%; line-height: 1.6; } .dialog-close { position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; text-align: center; cursor: pointer; } .dialog-close:hover { color: #4fc08d; } </style>
以上這篇vue中簡(jiǎn)單彈框dialog的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
全面解析vue router 基本使用(動(dòng)態(tài)路由,嵌套路由)
路由,其實(shí)就是指向的意思,當(dāng)我點(diǎn)擊頁(yè)面上的home按鈕時(shí),頁(yè)面中就要顯示home的內(nèi)容,如果點(diǎn)擊頁(yè)面上的about 按鈕,頁(yè)面中就要顯示about 的內(nèi)容。這篇文章主要介紹了vue router 基本使用 ,需要的朋友可以參考下2018-09-09Vue實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車小案例
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車小案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10vue.js動(dòng)態(tài)修改background-image問題
這篇文章主要介紹了vue.js動(dòng)態(tài)修改background-image問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼(踩坑經(jīng)驗(yàn))
這篇文章主要介紹了vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼,也是小編踩了無數(shù)坑總結(jié)出來的經(jīng)驗(yàn),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03