为elementplus的图标组件设置圆形背景

实现思路

element-plus 中的图标都是单个的组件，需要配合 el-icon 组件一起使用。但这两类组件都没有自带的圆形背景，因此引入 el-tag 组件作为 el-icon 组件的容器。el-tag 自带 round 属性，可以将四个角变为圆角，但仅仅这样还不够，还有一些细节需要完善：

• el-tag 有默认的左右侧内边距 9px


• el-icon 有默认的右侧外边距 5px


• 插入图标后， tag 组件不是圆形,

按顺序解决以上的问题

• 将 el-tag 的左右侧内边距设为 4px（这一步将标签组件整体的宽高统一了，查看元素就能知道宽与高的差是 10px）；有需要的话，可以设置 5px 的右侧外边距（代替 el-icon 的外边距）


• 将 el-icon的右侧内边距设为 0

如果想要简单点，也可以使用 el-button 实现。若是作为其他组件如菜单的一部分，则最好覆盖 el-button 自带的 :hover 样式，改成菜单项整体 :hover 时才触发样式变更。

代码示例






View Detail





Edit





delete




效果展示