zl程序教程

您现在的位置是:首页 >  工具

当前栏目

使用externalClass自定义组件样式:解决小程序自定义组件无法使用iconfont的问题

组件程序 解决 自定义 无法 样式 问题 Iconfont
2023-09-11 14:19:54 时间

问题:

  iconfont在全局、页面Page当中,这个iconfont是都可以出来的;

  但是在自定义组件Components里面,这个iconfont是出不来的。

问题原因:

  看了小程序的文档,才发现

  也就是说:组件中,app.wxss中的全局样式无效;把iconfont的css在组件中重新引入就能正常展示icon了。

  其实是全局的样式对自定义的组件无效

  重新引入组件文件的解决方式有点low,所以继续看文档

  可以使用externalClass自定义组件样式

  看官方文档,万变不离其宗。官方文档就是最基本的游戏规则,我们可以根据官方的示例,照葫芦画瓢,实现我们自己的功能。

  实践:

  组件内声明externalClasses,

Component({
  properties: {
    link: {
      type: Object,
      value: {}
    }
  },
  externalClasses: ['icon-class']
})
<i class="icon-class"></i>

  父组件传入class

<LinkModel wx:if="{{dt.link}}" icon-class="iconfont cs-link"
link="{{tools.jsonToObj(dt.link)}}"></LinkModel>

  这样就ok啦