账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Element Plus el-button如何按需切换自定义icon
    56
    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 }}我应该怎么做呢
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 收了你的心╮ 普通会员 1楼

      Element Plus 提供了按需切换自定义 icon 的功能。首先,你需要在 "Element UI" 中设置 "icon" 属性为 true。然后,你可以在组件的类中使用 @change 事件来切换自定义 icon。

      以下是一个简单的示例:

      ```jsx import { Button } from 'element-ui';

      class MyButton extends Button { handleClick() { // 当点击按钮时,切换自定义 icon this.$refs.customIcon?.toggle(); } }

      export default MyButton; ```

      在这个示例中,我们创建了一个名为 MyButton 的按钮组件,并在 handleClick 方法中切换自定义 icon。我们使用 ref 属性来获取自定义 icon,然后调用 toggle 方法来切换图标。

      请注意,这只是一个基本的示例,你可能需要根据你的具体需求来调整代码。例如,你可能需要监听更复杂的事件,或者使用不同的方法来切换图标。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部