全局修改某一组件图标

phoebe_l_

已于 2023-05-09 15:55:48 修改

阅读量232

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

于 2023-04-13 15:46:48 首次发布

本文链接：https://blog.csdn.net/qq_58614993/article/details/130132139

在Vue项目中，通过修改antdSelect组件的suffixIcon属性实现全局统一的下拉箭头样式，同时展示了如何在分页器中自定义prev和next的图标。遇到问题时，通过同事和大佬的帮助找到了解决方法。

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

关于这件事，本来用笨办法在每一个a-select组件中都加了

<a-select>
    <template #suffixIcon><i class="iconfont icon-a-jiantoubeifen8"></i></template>
      <a-select-option>
         {{ item.name }}
       </a-select-option>
 </a-select>

可以是可以但是到了分页器或者其他深层的封装就不适用了，后续问了同事发现可以在引入antd组件的文件中这么写在这里插入图片描述
但，可能因为库的问题标签在这里并不适用，会报 h is not defined 的错
于是又问了大佬得到了解决方案修改如下：

const a = new Vue()
// console.log(Vue.$createElement, a.$createElement);
Select.props.suffixIcon.default = () => {
  const h =  a.$createElement;
  return h('i', {
    'class': {
      iconfont: true, 
      'icon-a-jiantoubeifen8': true
    },
    attrs: {
      style: 'color: #A8A8A8;'
    },
  },)
}

哭了大佬就是大佬
———————————————————————————————————————————

 //分页器图标修改
      pagination: {
        itemRender(current, type, originationElement) {
          if (type == 'prev') {
            return (
              <i
                class="iconfont icon-a-jiantoubeifen8"
                style="color: #9ea6b0"
              ></i>
            )
          } else if (type == 'next') {
            return (
              <i
                class="iconfont icon-a-jiantoubeifen8 arrow_next"
                style="color: #9ea6b0"
              ></i>
            )
          } else {
            return originationElement
          }
        },
      },