为了账号安全,请及时绑定邮箱和手机立即绑定

Weex关于字体图标的bug

Weex关于字体图标的bug

有只小跳蛙 2018-10-11 09:13:10
尝试在android和iOS平台下使用字体图标:1.装载字体图标 created:function () {              var domModule=weex.requireModule("dom");             domModule.addRule('fontFace',{                             'fontFamily':'iconfont',                                     'src':"url(\'http://at.alicdn.com/t/font_h973ii9uesgaatt9.ttf\')"             })         }2.使用字体图标<text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}" >&#xe685;</text>通过以上这种方式,直接写死unicode是可以正常渲染出来的。然而,如果将里面的字符使用变量的方式给予赋值,是无法渲染出来的。 <text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}" >{{fontName}}</text>  fontName:"&#xe685;"尝试各种办法,无果,可能是底层渲染时机的问题。
查看完整描述

2 回答

?
摇曳的蔷薇

TA贡献1793条经验 获得超6个赞

对这个问题我仔细跟踪了下,导致的原因是:
在template中 text写死 &#xe685;时,weex-template-compiler在编译阶段使用了he进行decode,而在template中Mustache进行数据绑定fontName(fontName:"&#xe685;")时不会进行decode

既然了解了原因,可以这样解决,
在vue中引入he模块,自己进行解码

<text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}">{{getFontName}}</text>


<script>

  var he = require('he');

  module.exports = {

    data: function () {

      return {

        fontName: '&#xe685;',

      }

    },

    computed: {

      getFontName: function() {

        return he.decode(this.fontName)

      }

    }

   }

</script>


查看完整回答
1 反对 回复 2018-10-21
?
白板的微信

TA贡献1883条经验 获得超3个赞

不用那么麻烦,不需要什么解码,只需要把&#xe685;换成\ue685就可以了

<text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}" >{{fontName}}</text>
fontName:"\ue685"


查看完整回答
反对 回复 2018-10-21
  • 2 回答
  • 0 关注
  • 1139 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信