电商案例封装一个小的icon模块

vue利用组件对电商案例中常见的icon导航进行封装，从而提高在开发中的效率为后期维护提供方便
1，components文件夹中创建了icon.vue组件

<template>
<div class="big">
<div class="icon" ref="icon">
<i :class="icon" ref="iconn" :style="{'font-size':'0.36rem'}"></i>
</div>
<div class="title" ref="title">
<div>{{title}}</div>
</div>
</div>
</template>

<script>
import "../../utills/rem";
export default {
//props用来接收从父组件中传来的信息
props: {
icon: {
default: "",
type: String
},
title: {
default: "",
type: String
},
titleTop: {
default: "5",
type: String
},
iconLeft: {
default: "35",
type: String
},
iconTop: {
default: "10",
type: String
},
iconColor:{
dafalut:"",
type:String
},
titleSize:{
defalut:"10",
type:String
}
},
mounted() {
//利用ref来对细节进行调整
this.$refs.title.style.marginTop = this.titleTop + "px";
this.$refs.icon.style.marginLeft = this.iconLeft + "px";
this.$refs.icon.style.marginTop = this.iconTop + "px";
this.$refs.iconn.style.color = this.iconColor;
this.$refs.title.style.fontSize = this.titleSize + "px"
}
};
</script>

<style scoped>
.big {
width: 1.25rem;
background-color: white !important;
height: 0.96rem;
}
.title div {
text-align: center;
}
</style>

在父子组件中利用v-for循环相关数据实现展示不同图标和标题：

<template>
<Icon class="iconn" v-for="(item,index) in functionlist" :key="index" :iconColor="item.color" :icon="item.icon" :title="item.title" titleSize="14" iconLeft="47" titleTop="10"></Icon>
</template>

export default{
data(){
return{
functionlist:[
{
"icon":"iconfont icon-yue",
"title":"我的余额",
"color":"#f97360"
},
{
"icon":"iconfont icon-kanjia",
"title":"我的砍价",
"color":"#f86c57"
},
{
"icon":"iconfont icon-youhuijuan",
"title":"我的礼卷",
"color":"#efba56"
},
{
"icon":"iconfont icon-shoucang",
"title":"我的收藏",
"color":"#eeb955"
},
{
"icon":"iconfont icon-dizhi",
"title":"我的地址",
"color":"#5a9fec"
},
{
"icon":"iconfont icon-kefu",
"title":"联系客服",
"color":"#61a3ed"
},
]
}
}
}