Weex开发Input标签扩展

Weex开发Input标签扩展

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

问题1：前不久升级WeexSDK0.17.0至0.18.0，出现input标签绑定值，当清空值后，input标签内容没有跟着清空。

问题2：input标签的type不支持动态修改，尝试:type也无法实现，在查看相关SDK源码发现也只是对type加注解，这方法只会在初始化时执行一次。

针对以上两个问题，我的解决方式为写个扩展组件继承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即可。

效果图由于没有显示和隐藏图标，这里使用现有图标进行替换。