Vue组件实战之ivew源码Icon篇

最新推荐文章于 2025-06-10 14:54:33 发布

chengyu_wang

最新推荐文章于 2025-06-10 14:54:33 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vuejs学习笔记文章标签： ivew vue vuejs 源码组件

本文链接：https://blog.youkuaiyun.com/qq_17347575/article/details/79275739

vuejs学习笔记专栏收录该内容

15 篇文章

订阅专栏

本文探讨了iview组件库中Icon的源码，详细解释了Icon组件的用法，包括必填参数type以及可选参数size和color。文章还分享了通过computed计算属性优化组件属性赋值的思想，并简单提到了CSS-in-JS在特定场景下的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码

<template>
    <i :class="classes" :style="styles"></i>
</template>
<script>
    const prefixCls = 'ivu-icon';

    export default {
        name: 'Icon',
        props: {
            type: String,
            size: [Number, String],
            color: String
        },
        computed: {
            classes () {
                return `${prefixCls} ${prefixCls}-${this.type}`;
            },
            styles () {
                let style = {};

                if (this.size) {
                    style['font-size'] = `${this.size}px`;
                }

                if (this.color) {
                    style.color = this.color;
                }

                return style;
            }
        }
    };
</script>

用法

<Icon type="arrow-resize"></Icon>

<Icon type="arrow-resize" size="18"></Icon>

<Icon type="arrow-resize" color="#333"></Icon>

<Icon type="arrow-resize" size="18" color="#333"></Icon>