# 组件名cap4-icon


# 引入

import Cap4Icon from 'cap4-pc-ui/lib/cap4-icon';
import 'cap4-pc-ui/lib/cap4-icon/css/cap4-icon.css';

# 基础用法

/**/

export default {
data() {
return {
leftSpan: '请选择图标',
icon: 'cap-icon-new-business-opportunity',
iconColor: '#67bfff',
bgColor: '#ebebeb'
};
},
methods: {
chooseIcon() {
alert('实现选图标');
}
}
};
/**/::: demo

<template>
    <div class="demo-block">
        <cap4-icon v-model="icon" :leftSpan="leftSpan" :iconColor="iconColor" :bgColor="bgColor" @chooseIcon="chooseIcon"></cap4-icon>
    </div>
</template>

<script>
export default {
    data() {
        return {
            leftSpan: '请选择图标',
            icon: 'cap-icon-new-business-opportunity',
            iconColor: '#67bfff',
            bgColor: '#ebebeb'
        };
    },
    methods: {
        chooseIcon() {
            alert('实现选图标');
        }
    }
};
</script>

:::

# Attributes

参数 说明 类型 可选值 默认值
value 图标 (必填)) String ''
leftSpan 左文本 (选填)) String
rightSpan 右文本 (选填)) String
iconColor 图标色 (选填)) String
iconClass 图标样式类 (选填)) String
bgColor 图标背景色 (选填)) String
创建人:yinyanting