亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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 關注
  • 1196 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號