8***@qq.com
8***@qq.com
  • 发布:2021-08-22 17:20
  • 更新:2022-07-10 23:37
  • 阅读:1437

nvue iconfont字体图标动态传值显示乱码的解决方案

分类:nvue

1:

// #ifdef APP-NVUE  
  let domModule = weex.requireModule('dom');  
  domModule.addRule('fontFace', {  
    'fontFamily': "iconfont",  
    'src': "url('http://at.alicdn.com/t/font_2266921_ddw3omdnbij.ttf')"  
  })  
  // #endif

2:

<style lang="scss">  
    /* #ifdef APP-NVUE */  
    .iconfont {  
        font-family: iconfont;  
    }  
    /* #endif */  
</style>

3:

<text class="iconfont" :style="iconStyle">{{name}}</text>

4:
name传递的值必须是 “\u”+字体图标的16进制unicode码
16进制unicode码怎么看---点击字体图标的编辑按钮
如:收藏字体图标的16进制unicode为e64d,那么传值为\ue64d

bug:测试出来的bug -- 组件传递参数其值不能直接写在组件上,需要通过变量传递,否则无效 这么说好像不是很明确,上代码

<a icon="\ue64d"></a>    无效  
<a :icon="'\ue64d'"><a>   有效  
<a :icon="searchicon"><a>   有效  
data () {  
  return {  
    searchicon: "\ue64d"  
  }  
}
1 关注 分享
一抱一个胖猪猪

要回复文章请先登录注册

8***@qq.com

8***@qq.com (作者)

回复 9***@qq.com :
我用这个方法再IOS上测试没问题的
2022-07-10 23:37
9***@qq.com

9***@qq.com

你好,请问IOS下应该如何处理呀?
2022-06-16 17:58
一抱一个胖猪猪

一抱一个胖猪猪

感谢分享
2021-08-23 09:06