效果
手机上的效果:
![](https://i-blog.csdnimg.cn/blog_migrate/81f8b2eb4516f23cbeb9a5416595efc3.gif)
电脑上的效果:
![](https://i-blog.csdnimg.cn/blog_migrate/bd3e3ad433d463f589733a454a7adc8e.gif)
源代码已经上传至CSDN,点击下载
代码
App.vue
<template>
<div id="app">
<button @click="showDialog">展示Dialog</button>
<my-dialog
title="Hello"
message="我是弹窗内容"
:showDialog="isShowDialog"
@closeDialog="isShowDialog=false"></my-dialog>
</div>
</template>
<script>
import MyDialog from "./components/mdialog.vue"
export default {
name: 'App',
components: {
MyDialog
},
methods: {
showDialog: function(){
this.isShowDialog = true;
}
},
data: function(){
return {
isShowDialog: false
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
mdialog.vue
<template>
<transition name="dialog">
<div
v-if="showDialog"
id="dialog-bg"
@touchmove.prevent
@scroll.prevent >
<div id="dialog" >
<h2
style="text-align: left;padding-left: 10px;">
{{title}}
</h2>
<p
style="text-align: left;padding-left: 10px;word-wrap:break-word;">
{{message}}
</p>
<button
class="dialog-button"
@click="close" >关闭</button>
</div>
</div>
</transition>
</template>
<script>
export default{
props:{
showDialog: Boolean,
title: String,
message: String
},
methods: {
close: function(){
this.$emit("closeDialog");
}
},
watch:{
}
}
</script>
<style>
* {
box-sizing: border-box;
}
#dialog-bg{
top: 0;
left: 0;
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.5);
z-index: 98;
}
#dialog{
border-radius: 20px 20px 0 0;
position: fixed;
bottom: 0;
background-color: #FFFFFF;
width: 100vw;
padding: 15px;
padding-bottom: 25px;
}
/* 适配电脑等大屏幕 */
@media (min-width: 750px) {
#dialog{
width: 500px;
left:0;
right:0;
margin:0 auto;
}
}
.dialog-button{
width: 100%;
background-color: #6367D5;
border-width: 0;
border-radius: 360px;
padding: 10px;
outline: none;
color: white;
}
.dialog-button:focus {
outline: none;
}
.dialog-button:active{
background-color: #585dbe;
border-color: #585dbe;
}
.dialog-enter-active, .dialog-leave-active {
transition: all .5s;
}
.dialog-enter, .dialog-leave-to {
opacity: 0;
transform: translateY(300px);
}
</style>