抛砖
默认样式：
搜索框左右两边都有圆角
搜索框只有右边有圆角
u-search的Props对外开放可修改属性只能设置shape外形为round-圆形，square-方形，却无法修改圆角的属性。因此如果我们想达到预期的去掉左边圆角，只能通过自定义一个组件，重新修改这个组件。有没有更好的方法呢？
u-search Props
使用/deep/实现效果，代码如下：
<view slot="head" class="u-flex u-m-24" style="height: 64rpx;width: 100%;">
<view class="u-flex" @click="menuClick()" style="height: 100%; border: 2rpx solid #F1F3F5; border-radius: 8rpx 0 0 8rpx;">
<text class="u-font-28 u-m-l-32">{{areaName}}</text>
<u-icon class="u-m-l-20 u-m-r-10" name="arrow-down" color="#909399"></u-icon>
</view>
<view class="u-flex-1 searchBox">
<u-search shape="square" placeholder="请输入项目名称搜索" bg-color="#F1F3F5" v-model="keyword" :show-action="false" @clear="search()" @custom="search()" @search="search()" search-icon-color="#979797"></u-search>
</view>
</view>
.searchBox {
/deep/.u-content {
border-radius: 0 8rpx 8rpx 0 !important;
}
}
u-search源码
引玉
一、含义
/deep/ 深度选择器
二、用法
在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加<style scoped>，这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影响到子组件的样式。
我们在加了 scoped 之后样式会自动添加一个hash值。比如下面所示：
.title[data-v-211e4c4a] {
color: #ff0;
}
当你想在父组件修改子组件的样式，就需要使用/deep/。比如下面所示：
<style scoped>
/deep/ .title{
color: #ff0;
}
</style>
三、>>>、/deep/以及::v-deep
以上三种的效果均是在父组件改变子组件的样式。
一些预处理器（例如Sass）可能无法正确解析>>>。在这些情况下，可以改用/deep/或::v-deep组合器，两者都是它的别名，并且和>>>工作原理完全相同。
文章参考链接：
https://blog.csdn.net/wuli_youhouli/article/details/121011059
http://t.zoukankan.com/gg-qq-p-14133400.html
