8.图标组件的编写

可以在这里找到自己想要的图标

iconfont-阿里巴巴矢量图标库

1. 提前理清布局，可分为1个大div与4个小div

2. 创建IconList.vue文件

3. 在IconList.vue中根据布局进行编写，完整代码如下

<template>
    <div class="iconList">
        <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tuijian"></use>
            </svg>
            <span>每日推荐</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhibo"></use>
            </svg>
            <span>私人FM</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gedan"></use>
            </svg>
            <span>歌单</span>
        </div>
        <div class="iconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-paihangbang"></use>
            </svg>
            <span>排行榜</span>
        </div>
    </div>
</template>

4. 在HomeView.vue中引入、注册、显示

<template>
    <div>
      <TopNav/>
      <TopSwiper/>
      <IconList/>
    </div>
</template>

<script>
import TopNav from '@/components/home/TopNav.vue'
import TopSwiper from "@/components/home/TopSwpier.vue"
import IconList from "@/components/home/IconList.vue"

export default {
  name: 'HomeView',
  components: { 
    TopNav, // 注册
    TopSwiper,
    IconList
  }
}
</script>

5. 启动项目，之后写style，使用弹性布局，完整代码如下

<style lang="less" scoped> // lang=“less” 可以敲层级关系的样式
    .iconList{            // scoped 使style内的样式只作用于当前的界面
        width: 100%;
        height: 2rem;
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .iconItem{
            width: 25%;
            height: 2rem;
            display: flex;
            flex-direction: column; // 垂直方向
            align-items: center;
            .icon{
                width: 1rem;
                height: 1rem;
            }
        }
    }                        
</style>

6. 再次启动项目，对比写style前后效果图

     

补充：比行内样式的优先级更高的 !important

background-color: #eb3729 !important;