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

最新推荐文章于 2024-06-10 23:22:38 发布

技术布道师

最新推荐文章于 2024-06-10 23:22:38 发布

阅读量1.3k

点赞数

分类专栏：前端 html 面试文章标签： css 前端 css3

本文链接：https://blog.csdn.net/jiey0407/article/details/123100151

版权

本文介绍了uniapp的uni-popup组件使用时遇到的弹窗无法弹出及灰色遮罩问题，重点在于如何自定义组件样式。通过详细步骤，指导开发者导入组件、设置宽高以避免遮罩层出现，提供完整代码示例。

摘要由CSDN通过智能技术生成

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()">