vue3 封装一个按钮组件（可自定义按钮样式）

效果图

鼠标悬浮有对应的文字提示，且图标出现背景色和颜色

 

实现

目前提供五个固定样式的图标及三个用户自定义的图标，可根据需要补充

组件代码

使用方法

图标数据传一个BtnAction数据格式的数组，使用默认提供的图标，只要一个type字段就可以

click事件根据对应图标类型写@click:[type]

const actions = [
  { type: 'edit' },
  {
    type: 'custom1',
    tooltip: t('common.copy'),
    icon: 'ph:copy'
  },
  {
    type: 'custom2',
    tooltip: t('common.export'),
    icon: 'svg-icon:v2-arrow_download'
  },
  { type: 'delete' }
] as any[]