背景:在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图标 。