Vue练习2：组件开发2（字体图标组件）

图片预览

        无

注释代码

<template>
  <i class="iconfont" :class="fontClass"></i>
</template>

<script>
const classMap = {    //如果直接写一长串可读性差且不好维护，所以用自定义名称来统称
    eyeopen:"icon-yanjing_xianshi",
    eyeclose:"icon-yanjing_yincang"
}
export default {
    props: {
        type: {
            type: String,
            required: true,
        },
    },
    computed: {
        fontClass(){
            return classMap[this.type];
        }
    }
}
</script>

<style scoped>
    @import "//at.alicdn.com/t/c/font_4431350_soyerbafqo.css";//引入字体图标库
</style>

可运行代码

<template>
  <i class="iconfont" :class="fontClass"></i>
</template>

<script>
const classMap = {
    eyeopen:"icon-yanjing_xianshi",
    eyeclose:"icon-yanjing_yincang"
}
export default {
    props: {
        type: {
            type: String,
            required: true,
        },
    },
    computed: {
        fontClass(){
            return classMap[this.type];
        }
    }
}
</script>

<style scoped>
    @import "//at.alicdn.com/t/c/font_4431350_soyerbafqo.css";
</style>