其他分享
首页 > 其他分享> > iview/viewUI库组件封装学习——icon

iview/viewUI库组件封装学习——icon

作者:互联网

致力于提升组件封装思路,向iview组件库贡献大神学习day01:icon组件
先上源码,然后总结使用方法和亮点学习

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

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

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

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

                return style;
            }
        },
        methods: {
            handleClick (event) {
                this.$emit('click', event);
            }
        }
    };
</script>

一、使用方法
结合官方文档及代码可以看到,icon组件有3个参数,
1、type,源码中可以看到props中接收了type类型为字符串,默认为空,使用在computed中的classes属性中,当type不为空时,classe返回ivu-icon,ivu-icon-【type】,然后更具type返回对应图标,
2、size,props中size接收2中数据格式,Number和String类型,该参数使用在computed中的styles属性中,如果this.size不为空,为style添加font-size属性为this.size ‘px’,
3、color同size一样只不过color只接收string类型的值。
4、我们看到源码还有一个custom的属性,文档中未提及,但我结合代码,该参数可以用于添加自定义的全局class样式,(有点不懂这个参数,直接icon组件上面加个class不香吗,)
总结:计算属性的使用使得html代码更清晰,

标签:style,viewUI,String,color,icon,type,iview,size
来源: https://blog.csdn.net/weixin_45440813/article/details/114003973