原始碼

<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>

其中 type 是必須的,用於指定使用的圖示. size, color 是選填的,用於指定使用的大小與顏色.

想法

• 可以充分的利用 computed 計算屬性來給對應的屬性賦值.
• CSS-in-JS 的用法可以用來給定屬性賦值.當然這只是應用於少量的情況,在大量使用的情況下,最好還是使用全域性CSS.