我正在使用iron-form将表单提交到后端Web服务的Polymer应用程序。表单中的元素之一是一个框，用户可以在其中选择多个元素。
将paper-dropdown-menu与具有paper-listbox设置的multi一起使用是可行的，但是UX太可怕了，因为用户在不打开下拉菜单（并阻止其他元素）的情况下看不到选择了哪些元素。另外-需要更多的点击才能操作。
理想情况下，我们只使用paper-listbox而不使用paper-dropdown-menu，因为这正是我们所需的UI-与HTML的经典<select multiple>类似，但具有Material Design光泽。但是，如果没有paper-dropdown-menu包装器，iron-form不会选择paper-listbox所选值，也不会提交这些值。
我注意到iron-form支持经典的HTML <select>（甚至支持multiple行为），但是与表单的其余部分形成鲜明对比的是，该UI令人讨厌。
还有其他可以环绕paper-listbox的内容，以使表单在不修改原始paper-listbox UI的情况下运行，也可以使paper-dropdown-menu具有“始终打开”模式吗？如果这些都不起作用（顺便说一句，我也不能工作），我们还能做什么？
最佳答案
您可以将<paper-listbox>包装在实现<iron-form-element-behavior>的自定义元素中。该行为公开了一个value属性，该属性可以绑定到<paper-listbox>.selectedValues，从而允许<iron-form>提交多个列表框值：
<dom-module id="multi-listbox">
<template>
<paper-listbox multi selected-values="{{value}}">
<content></content>
</paper-listbox>
</template>
<script>
Polymer({
is: 'multi-listbox',
behaviors: [Polymer.IronFormElementBehavior]
});
</script>
</dom-module>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
_onResponse: function(e) {
this._response = JSON.stringify(e.detail.response, null, 2);
},
_submit: function() {
this._response = null;
this.$.form.submit();
}
});
Polymer({
is: 'multi-listbox',
behaviors: [
Polymer.IronFormElementBehavior
],
properties: {
value: {
type: Array,
value: () => [],
notify: true
},
invalid: {
type: Boolean,
reflectToAttribute: true
}
},
validate: function() {
const isValid = !this.required || !!(this.value && this.value.length > 0);
this.invalid = !isValid;
console.log('invalid', this.invalid);
return isValid;
},
_clearError: function() {
this.invalid = false;
}
});
});<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="iron-validatable-behavior/iron-validatable-behavior.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
multi-listbox,
paper-checkbox,
paper-button {
margin: 0.5em;
}
</style>
<paper-checkbox active="{{_required}}">Required</paper-checkbox>
<form is="iron-form"
id="form"
action="//httpbin.org/get"
on-iron-form-response="_onResponse">
<multi-listbox name="listbox-values" required="[[_required]]">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
<paper-item>Item 4</paper-item>
</multi-listbox>
<paper-button raised
on-tap="_submit">Submit</paper-button>
</form>
<pre>[[_response]]</pre>
</template>
</dom-module>
<dom-module id="multi-listbox">
<template>
<style>
:host {
display: block;
}
paper-listbox {
border: solid 2px lightgray;
}
:host([invalid]) paper-listbox {
border: solid 2px var(--error-color, red);
}
</style>
<paper-listbox multi
selected-values="{{value}}"
on-iron-activate="_clearError">
<content></content>
</paper-listbox>
</template>
</dom-module>
</body>codepen
关于javascript - 如何使用Polymer来实现纸张样式的“<选择多个>”框，而没有“paper-dropdown-menu”？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41345496/