组件名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

快速跳转

• 组件名cap4-icon
  • 引入
  • 基础用法
  • Attributes