电商案例封装一个小的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"
                },
            ]		
		}
	}
}