1. Uniapp中的阴影介绍
在Uniapp的开发中,我们经常要用到阴影效果来美化页面。Uniapp中的shadow属性可以给元素添加一个阴影效果,其使用方式如下:
<view style="box-shadow: 0px 2px 10px #cecece;">
<!-- 需要添加阴影效果的元素 -->
</view>
其中box-shadow属性的值包括四个参数:
水平偏移量:正值往右,负值往左
垂直偏移量:正值往下,负值往上
阴影模糊半径:值越大,阴影越模糊
阴影颜色:可用十六进制、RGBA、HSLA等形式表示
默认情况下,Uniapp中添加阴影效果的元素会自动添加圆角效果,其半径默认为5px。
2. 如何去掉Uniapp中添加的阴影效果
2.1 使用原生CSS方式去掉阴影效果
如果我们想要去掉Uniapp中添加阴影效果的圆角和阴影,我们可以使用原生CSS方式对样式进行重写,代码如下所示:
/** 去掉阴影效果 **/
.uni-view-box-shadow {
box-shadow: none !important;
}
/** 去掉圆角 **/
.uni-view-border-radius {
border-radius: 0 !important;
}
在重写样式时,我们需要找到添加阴影效果的元素的类名,并在前面加上.uni-前缀,这样可以唯一标识Uniapp框架中的元素。
需要注意的是,上述方式只能去掉当前页面中所有添加阴影效果的元素的圆角和阴影,如果想精确控制哪个元素要去掉阴影效果,需要结合elementUI的部分样式进行去除(详见2.2步骤)。
2.2 使用elementUI去掉阴影效果
elementUI是Uniapp框架中常用的一套UI库,我们可以在其样式文件中找到去除阴影效果的规则,代码如下:
/** 去掉阴影 **/
.el-card--without-shadow.is-always-shadow {
box-shadow: none !important;
}
/** 去掉圆角 **/
.el-card__header.is-always-shadow,
.el-card__body.is-always-shadow {
border-radius: 0 !important;
}
使用elementUI去掉阴影效果的方式,我们需要注意以下几点:
需要npm安装elementUI,并在main.js文件中全局引入
需要在组件的Style部分定义.el-card--without-shadow.is-always-shadow规则,来覆盖elementUI默认添加的阴影效果
3. Uniapp中去掉阴影效果的实现思路
综合以上两个去掉阴影效果的方式,我们可以得出Uniapp去掉阴影效果的实现思路:
在需要去掉阴影效果的页面的Style部分,添加.uni-view-box-shadow和.uni-view-border-radius规则,并设置为none
在main.js文件中全局引入elementUI,并覆盖.el-card--without-shadow.is-always-shadow和.el-card__header.is-always-shadow 和.el-card__body.is-always-shadow规则,以去除elementUI默认添加的阴影效果
需要注意的是,如果要用到阴影效果的场景,需要单独对需要添加阴影效果的元素设置样式;如果整个项目中要去掉阴影效果,建议还是使用elementUI的方式。