weixin_39625337
weixin_39625337
2020-12-09 15:39

Toggle icon

88 Here is my example of toggle icon component. I think this not fully ready, so i am open to ur suggestions.

该提问来源于开源项目:nvms/vue-atlas

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

13条回答

  • weixin_39625337 weixin_39625337 5月前

    About naming, i think there will better call it onActivate and onDeactivate. WDYT ?

    点赞 评论 复制链接分享
  • weixin_39625337 weixin_39625337 5月前

    And another question is, can u explain how exactly transition should looks like ? Which one i should use ?

    点赞 评论 复制链接分享
  • weixin_39860757 weixin_39860757 5月前

    onActivate makes sense as an event or method that is triggered when activate has been set to true. that's not what's happening though, is it? you're creating an event that is triggered on mouseenter

    a simple fade transition at around 200ms would be a nice starting point

    点赞 评论 复制链接分享
  • weixin_39625337 weixin_39625337 5月前

    I think this is actually happening when mouseover fired. It's super simple handler, and it will be acceptable for all triggers. It's more common name. I mean, there mo matter what exactly triggers activating. So there no sense to create separate function for every event that may trigger icon toggling. Just like i didn't created onClick handler. Because i can assign just toggle method instead. Makes sense ?

    点赞 评论 复制链接分享
  • weixin_39860757 weixin_39860757 5月前

    looks good!

    点赞 评论 复制链接分享
  • weixin_39860757 weixin_39860757 5月前

    I've tried this in your commit, and it works fine:

    screen shot 2019-02-21 at 3 44 35 pm screen shot 2019-02-21 at 3 44 29 pm

    点赞 评论 复制链接分享
  • weixin_39625337 weixin_39625337 5月前

    See. Thanks. Seems like if there identical attribute, then it should be passed down separately.

    点赞 评论 复制链接分享
  • weixin_39860757 weixin_39860757 5月前

    indeed, my edit alternatively suggests to rename the methods to something that makes more sense, like onMouseenter and onMouseleave. show: show what? hide: hide what?

    点赞 评论 复制链接分享
  • weixin_39625337 weixin_39625337 5月前

    Seems like v-bind="$attrs" doesn't work. I am not sure why, maybe it's because or props conficts, i'm not sure now. I am trying to find why it isn't work until this components has own props.

    点赞 评论 复制链接分享
  • weixin_39860757 weixin_39860757 5月前

    you may need to disable attribute inheritance: inheritAttrs: false

    点赞 评论 复制链接分享
  • weixin_39625337 weixin_39625337 5月前

    I tried. Nope.

    点赞 评论 复制链接分享
  • weixin_39860757 weixin_39860757 5月前

    you removed the prop named size from the ToggleIcon component, disabled inheritAttrs and have set v-bind="$attrs" onto the VaIcon component.. and it still will not pass the value for size?

    点赞 评论 复制链接分享
  • weixin_39625337 weixin_39625337 5月前

    Yes. Agree. Will do. But i am not sure about third item. Purpose of that methods is to be sure, that proper state will be. Just, u know, sometimes components may have issues when one of event in cycle is missing, and everything goes wrong... I mean, if for any reason one of this event will be fired twice, component will be broken.

    点赞 评论 复制链接分享

相关推荐