Question

我正试图通过<paper-dialog>点击打开<paper-input>，但我想忽略<paper-input>浮动标签上的点击次数。我尝试使用下面的CSS mixin禁用标签的pointer-events，但它似乎没有效果。我怎么能做到这一点？

HTML模板：

<paper-input class="select" on-click="displayTimezone" 
   value="{{timeZone}}"  
   readonly
   label="Select Time Zone">
   <iron-icon icon="expand-more" suffix></iron-icon>
</paper-input>
<paper-dialog id="timezoneDialog"></paper-dialog>

CSS mixin：

paper-input {
   --paper-input-container-label-focus {
      pointer-events: none !important;
   }
}

Answer 1

您可以使用paper-input-container。

<paper-input-container>
  <label slot="label">Select Time Zone</label>
  <iron-input slot="input" on-click="displayTimezone" bind-value="{{timeZone}}">
    <input>
  </iron-input>
  <iron-icon icon="expand-more" slot="suffix"></iron-icon>
</paper-input-container>

要获得材质设计，您可以使用--paper-input-container-shared-input-style mixin。

设置样式

<style>
  :host {
    display: block;
    padding: 8px 0;
    --paper-input-container-shared-input-style: {
      position: relative; /* to make a stacking context */
      outline: none;
      box-shadow: none;
      padding: 0;
      width: 100%;
      max-width: 100%;
      background: transparent;
      border: none;
      color: var(--paper-input-container-input-color, var(--primary-text-color));
      -webkit-appearance: none;
      text-align: inherit;
      vertical-align: bottom;
      @apply --paper-font-subhead;
    };
    @apply --paper-input-container;

  }
  input { border:none; width: 100%;}
  input:focus { outline: none;}
</style>

Answer 2

您可以检查event target仅处理来自内部<input>的点击（忽略来自标签或下划线的点击）：

displayTimezone: function(e) {
  // open dialog only for <input> clicks
  if (e.target.localName === 'input') {
    this.$.timezoneDialog.open();
  }
}

demo

点击纸张输入

2 个答案: