uni-popup官方文档
我这里的背景是弹出一个选择规格的菜单。使用vue3+ts，使用组合式api
首先看看在vue3+ts+setup下的使用：
从这里可以看出来，弹出层的整体是透明的，而主界面是随着内部的元素大小自适应的。
现在在弹出层中编写复杂的效果
我新建了一个selectSpecs.vue：
这里内容看似很长，其实都是为了展示效果，可以不看细节。可以看看我对滚动区域的高度的设置方法。
引入的方式是将上面“你好”改为如下：
当然组件也是要import的：
当我数据小的时候，他的效果是这样的：
那个四个红角就是背景的颜色。这个效果还可以
当我数据多了之后：
因为宽度自适应，所以宽度是占满了整个屏幕的宽度。你看属性9都换行了。而我希望我的弹出层上下左右都留出一点空间，这样才好看。
我首先想到的是，给这个宽度限制一个最大百分比，用max-width: 80%;，加在background 样式的里面，因为这是整个背景的视图嘛，结果效果是这样的：
红色背景依然是整个屏幕的宽度，但内容跑左边去了，这不是我想要的效果。再看看数据量小的效果：
这看起来是白色框框占红色背景的80%呀，并不是内容占屏幕的80%呀。还不会居中了。
看来是我的样式加的位置不对，但是uni-popup也没提供这个参数。在uni-popup嵌套一层 view来控制样式:
这样也没效果。
于是debug发现，真正控制弹出层主窗体大小的样式是“.uni-popup__wrapper”，难道我要去修改源代码吗？这样不太好，不利于代码移植。
于是就想着有没有办法从子组件修改父组件的样式的方法，结果没找到，倒是找到了父组件修改子组件的样式的方法，于是代码稍微修改一下：
增加了一个样式：
这里注意.vue文件允许有多组<style>，我这里就是新建的一个<style scoped>，然后用深度选择器去修改子组件的样式。
其实父组件与.uni-popup__wrapper中间还隔着一两层view节点，但是:deep也是可以找到这个样式去修改的。
最后效果是这样的：
即使数据多的时候，它也不会把屏幕宽度占满。
其实也是学会了一招修改子组件的样式。
补充：uniapp uni-popup弹出层组件 弹窗 无法弹出 自定义样式问题
之前用到弹出层组件时发现弹出时会有一层灰色的遮罩，后来调试了几次发现是因为没有自定义给弹出层宽高，尝试了几次终于做到自己想要的效果，话不多说，直接附上完整代码：
效果图：
下面教一下不会灵活使用的同学这个组件应该怎么用
一、uni-popup弹出层
官网组件地址：https://ext.dcloud.net.cn/pluginid=329
可以先翻看一下官网的介绍，很有用。
二、使用步骤
.首先要去官网把这个组件导入到项目中或者下载到本地，常规放在components文件目录下：
最好是这三个都要一起下载，这样用的时候比较方便，使用的时候按需引入，自定义组件样式就好了
总结
到此这篇关于uni-app弹出层uni-popup使用及修改默认样式的文章就介绍到这了,更多相关uni-app弹出层uni-popup使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
