vant搜索框图标取消图标替换content大小控制失效问题

最新推荐文章于 2025-05-19 12:00:39 发布

@Doraemen

最新推荐文章于 2025-05-19 12:00:39 发布

阅读量2.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vant 文章标签： css 前端 vue

本文链接：https://blog.csdn.net/tt5678921/article/details/126658701

vant 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中自定义`van-search`组件的清除图标，通过修改CSS样式实现了从原始样式到目标样式的转变。首先展示了原始的CSS代码，然后逐步解释并展示调整后的代码及其最终效果。通过这种方式，读者可以学习到如何深入定制第三方UI库组件的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

   <van-search
  v-model="keyword"
  shape="round"
  background="#ffffff"
  placeholder="输入关键词"
  clearable
  clear-trigger="always"
  style="padding:10px 20px 12px"
  @cancel="onCancel"
>
      <template v-slot:left-icon>
        <slot><img class="search_icon" src="~@/assets/images/icon_search.png" alt=""></slot>
      </template>
    </van-search>

css部分一开始我是这样写的

/deep/ .van-icon:before{
 content:url('~@/assets/images/icon_search_delete.png');
 height: 16px;
 width:16px;
}

效果

代码改成

/deep/ .van-icon:before{
   display: inline-block;
    width: 16px;
    height: 16px;
    content: "";
    background: url("~@/assets/images/icon_search_delete.png") no-repeat 0 0;
    background-size: 100%;
}

效果