Vue实现底部对话框

效果

手机上的效果：

电脑上的效果：

源代码已经上传至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>