简介
@polymer/iron-resizable-behavior 是一个帮助你实现元素的可调整大小的 npm 包，它承载了一系列实现调整和重置大小的方法和属性。该包主要应用于 Polymer 项目开发中，如果你正在使用 Polymer 开发项目，那么 @polymer/iron-resizable-behavior 可以帮助你快速开发一个可调整大小的元素。
安装
在安装 @polymer/iron-resizable-behavior 之前，确保已经安装 Node.js 和 [npm](https://www.n pmjs.com/)，然后使用以下命令进行安装：
npm install @polymer/iron-resizable-behavior --save
使用
使用 @polymer/iron-resizable-behavior 模块来定义具有可调整大小功能的元素，该模块为使用此功能提供了类、属性和方法。
-- -------------------- ---- -------
------ - --------------- ---- - ---- --------------------------------------
------ - --------------------- - ---- --------------------------------------------------------------
---
- --------------
- --------
- -------- ----------------
- ------------- ---------------------
--
----- ------------------ ------- ------------------------------------- -
------ --- ---------- -
------ -----
-------
----- -
-------- ------
------ ------
------- ------
----------------- -----
-
--------
--
-
-
--------------------------------------------- --------------------在上面的代码中，我们定义了一个名为 MyResizableElement 的自定义元素，并将其与 IronResizableBehavior mixin 绑定，然后将其暴露为 my-resizable-element 标签名。在布局中使用此元素时，它现在可以使用以下方法调整大小：
const resizableElement = document.querySelector('my-resizable-element');
resizableElement.notifyResize();
notifyResize()方法通知自定义元素，其尺寸已更改，并触发一个 "iron-resize" 事件。
事件
在使用 @polymer/iron-resizable-behavior 时，它将自动注册和触发以下事件：
iron-resize: 当元素大小改变时触发。
如果你想监听 iron-resize 事件并做出响应，则只需将事件监听器添加到你的元素上：
const resizableElement = document.querySelector('my-resizable-element');
resizableElement.addEventListener('iron-resize', () => console.log('Resized!'));属性
resizable: 指示元素是否应可通过用户调整其大小，在默认情况下，该属性已设置为 true。
-- -------------------- ---- -------
----- ------------------ ------- ------------------------------------- -
------ --- ------------ -
------ -
---------- -
----- --------
------ ----
-
--
-
-方法
notifyResize(): 通知自定义元素已更改大小，并触发 "iron-resize" 事件。
总结
现在你已经知道了如何在 Polymer 项目中使用 @polymer/iron-resizable-behavior 模块来创建具有可调整大小功能的元素。在更深入地学习和掌握该 npm 包的使用方法后，你可以在项目中快速开发出丰富多彩的可调整大小元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f757519a9b7065299ccbcc8