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>