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

xInput组件show-clear点击时,如何添加事件 ? #2603

Closed
blank1u opened this issue Apr 7, 2018 · 35 comments
Closed

xInput组件show-clear点击时,如何添加事件 ? #2603

blank1u opened this issue Apr 7, 2018 · 35 comments

Comments

@blank1u
Copy link

blank1u commented Apr 7, 2018

xInput组件show-clear点击时,如何添加事件 ?

@airyland
Copy link
Owner

airyland commented Apr 7, 2018

不支持。什么需求需要在这里作自定义处理?

@airyland
Copy link
Owner

airyland commented Apr 8, 2018

你这个内容其实是跟 value 绑定的,foucs 时就是将内容置为空,你 watch 下 value,当值为空时做你的操作就可以了。

@wanghui5
Copy link

我现在用的x-input清除按钮不起作用,我添加这个事件@on-click-clear-icon也不起作用,啥情况,求解

@wanghui5
Copy link

之前用的是可以的,过了一段时间不能用了x-input清除按钮不起作用

@shuqiu
Copy link

shuqiu commented Apr 23, 2019

我也是,x-input清除按钮不起作用

@nollyhi
Copy link

nollyhi commented Apr 24, 2019

我也是,x-input清除按钮不起作用, @on-click-clear-icon事件也不起作用

@wanghui5
Copy link

wanghui5 commented Apr 24, 2019 via email

@totorofly
Copy link

我也是,x-input清除按钮不起作用, @on-click-clear-icon事件也不起作用。使用的版本是:2.9.2

@wanghui5
Copy link

wanghui5 commented Apr 28, 2019 via email

@dingangang
Copy link

清除按钮失效原因(安卓机情况下):
1、点击清除按钮时会先执行onBlur。其中将isFocus赋值为false
2、此时会先判定按钮不可见,然后其实就没有出发对应的clear事件。
我尝试在onBlur方法中延迟isFocus的执行。
onBlur ($event) {
this.setTouched()
this.validate()
setTimeout(function () {
this.isFocus = false
}, 100)

this.$emit('on-blur', this.currentValue, $event)
},

后面在安卓机中正常。
但是我这样做可能不是最好的方法,如果有大手指,希望能进行一下其他的修复。

@dingangang
Copy link

@airyland 希望大佬能修复下。

@dingangang
Copy link

@wanghui5 可以先按我这样改下。可以用的。

@wanghui5
Copy link

wanghui5 commented Apr 29, 2019 via email

@wanghui5
Copy link

wanghui5 commented Apr 29, 2019 via email

@jaling530
Copy link

点击清除Icon,可以清除了吗

@lwh2015
Copy link

lwh2015 commented May 29, 2019

目前为止,2.9.4点击icon还是不可以清除输入的内容,请问这个bug修复了吗?

@Johnson-code
Copy link

到2019-6-8为止,清除按钮和 @on-click-clear-icon事件问题还是没有修复。我不知道我还能不能坚持下去,希望作者能即使修复。

@flwzz
Copy link

flwzz commented Jun 26, 2019

到2019-6-26为止,清除按钮和 @on-click-clear-icon事件问题还是没有修复。我不知道我还能不能坚持下去,希望作者能即使修复。

@wanghui5
Copy link

wanghui5 commented Jun 26, 2019 via email

@Secret-zero
Copy link

到2019-7-9为止,清除按钮和 @on-click-clear-icon事件问题还是没有修复。我不知道我还能不能坚持下去,希望作者能即使修复。

@nimengmeng
Copy link

到2019-7-17为止,清除按钮和 @on-click-clear-icon事件问题还是没有修复。我不知道我还能不能坚持下去,希望作者能即使修复。

@kiros666
Copy link

到2019-7-24为止,清除按钮和 @on-click-clear-icon事件问题还是没有修复。我不知道我还能不能坚持下去,希望作者能即使修复。

@chenshuqun
Copy link

到2019-08-03为止,清除按钮和 @on-click-clear-icon事件问题还是没有修复。我不知道我还能不能坚持下去,希望作者能即使修复。

@easy868
Copy link

easy868 commented Aug 5, 2019

清除按钮失效原因(安卓机情况下):
1、点击清除按钮时会先执行onBlur。其中将isFocus赋值为false
2、此时会先判定按钮不可见,然后其实就没有出发对应的clear事件。
我尝试在onBlur方法中延迟isFocus的执行。
onBlur ($event) { this.setTouched() this.validate() setTimeout(function () { this.isFocus = false }, 100) this.$emit('on-blur', this.currentValue, $event) },

