当前位置:   article > 正文

ElementPlus Icon 小技巧_el-button 引用icon=

el-button 引用icon=

图标button,官方文档需要局部引用icon,在结合v-bind才能使用,非常的繁琐

  1. <el-button :icon="Search" circle />
  2. <el-button type="primary" :icon="Edit" circle />
  3. <el-button type="success" :icon="Check" circle />
  4. <el-button type="info" :icon="Message" circle />
  5. <el-button type="warning" :icon="Star" circle />
  6. <el-button type="danger" :icon="Delete" circle />
  7. import {
  8. Check,
  9. Delete,
  10. Edit,
  11. Message,
  12. Search,
  13. Star,
  14. } from '@element-plus/icons-vue'

然而直接去掉v-bind,就可以省略局部引入的步骤,非常的方便

  1. <el-button icon="Search" circle />
  2. <el-button type="primary" icon="Edit" circle />
  3. <el-button type="success" icon="Check" circle />
  4. <el-button type="info" icon="Message" circle />
  5. <el-button type="warning" icon="Star" circle />
  6. <el-button type="danger" icon="Delete" circle />

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/133366
推荐阅读
相关标签
  

闽ICP备14008679号