介绍
@polymer/iron-selector 是一个 Polymer 元素，它提供了一个可配置的选择器，可用于选择一组特定的子元素。它可以控制子元素的选中状态，并提供了多种选择模式。
安装
你可以使用 npm 命令进行安装：
npm install --save @polymer/iron-selector
使用
- 导入 @polymer/iron-selector:
import '@polymer/iron-selector/iron-selector.js';
- 在 HTML 文件中使用：
<iron-selector selected="{{selectedItem}}" attr-for-selected="data-value">
<div data-value="apple">苹果</div>
<div data-value="banana">香蕉</div>
<div data-value="orange">橙子</div>
</iron-selector>在上面的示例中，我们创建了一个包含三个 div 元素的 iron-selector，每个 div 元素都有一个 data-value 属性，它用于在选择时标识该元素。
我们还将 selected 属性绑定到 selectedItem 变量，以便在选择发生变化时获取已选元素。
使用 attr-for-selected 属性指定哪个属性用于标识选择项。
属性
selected：获取或设置当前选择的元素。如果有多个选中项，则返回数组。multi：如果为 true，则可以选择多个项目。toggle：如果为 true，则可以通过单击已选中的项目来取消选择。attrForSelected：标识选择项的属性名称。selectedClass：选中项的 CSS 类名。
方法
select(index)：选择带有指定索引的项目。selectPrevious()：选择前一个项目。selectNext()：选择下一个项目。
事件
@polymer/iron-selector 发出以下事件：
iron-select：当选择项更改时发出。iron-deselect：当取消选择项目时发出。
这些事件包含以下信息：
event.target.selectedItem：选择的元素。event.target.selectedItems：所有已选择的元素。
示例
在本示例中，我们将创建一个带有三个按钮的 iron-selector，单击每个按钮会将其标记为选定状态。代码如下：
-- -------------------- ---- -------
----------- ----------------
----------
-------
-------------- -
----------------- -------
-
--------
----------------
-------------- --------------------------- -------------------------------
------- ------------------------------
------- -------------------------------
------- -------------------------------
----------------
----------- -----------------------------------
-----------
--------
----- --------- ------- --------------- -
------ --- ---- - ------ ------------- -
------ --- ------------ -
------ -
------------- -
----- -------
------ --
-
--
-
-
----------------------------------- -----------
---------
-------------在这个例子中，我们将 iron-selected 类名应用于选中的按钮，以突出显示其当前状态。我们还使用了一个简单的数据绑定，以显示用户选择的项。注意，我们在 properties 部分里定义了一个 selectedItem 属性，它被绑定到 iron-selector 的 selected 属性。
结论
现在你已经学会了如何使用 @polymer/iron-selector 包，你可以在 Polymer 应用程序中使用此选择器来控制选定元素的状态，以及在选择发生更改时获取所选元素。希望你能够在你的项目中成功地应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f758325a9b7065299ccbcd7