企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
### HIcon 组件 介绍: 项目中引入了 [Font Awesome](http://fontawesome.io/icons/),所以只要是 `Font Awesome` 中有的图标都可以在项目中使用,不过 `HIcon` 组件又对其进行了封装,可以非常方便的使用。比如需要使用一个 `book` 图标,我们会用一下代码 <i class="fa fa-book" aria-hidden="true"></i> 不过如果使用了 `HIcon` 组件,只需要 `<HIcon type="book"></HIcon>` 就可以了,内部使用的是 `span` 标签。`HIcon` 支持的属性如下表所示: <table> <caption>HIcon 属性</caption> <thead> <th>属性</th> <th>说明</th> <th>类型</th> <th>默认值</th> </thead> <tbody> <tr> <td>type</td> <td>icon 的类型</td> <td>String</td> <td>-</td> </tr> <tr> <td>size</td> <td>icon 的大小</td> <td>String | Number</td> <td>28</td> </tr> <tr> <td>color</td> <td>icon 的颜色</td> <td>String</td> <td>-</td> </tr> </tbody> </table> <table> <caption>HIcon 事件</caption> <thead> <th>事件名</th> <th>说明</th> <th>返回值</th> </thead> <tbody> <tr> <td>onClick</td> <td>点击事件</td> <td>-</td> </tr> </tbody> </table> 示例代码: <template> <div class="container"> <HIcon v-for="(icon, index) in icons" :type="icon.type" :key="index"></HIcon> </div> </template> <script> import { HIcon } from 'vuecomponent' export default { components: { HIcon }, data () { return { icons: [ {type: 'google'}, {type: 'safari'}, {type: 'firefox'}, {type: 'opera'}, {type: 'edge'}, {type: 'github'}, {type: 'qq'}, {type: 'renren'}, {type: 'weibo'}, {type: 'weixin'}, {type: 'windows'} ] } } } </script> <style scoped> .container { width: 480px; display: flex; flex-flow: row wrap; justify-content: space-around; } </style> 效果示意图: ![](http://ojihaa8pb.bkt.clouddn.com/h-icon-basic.png)