# 组件名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
← (5) 水平选择组件 (7) 提示组件 →