MINT-UI+阿里ICONFONT应用

来源：互联网发布：阿里云制作快照镜像编辑：程序博客网时间：2024/06/05 12:13

网址：http://www.iconfont.cn
1.选中喜爱的icon下载
有SVG AI PNG下载

2.配置组件tabbar.vue
中文的命名是测试用的，后面需要改

<template>    <mt-tabbar id="tabbar">        <mt-tab-item @click="ff" id="首页" v-model="selected">            <img slot="icon" src="../assets/中毒-1.svg">            <router-link :class="btnPadding" to="/home">首页</router-link>        </mt-tab-item>        <mt-tab-item  id="回答">            <img slot="icon" src="../assets/天使(1).svg">            <router-link :class="btnPadding" to="/answer">回答</router-link>        </mt-tab-item>        <mt-tab-item  id="消息">            <img slot="icon" src="../assets/迷茫(1).svg">            <router-link :class="btnPadding" to="/message">消息</router-link>        </mt-tab-item>        <mt-tab-item  id="我的">            <img slot="icon" src="../assets/酷(1).svg">            <router-link :class="btnPadding" to="/more">我的</router-link>        </mt-tab-item>    </mt-tabbar></template>

因为使用了MINT-UI，不能直接在UI上绑定事件，所以直接利用padding撑大router-link，增大触摸范围

<style lang="less" scoped>    @import "../less/config.less";    .btnPadding{        padding:34/@font 28/@font 6/@font 28/@font;    }    #tabbar a{        color:#8a8a8a;    }</style>

3.预览图

0 0