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

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

原创最新推荐文章于 2025-05-19 12:00:39 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #vue

vant 专栏收录该内容

5 篇文章

订阅专栏

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

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%;
}

效果