如何在vue项目中使用mint-ui组件，添加自定义图标显示

背景：在vue项目中，我们经常会使用UI组件，有时，我们需要在UI组件中，进行自定义的图标显示。相关情况如下图所示：

       点击选择银行，触发选择开户行组件，各个银行列表前，添加自定义的图标，点击任意一个银行列表显示在付款银行列表栏。

一、相关页面结构

<!--付款银行栏-->
<div class="div-cell" @click="showBank()">
    <div class="line-cell2 clearBt">
        <div class="line-cell-hd2 float_lt">
            <label class="line-cell-label">付款银行</label>
        </div>
        <div class="line-cell-bd2 float-rt textRight g-arrows-bottom">
            <i class="payCardSelect" v-if="!PAY.KFBANK">选择银行</i>
            <span class="payCard">{{KFBANKName}}</span>
        </div>
    </div>
</div>

<!--银行列表组件-->
<mt-popup position="bottom" v-model="bankFlag" :closeOnClickModal="clickfalse" class="bankPicker">
    <div class="pickerBtns clearBt">
        <span class="float_lt" @click="PopParent(0)">取消</span>
        <span class="bankPickerTitle">选择开户行</span>
        <!--<span class="float_rt" @click="PopParent(1)">确认</span>-->
    </div>
    <div class="bankDiv">
        <div v-for="item in bankList2" :key="item.id" class="bankPickerCell">
            <div @click="PopParent(1,item)">
                <img :src="showImg(item.value)" alt="" class="action-sheet-cell-img"/>
                {{item.name}}
            </div>
        </div>
    </div>
</mt-popup>

二、vue中的methods方法

//vue函数方法区域
methods:{
    showBank(){///触发银行列表组件
        this.bankFlag = true;
    },
    showImg(name){//银行列表图标路径
        return require("@/assets/images/card/"+name+".png")
    },
    PopParent(){//选择银行确定选项
        this.bankFlag = false;
        if(status == "1"){
            this.KFBANKName = item.name;
            this.PAY.KFBANK = item.value;
        }
    },
    //调用银行卡023查询接口，存储bankList2数组
    queryBank(){
        let that = this;
        var busi={
              codeType:'bank',
              codeValue:that.PAY.productToken,
              polno:that.PAY.policyCode,
        }
        that.TOOL.apiAxios('POST','ZYT_TB_023',busi,function(){
            if(status == '1'){
                if(res.item.codeTypeList.length != 0){
                     for(var i in res.item.codeTypeList){
                            var obj = {
                                name:'',
                                value:'',
                                limitDesc:'',
                                singleUpperLimit:'',
                                showsmscode:'',
                            }
                            obj.name = res.item.codeTypeList[i].codeName;
                            obj.value = res.item.codeTypeList[i].codeValue;
                            obj.limitDesc = res.item.codeTypeList[i].limitDesc;
                            obj.singleUpperLimit = res.item.codeTypeList[i].singleUpperLimit;
                            obj.showsmscode = res.item.codeTypeList[i].showsmscode;
                            that.bankList2.push(obj);
                            that.limitDesc.push(obj);
                            that.singleUpperLimit.push(obj);
                     }
                }
            }else if(status == '0'){
                MessageBox.alert(res.error.msg,'错误');
            }
        })
    },
}

       总结：在vue项目中使用mint-ui组件，添加自定义图标，方法如上所示。关键在于，图标路径的引用问题。

       后记，顺便mark一篇博客，mint-ui引用iconfont图标 。