Element Plus el-button如何按需切换自定义icon

daoSs
  • 0
新手上路,请多包涵

element plus更新svg图标后,我通过如下方案适配现有项目中的icon font(毕竟没有办法要求项目升级icon方案)。

<el-button :icon='CustomizedIcon ' />

const CustomizedIcon = (props: any) => {
  return h(`i`, {
    class:  'xxx_icon'  项目中自定义的icon
  })
}

setup() {
   return {
      CustomizedIcon :markRaw(CustomizedIcon )
   }
}

现在又有问题了,如果说我需要数据驱动button切换icon,我要怎么做呢。

尝试1没有效果:

<el-button :icon='dropButtonIcon '/>

setup() {
  const currentIcon = ret('icon1');
  iconMap={
    icon1:  CustomizedIcon1,
    icon2:  CustomizedIcon2
  };
  
  const dropButtonIcon = computed(() => iconMap[currentIcon.value]);

  // const someEvent = () => {
    currentIcon.value = 'icon2';
  }

  return {
    dropButtonIcon,
    someEvent
  }
}

尝试2也没有效果:

<el-button :icon='currentIcon==="icon1"? CustomizedIcon1:CustomizedIcon2'/>

setUp() {
  return {
    CustomizedIcon1,
    CustomizedIcon2,
    currentIcon
  }
}

我应该怎么做呢

回复
阅读 723
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