后面在安卓机中正常。
但是我这样做可能不是最好的方法,如果有大手指,希望能进行一下其他的修复。

请问下这是要改源码吗?怎么改?

@xiatouman
Copy link

清除按钮失效原因(安卓机情况下):
1、点击清除按钮时会先执行onBlur。其中将isFocus赋值为false
2、此时会先判定按钮不可见,然后其实就没有出发对应的clear事件。
我尝试在onBlur方法中延迟isFocus的执行。
onBlur ($event) { this.setTouched() this.validate() setTimeout(function () { this.isFocus = false }, 100) this.$emit('on-blur', this.currentValue, $event) },
后面在安卓机中正常。
但是我这样做可能不是最好的方法,如果有大手指,希望能进行一下其他的修复。

请问下这是要改源码吗?怎么改?

只要你使用FastClick 清除icon就应该会生效。

@miseli
Copy link

miseli commented Aug 26, 2019

楼上说的使用FastClick方法,没看懂.我目前是把清除图标的显示条件改掉了.显示效果稍微不友好.
定位到vux的安装目录,私有or全局的node_modules\vux\src\components\x-input\index.vue
从文件开头搜索到的第一个isFocus就是清除按钮显示的条件,把isFocus的条件删除.
源代码:
<icon type="clear" v-show="!hasRightFullHeightSlot && !equalWith && showClear && currentValue !== '' && !readonly && !disabled && isFocus" @click.native="clear"></icon>
修改后:
<icon type="clear" v-show="!hasRightFullHeightSlot && !equalWith && showClear && currentValue !== '' && !readonly && !disabled" @click.native="clear"></icon>

@wangxiuyan0228
Copy link

到2019-09-18为止,清除按钮和 @on-click-clear-icon事件问题还是没有修复。我不知道我还能不能坚持下去,希望作者能即使修复。

@xiatouman
Copy link

楼上说的使用FastClick方法,没看懂.我目前是把清除图标的显示条件改掉了.显示效果稍微不友好.
定位到vux的安装目录,私有or全局的node_modules\vux\src\components\x-input\index.vue
从文件开头搜索到的第一个isFocus就是清除按钮显示的条件,把isFocus的条件删除.
源代码:
<icon type="clear" v-show="!hasRightFullHeightSlot && !equalWith && showClear && currentValue !== '' && !readonly && !disabled && isFocus" @click.native="clear"></icon>
修改后:
<icon type="clear" v-show="!hasRightFullHeightSlot && !equalWith && showClear && currentValue !== '' && !readonly && !disabled" @click.native="clear"></icon>

当你的vue项目中import FastClick from 'fastclick'之后 清除按钮就会生效

@Arsenal072
Copy link

到2019-10-23为止,清除按钮和 @on-click-clear-icon事件问题还是没有修复。我不知道我还能不能坚持下去,希望作者能即使修复。准备弃坑了

@wanghui5
Copy link

wanghui5 commented Oct 24, 2019 via email

@fwsc
Copy link

fwsc commented Nov 22, 2019

到2019-11-22为止,清除按钮和 @on-click-clear-icon事件问题还是没有修复。我不知道我还能不能坚持下去,希望作者能即使修复。准备弃坑了

@qiaodeye
Copy link

@MummyCuke 谢谢, 你这个方法, 试过时候, 使用chrome模拟移动端浏览器, 清除按钮生效了, 可是直接用Chrome打开不生效

npm install fastclick --save
在 main.js 引用
const FastClick = require('fastclick') FastClick.attach(document.body)

@SethLee23
Copy link

2019/12/28 清除按钮失效问题仍未修复,项目中使用fastclick解决了这个问题,望修复

@kiros666
Copy link

@airyland 望大佬看看这个issue

@zhangzhengyi12
Copy link

不想改node_mod目录的可以劫持对应方法

// main.js 代码必须放在新建APP Vue实例之前
import { XInput } from 'vux'
XInput.methods.onBlur = function ($event) {
  this.setTouched()
  this.validate()
  setTimeout(() => {
    this.isFocus = false
    this.$emit('on-blur', this.currentValue, $event)
    this.blur()
  }, 10)
}

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