nvue页面直播推流组件无法设置圆角,video标签好像也不可以,希望官方尽快做出回应...
congee
- 发布：2021-06-15 18:39
- 更新：2023-02-10 15:49
- 阅读：2517
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 20H2
HBuilderX类型： 正式
HBuilderX版本号： 3.1.19
手机系统： Android
手机系统版本号： Android 10
手机厂商： 小米
手机机型： 小米cc9e
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
希望,原生组件也可以设置圆角,可以有更好的定制性
希望,原生组件也可以设置圆角,可以有更好的定制性
实际结果：
...
...
bug描述：
uni-app 使用直播推流组件无法加圆角样式,加样式之后没有一点作用,希望尽快解决,网上没有解决方案
iOS直接在原生组件上设置样式，但是有个坑，要么全部圆角，要么都不圆角，不能只设置一个两个或三个角为圆角
class {
border-radius: 12px;
overflow: hidden;
}
安卓上可以用阴影做个内圆角盖住4个角，但是iOS阴影显示规则与安卓不同，所以这种做法不支持iOS
<view class="address-map-wrap">
<map class="address-map"></map>
<view class="address-map-cover address-map-cover-top-left" ></view>
<view class="address-map-cover address-map-cover-top-right"></view>
<view class="address-map-cover address-map-cover-bottom-left"></view>
<view class="address-map-cover address-map-cover-bottom-right"></view>
</view>
样式
.address-map-wrap {
position: relative;
}
.address-map {
border-radius: 12px;
overflow: hidden;
}
.address-map-cover {
position: absolute;
width: 24px;
height: 24px;
border-radius: 12px;
}
.address-map-cover-top-left {
top: 0px;
left: 0px;
box-shadow: -12px -12px 0 0;
}
.address-map-cover-top-right {
top: 0px;
right: 0px;
box-shadow: 12px -12px 0 0;
}
.address-map-cover-bottom-left {
bottom: 0px;
left: 0px;
box-shadow: -12px 12px 0 0;
}
.address-map-cover-bottom-right {
bottom: 0px;
right: 0px;
box-shadow: 12px 12px 0 0;
}
页面模板代码
<view class="address-map-wrap">
<map class="address-map"></map>
<view class="address-map-cover address-map-cover-top-left"></view>
<view class="address-map-cover address-map-cover-top-right"></view>
<view class="address-map-cover address-map-cover-bottom-left"></view>
<view class="address-map-cover address-map-cover-bottom-right"></view>
</view>还要将address-map-cover背景颜色设置与父级容器背景颜色一致
FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866
原生组件设置圆角、支持video、map、webview等等：https://ext.dcloud.net.cn/plugin?id=9769
