Weex开发Input标签扩展

Weex开发Input标签扩展

  1. 解决Android的WeexSDK0.18.0中值被清空后,input标签内容没有清空
  2. 解决input标签type不能动态修改

问题1:前不久升级WeexSDK0.17.0至0.18.0,出现input标签绑定值,当清空值后,input标签内容没有跟着清空。
Weex开发Input标签扩展_第1张图片
问题2:input标签的type不支持动态修改,尝试:type也无法实现,在查看相关SDK源码发现也只是对type加注解,这方法只会在初始化时执行一次。
Weex开发Input标签扩展_第2张图片
针对以上两个问题,我的解决方式为写个扩展组件继承AbstractEditComponent,在扩展组件中增加两个方法:clear方法用于清空数据,show方法用于显示或隐藏输入的密码。

/**
 * Created by 吴志杰 on 2018-03-09.
 * Desc:解决WeexSDK0.18.0,值被清除后,input标签显示的内容没有跟着清空
 * input标签type不能动态修改的情况
 */

public class WxEditText extends AbstractEditComponent {

    public WxEditText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, boolean isLazy) {
        super(instance, dom, parent, isLazy);
    }

    @JSMethod
    public void clear() {
        WXEditText host = getHostView();
        if (host != null && host.getText().length() > 0) {
            host.getText().clear();
        }
    }

    @JSMethod
    public void show(boolean isShowPassWord){
        WXEditText editText = getHostView();
        if (editText != null){
            if (isShowPassWord){
                editText.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
            }else {
                editText.setTransformationMethod(PasswordTransformationMethod.getInstance());
            }
        }
    }
}

别忘了在继承的Application中加入该组件

  WXSDKEngine.registerComponent("wxedit", WxEditText.class);

vue界面不贴代码,附上主要图片。注意标签名以及ref即可。

Weex开发Input标签扩展_第3张图片

Weex开发Input标签扩展_第4张图片
效果图由于没有显示和隐藏图标,这里使用现有图标进行替换。
Weex开发Input标签扩展_第5张图片

你可能感兴趣的:(Weex开发Input标签扩展)