elbutton自定义图标
时间: 2023-08-08 15:12:02 浏览: 211
el-button组件可以通过设置icon属性来自定义图标。这个自定义的图标名称会默认添加到button下i标签的class上,我们只需要设置i标签的样式就可以了。例如,可以使用以下代码来自定义一个二维码图标,并根据不同状态进行disabled的切换:
```html
<el-button type="text" icon="el-icon-my-qr-code" :disabled="isDisabled"></el-button>
```
在上述代码中,el-icon-my-qr-code是自定义的图标名称,可以根据实际需求进行修改。通过设置:disabled属性,可以根据isDisabled变量的值来控制图标是否可点击。你可以在CSS中设置el-icon-my-qr-code的样式,来实现不同状态下的样式切换。
#### 引用[.reference_title]
- *1* *2* [element button自定义图标](https://blog.csdn.net/weixin_44157964/article/details/120785629)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [el-button自定义图片显示](https://blog.csdn.net/changyana/article/details/127647388)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文