weex用阿里矢量圖

首先這段代碼來自 zwwill在github上的 weex網易嚴選項目

他是在utils下封裝了一個方法

let utilFunc = {
    initIconFont () {
        let domModule = weex.requireModule('dom');
        domModule.addRule('fontFace', {
            'fontFamily': "iconfont",
            'src': "url('http://at.alicdn.com/t/font_630973_b31no0qq0nt57b9.ttf')"
        });
    }
}

 經過  dom模塊的 addRule方法

可以在html的中添加代碼

字體圖標有不少文件，ttf,eof,svg,woff

可是隻加載這個 ttf 就能出現效果了

執行 initIconFont 以後 就在html中添加了一下代碼

@font-face {
  font-family: 'iconfont';  /* project id 630973 */
  url('//at.alicdn.com/t/font_630973_b31no0qq0nt57b9.ttf') format('truetype')
}

 而後字體圖標就生效了

注意：字體圖標的連接記得改爲本身的。

 

動態加載

<template>
    <div class="tabItem">
        <div class="item" @click="tabChange(tab.index)" v-for="tab in tabs"><text class="iconfont icon" :class="[currentIndex === tab.index ? 'active' : '']" :style="{fontFamily:'iconfont',fontSize:'60px'}">{{getFontName(tab.code)}}</text>
            <text :class="[currentIndex === tab.index ? 'active' : '']">{{tab.tabName}}</text></div>
    </div>
</template>
<script>
    var he=require('he');
    import utils from '@/assets/utils.js';
    export default {
        components: {},
        data: () => ({
            currentIndex:0,
            tabs:[{index:0,code:"",tabName:'首頁'},
                {index:1,code:'',tabName:'發現'},
                {index:2,code:'',tabName:'購物車'},
                {index:3,code:'',tabName:'個人'}]
        }),
        created () {

        },
        computed: {

        },
        methods: {
            tabChange:function (index) {
                this.currentIndex=index
            },
            getFontName: function(name){
                return he.decode(name)
            }
        }
    };
</script>