weex用阿里矢量图

anxiaoyu 2021-11-17 原文

首先这段代码来自 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>