Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

x-input右侧的错误/正确提示icon如何自由控制,官方文档里好像没有说明,看源码novalidate和 iconType有作用 #1795

Closed
FreedGo opened this issue Aug 4, 2017 · 3 comments

Comments

@FreedGo
Copy link

FreedGo commented Aug 4, 2017

image
如图,正在学习vux使用,想自由控制x-input的右侧的icon,但是官方文档里面好像没有说明如何自定义使用。看源码在使用x-input组件的时候使用novalidate && iconType这两个属性可以控制,但是用了novalidate这个属性之后is-type又不起作用了,而且这里有三个error,两个success,文档有详细说明这个地方如何使用吗?
虚心求教,望作者或其他高手解答。

<div class="weui-cell__ft">
      <icon type="clear" v-show="!equalWith && showClear && currentValue && !readonly && !disabled" @click.native="clear"></icon>

      <icon class="vux-input-icon" type="warn" :title="!valid ? firstError : ''" v-show="showWarn"></icon>
      <icon class="vux-input-icon" type="warn" v-if="!novalidate && hasLengthEqual && dirty && equalWith && !valid"></icon>
      <icon type="success" v-show="!novalidate && equalWith && equalWith === currentValue && valid"></icon>

      <icon type="success" class="vux-input-icon" v-show="novalidate && iconType === 'success'"></icon>
      <icon type="warn" class="vux-input-icon" v-show="novalidate && iconType === 'error'"></icon>

      <slot name="right"></slot>
    </div>`
@airyland
Copy link
Owner

airyland commented Aug 4, 2017

novalidate 的意思不就是不使用内部验证,is-type 当然不起作用,要是起作用两者不就冲突了,内部验证的警告图标是无法修改的。

你既想要验证又想控制右侧 icon,使用 slot=right 结合 icon 组件来实现吧。

@FreedGo
Copy link
Author

FreedGo commented Aug 4, 2017

明白了,多谢作者的秒回复

@shen-lan
Copy link

1.楼主怎么做到的验证成功显示的绿色感叹号?
2.如何做校验不成功禁止提交?/如何拿到单个文本框的校验状态 true/false ?
谢谢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants