Question

有没有办法以编程方式切换paper-input的类型？我有一个类型为paper-input的{{1}}元素，我想将类型更改为password，反之亦然。

这是它的外观：

这是元素的实现：

text

这是JavaScript部分：

<paper-input id="oldPassword"
             type="password"
             label="Old password"
             no-label-float required>
  <paper-icon-button suffix on-tap="toggleVisibility" 
                     icon$="[[setVisibility(passVisible)]]">
  </paper-icon-button>
</paper-input>

问题是类型设置正确但toggleVisibility (e) { this.passVisible = !this.passVisible; e.currentTarget.type = this.passVisible ? 'text' : 'password'; }元素没有重绘。

感谢您的帮助！

Answer 1

在这种情况下，e.currentTarget实际上是<paper-icon-button>，而不是<paper-input>。

您可以使用this.$.oldPassword明确引用密码输入：

HTMLImports.whenReady(() => {
  "use strict";

  Polymer({
    is: 'x-foo',
    properties: {
      passVisible: {
        type: Boolean,
        value: false
      }
    },
    setVisibility(visible) {
      return visible ? 'icons:visibility' : 'icons:visibility-off';
    },
    toggleVisibility(e) {
      this.passVisible = !this.passVisible;
      this.$.oldPassword.type = this.passVisible ? 'text' : 'password';
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <paper-input id="oldPassword"
             type="password"
             label="Old password"
             no-label-float
             required>
        <paper-icon-button suffix
                           on-tap="toggleVisibility" 
                           icon="[[setVisibility(passVisible)]]">
        </paper-icon-button>
      </paper-input>
    </template>
  </dom-module>
</body>

codepen

...或者你可以找到paper-input的{{1}}祖先，如果你想重用其中两个e.currentTarget的按钮处理程序，这可能是有意义的。相同的自定义元素（例如，旧密码输入和新密码输入）：

paper-input

HTMLImports.whenReady(() => {
  "use strict";

  Polymer({
    is: 'x-foo',
    properties: {
      passVisible: {
        type: Boolean,
        value: false
      }
    },
    setVisibility(visible) {
      return visible ? 'icons:visibility' : 'icons:visibility-off';
    },
    _getPaperInputAncestor(el) {
      while (el && el.localName !== 'paper-input') {
        el = el.parentElement;
      }
      return el;
    },
    toggleVisibility(e) {
      this.passVisible = !this.passVisible;
      const input = this._getPaperInputAncestor(e.currentTarget);
      input.type = this.passVisible ? 'text' : 'password';
    }
  });
});

codepen

Answer 2

Tony的回答很好地回答了你的问题。

我想通过在元素中引入更多声明性绑定来添加它。

请参阅下文，了解如何通过观察图标按钮的active属性并将其与计算绑定一起使用来切换输入类型和图标。

＆＃13;

Polymer({
  is: 'some-form',
  getPasswordType: function (passVisible) {
    return passVisible ? 'text' : 'password';
  },
  getVisibilityIcon: function(isVisible) {
    return isVisible ? 'visibility' : 'visibility-off';
  }
})

＆＃13;

<base href="https://polygit.org/components/">

<link href="polymer/polymer.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link href="iron-icons/iron-icons.html" rel="import">

<some-form></some-form>

<dom-module id="some-form">
  <template>
    <paper-input id="oldPassword"
                 type="[[getPasswordType(passVisible)]]"
                 label="Old password"
                 value="secret"
                 no-label-float required>
        <paper-icon-button suffix toggles 
                           active="{{passVisible}}"
                           icon$="[[getVisibilityIcon(passVisible)]]">
      </paper-icon-button>
    </paper-input>
  </template>
</dom-module>

＆＃13;

以编程方式更改纸张输入类型

2 个答案: