VUE开发--u-search改变样式，/deep/使用

抛砖

默认样式： 搜索框左右两边都有圆角 期待样式： 搜索框只有右边有圆角

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-content是源码里对应的CSS class 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