didi / mand-mobile

💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.
https://didi.github.io/mand-mobile
Apache License 2.0
3.46k stars 772 forks source link

InputItem 输入框设置 is-title-latent 后直接导致 input 获得焦点时 placeholder 消失,建议与 title 值相关 #276

Closed Akimyou closed 5 years ago

Akimyou commented 5 years ago

Mand Mobile Version

v1.6.7

OS Version & Browser Version

macOS 10.13.6 (17G2208) 71.0.3578.98

Node Version, Package Management Tool

-

Expectant Behaviors

这种情况下,input 获得焦点时 placeholder 消失

  <md-input-item
    title="Detail address"
    placeholder="Detail address"
    is-title-latent
  >
  </md-input-item>

这种情况下,input 获得焦点时 placeholder 不应该消失

  <md-input-item
    placeholder="Detail address"
    is-title-latent
  >
  </md-input-item>

源码这里,希望可以判断下 title 为空的情况,让组件更灵活 https://github.com/didi/mand-mobile/blob/master/components/input-item/index.vue

 inputPlaceholder() {
      return this.isTitleLatent && this.isInputActive ? '' : this.placeholder
 },
xxyan0205 commented 5 years ago

这种情况下,input 获得焦点时 placeholder 不应该消失

title 为空并不是意味着它就是一个普通inputitem,并与普通inputitem有同样的行为。如果将inputPlaceholder的逻辑中耦合上title,可能就需要加注释来说明这种特殊关系。针对此种情况,更建议使用普通的inputitem,即将is-title-latent设置为false

Akimyou commented 5 years ago

普通的 inputitem 的报错信息渲染的位置不符合我们的需求,所以当时利用 is-title-latent 改变报错信息渲染的位置

现在发现 is-title-latent 还会影响 placeholder,这让我们很难办了。

xxyan0205 commented 5 years ago

对于is-title-latent设置为true的浮动类型的InputItem来说,它有两个feature,一个是title浮动显示,一个是placeholder的隐藏触发是focus。如果去掉第二个feature,对于一部分用户(已知情况)属于不兼容改动,会对他们有未知影响,所以非常抱歉无法直接改动。(关于上面提到的错误提示,我们在2.x统一改成了图中所示的样式。)

针对这个case,还是建议使用普通InputItem,可能需要外部封装,增加自定义的错误提示,而不使用其内置的错误提示。