0


el-button自定义图片显示

想要在button上显示自己的图片,而不是使用element-ui提供的el-icon
效果如图:中间这个按钮就是我自己的图片,devops.png
在这里插入图片描述

具体实现方法如下:

  1. 首先将图片引入,引入路径随你,我是将图片放到assets目录下在这里插入图片描述
  2. 在按钮处自定义icon
<el-button@click="to_devops(scope.row.pr_url)"><iclass="el-icon-devops"/>        // 自定义icon,这个el-icon-devops是我自己命名的
                  </el-button>
  1. 在css中设置el-icon-devops
::v-deep .el-icon-devops{background:url('../../../assets/devops.png') center no-repeat;            // 注意此处的url,在这里引入自己的图片
  font-size: 12px;background-size: cover;}::v-deep .el-icon-devops:before{content:"替";font-size: 12px;visibility: hidden;}

最后就可以显示出来啦。我用的是默认按钮,所以背景是白色的,如果想要其它背景色可以自己调。

标签: 前端

本文转载自: https://blog.csdn.net/changyana/article/details/127647388
版权归原作者 ChangYan. 所有, 如有侵权,请联系我们删除。

“el-button自定义图片显示”的评论:

还没有评论