vue 自定义弹窗

最新推荐文章于 2024-08-07 21:53:27 发布

wm_wu

最新推荐文章于 2024-08-07 21:53:27 发布

阅读量1.1k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wm_wu/article/details/108799532

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue 自定义弹窗

<template>
	<div id="demo">
		<!-- 随便写个点击事件,把model设为true即可 -->
		<!-- 自定义提示框 -->
		<div class="model" @touchmove.prevent v-if="model">
			<div class="box">
				这里可以放弹窗的内容
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'demo',
		data(){
			return {
				model: false,
			}
		},
		methods:{
			<!-- 1.页面中设置一个点击事件,把model的值改成true即可 -->
			<!-- 2.自定义弹窗,背景可能会滑动,要禁止背景滑动的话,添加@touchmove.prevent这个即可.-->
			<!-- @touchmove.prevent : 禁止背景滑动 -->
		},
		mounted() {}
	}
</script>
<style scoped lang="less" type="text/less">
#dome{
	width: 7.5rem; height: 100%; background-color: #fff;
	.model{
		width: 7.5rem; height: 100vh;
		position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.6); z-index: 100;
		.box{
			width: 5.86rem;
			height: 3.5rem;
			background:rgba(255,255,255,1);
			border-radius: 0.2rem;
			margin-left: 0.82rem;
			display: flex; justify-content: space-around; flex-direction: column;
			position: fixed; top: 3.5rem;
		}
	}
}
</style>