小透明继续写一个。继上次的探索之后又遇到了一些问题，我来再说两句吧，希望能给同样遇到问题的朋友一点启发。
1.关于图片圆角。因为我做的页面上面有出现用户头像，是圆形的，需要做成图片圆角。看了一些别人的博客，他们说是在“<image>外层的父容器<div>的样式上加上圆角，然后用overflow来切掉它，让图片变圆”可是我尝试了以后发现并没有成功。
然后，我把关注点从<div>上挪开，改成在<image>上加上border-radius，就成功了，写成50%和带单位的长度都是有效的！
2.关于显示隐藏。nvue必须用flex布局，我认为原因是它里面的display值为flex，而且不可以改成标准流的block等，也就是不支持修改display。
v-show的显示隐藏就是靠display:none；和 display: block;很显然v-show在nvue里会失效。而v-if是把整个元素删掉和插入了，是可以做到显示隐藏的，但是我认为对于弹窗来说，需要频繁切换显示隐藏，v-if用在这里不合适。所以，必须找一个不借助display:none;的隐藏方法，而且隐藏后不能占空间（不能被误点到），也不能频繁插入和删除元素。
所以不能用插入删除元素的v-if,不能用作为障眼法的transform: scale(0),opacity: 0;也不可能用仍然占空间的visibility:hidden;（我试用了下，发现在nvue里这个没有生效）。我想到了用宽度或高度为0的办法。
具体来说，对于宽度固定的元素，如蒙板是全屏的，宽度肯定是750rpx，或者某个弹窗高度不确定，但宽度为500rpx，这个时候可以给默认样式写成width:0;然后根据条件判断，要显示的时候加上另一个叫“show”的calss，在“show”里面写上正常的宽度。这样，这个元素一直存在于页面，是否可见完全取决于有没有加上show这个class。
反之，有的元素高度是固定的，或者和后面的元素上下相连，不希望隐藏的时候保留高度，就可以做成默认height:0;，在“show”的class里写上具体的高度。
如果不给widh和height设置固定的宽度和高度，则它们的实际大小是由内容撑大的。但是很遗憾，我发现给“show”里面设置width或height为auto；并没有效果。所以只能退而求其次，在确定是固定的大小的那一方进行这样切换。如果width和height都设为0，还能看见元素的一小部分，那不是因为有的东西无法隐藏，而是因为padding撑起了这一小块的空间。
3.一个小细节。我想让点击内层元素，事件不冒泡，但又暂时不知道内层元素点击了要做些什么事情，就写成了@tap.stop，后面没有绑定事件函数，我记得这样也是可以的。结果出现了非常莫名其妙的错误，value.trim is not a function。我根本就没有写到trim。百度了一堆，错误原因五花八门，我通过排除法才找到这里的。问题应该是我没有绑定函数，我最后是绑定了一个空函数到这里。
4.关于flex的小细节。我发现给内层的元素设置宽度和高度的时候，用百分比无效，用带单位的数字可以。给<text>加上flex:1;以后，里面的文字不能换行，应该用带单位的数字固定大小，才能自然换行。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/231984.html原文链接：https://javaforall.net
