uniapp uni-popup弹出层组件弹窗无法弹出自定义样式问题

小芬1

已于 2022-02-21 17:22:14 修改

阅读量9k

点赞数 3

CC 4.0 BY-SA版权

文章标签： html css javascript uni-app vue

于 2021-09-02 16:36:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52004348/article/details/119934114

本文介绍了uni-app的uni-popup弹出层组件的使用，重点解决弹窗无法弹出及自定义样式的问题。通过示例代码，讲解了如何正确导入组件并设置宽高，以达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni-popup弹出层组件

之前用到弹出层组件时发现弹出时会有一层灰色的遮罩，后来调试了几次发现是因为没有自定义给弹出层宽高，尝试了几次终于做到自己想要的效果，话不多说，直接附上完整代码：
效果图：
在这里插入图片描述

<template>
	<view>
		<view class="sign_text" @tap="toggle('center')">
			<text style="line-height: 60px;margin-top: 12px;">点击弹出</text>
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view style="color: green;">
					这是一个弹窗
				</view>
				<view style="color: red;" @click="close()">
					关闭弹窗
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			//弹窗开启
			toggle(type) {
				this.type = type
				this.$refs.popup.open(type)
			},
			//弹窗关闭
			close() {
				this.$refs.popup.close()
			},

		}
	}
</script>

<style>
	.popup-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 200px;
		width: 280px;
		background-color: #fff;
		border-radius: 10px;
	}

</style>