在前端开发中，经常需要使用对话框来显示一些内容，而会在对话框中显示过多的内容时，对话框就会出现滚动条。本文将介绍如何使用 @npm-polymer/paper-dialog-scrollable 包来实现一个可滚动的对话框。
安装
在使用 @npm-polymer/paper-dialog-scrollable 之前，先确保已经安装 Node.js 和 npm。在终端中执行以下命令：
npm install --save @npm-polymer/paper-dialog-scrollable
使用方法
首先，在 HTML 文件中引入所需的 CSS 和 JS 文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@npm-polymer/paper-dialog-scrollable@3.0.0/paper-dialog-scrollable.css"> <script src="https://cdn.jsdelivr.net/npm/@npm-polymer/paper-dialog-scrollable@3.0.0/paper-dialog-scrollable.js"></script>
然后，在 HTML 文件中定义一个包含文本的对话框：
-- -------------------- ---- -------
--------- --------------------
-------
------------ -
------ ------
------- ------
-------- -----
-
--------
--------------
---------------
-------------------------
-------------
--------------
--------------
-----------------------
-------------------
--------------------------
---- ----------------
------------- --------------------------------
------
---------------
-----------注意：paper-dialog-scrollable 要放在 paper-dialog 的内部。
接下来，在 JavaScript 文件中调用上面定义的模板：
-- -------------------- ---- -------
------ - --------------- ---- - ---- -------------------
----- --------- ------- -------------- -
------ --- ---------- -
------ -----
------- -------------------------------------
------- ------ ---------- ----
----------
-----------------------------------------------
------------- ----------- --------------
--------- --------------- --------- ------------- ----
--------- ----------- ------ ------------- ----
--------- ------------- --------------------
-- ------------- --
-----------
--------
---------
--- ------------------ - -- ----- ---
---------- --------------
----------- -
------- -
----- -------
------- -----
------ ---------- -
------ -------------------------------- ---------------
-
-
--
---
---------
---- ----------------
------------- --------------------------------
------------- --------------- -------------------------------------
------
-----------
-----------
---------------
-----------
---------
--
-
------ --- ------------ -
------ -
----------- -
----- --------
------ ------
--------- --------------------
--
-------- -
----- ------
------ --
--
--
-
------------------- -
--------------------------
----------------------------------------------------- -------------------
-
---------------------- -
-----------------------------
-------------------------------------------------------- -------------------
-
--------------------------- -
-- -------- --- ----- -
---------------------
- ---- -
----------------------
-
-
------------- -
---------------------- ------
-
------------- -
------ ------------------------- ------ -- -
-- -------------- -- ------------------------------------- -
----- ------- - ---------------------
-------------- -- ------------------ -- ------------------ --- ----
------ -
------ ------
--------- ---------------------------------------- ---------
--
- ---- -
------ -
------ ------
--------- -----
--
-
---
-
---------------------------- -------- -
----- ----- - ------------ -- ---
----- ------- - -------------- -- ---
----- ------------ - ------------------- -- ------------------ -- -----
----- ------------- - ------------------- -- ------------------- -- -----
----- -------- - -
--------- ------
---------------- -----
----------------- ----------
------------ ------
------------
----- --------------- - -
------------------ -------------------- --------------------
------- ----------------------- ----------------------
------------- -----
----------- ------
------------
----- -------- - -
------------- ------------------
-----------------
-------------------------
-----------------
--------------------------
---- --------------------
------------- ----------------------------- - ----------------- - ------------------
------------- --------------- -------------------------- -------------- ------------------------- - ------------------ - ------------------
------
---------------
--
------ ---------
-
-使用 _getDialogs() 方法返回在页面上展示的对话框模板组成的数组，数组的每个项包含模板和模板对应的 index，模板会在定义的模板中插入其中。
示例代码
完整的 HTML 文件示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ------------------------------------ ---------
----- ---------------- -----------------------------------------------------------------------------------------------------------
-------
------
------ ------------------------------------ ------
------- -------------------------------------
--------- --------------------
-------
------------ -
------ ------
------- ------
-------- -----
-
--------
--------------
---------------
-------------------------
-------------
--------------
--------------
-----------------------
-------------------
--------------------------
---- ----------------
------------- --------------------------------
------
---------------
-----------
------- ------------------------------------------------------------------------------------------------------------------
--------
-------- ------------ -
--- -------- - ------------------------------------------
--- ------ - -----------------------------------------------
--------------
-
---------
-------
-------完整的 JavaScript 文件示例代码：
-- -------------------- ---- -------
------ - --------------- ---- - ---- -------------------
----- --------- ------- -------------- -
------ --- ---------- -
------ -----
------- -------------------------------------
------- ------ ---------- ----
----------
-----------------------------------------------
------------- ----------- --------------
--------- --------------- --------- ------------- ----
--------- ----------- ------ ------------- ----
--------- ------------- --------------------
-- ------------- --
-----------
--------
---------
--- ------------------ - -- ----- ---
---------- --------------
----------- -
------- -
----- -------
------- -----
------ ---------- -
------ -------------------------------- ---------------
-
-
--
---
---------
---- ----------------
------------- --------------------------------
------------- --------------- -------------------------------------
------
-----------
-----------
---------------
-----------
---------
--
-
------ --- ------------ -
------ -
----------- -
----- --------
------ ------
--------- --------------------
--
-------- -
----- ------
------ --
--
--
-
------------------- -
--------------------------
----------------------------------------------------- -------------------
-
---------------------- -
-----------------------------
-------------------------------------------------------- -------------------
-
--------------------------- -
-- -------- --- ----- -
---------------------
- ---- -
----------------------
-
-
------------- -
---------------------- ------
-
------------- -
------ ------------------------- ------ -- -
-- -------------- -- ------------------------------------- -
----- ------- - ---------------------
-------------- -- ------------------ -- ------------------ --- ----
------ -
------ ------
--------- ---------------------------------------- ---------
--
- ---- -
------ -
------ ------
--------- -----
--
-
---
-
---------------------------- -------- -
----- ----- - ------------ -- ---
----- ------- - -------------- -- ---
----- ------------ - ------------------- -- ------------------ -- -----
----- ------------- - ------------------- -- ------------------- -- -----
----- -------- - -
--------- ------
---------------- -----
----------------- ----------
------------ ------
------------
----- --------------- - -
------------------ -------------------- --------------------
------- ----------------------- ----------------------
------------- -----
----------- ------
------------
----- -------- - -
------------- ------------------
-----------------
-------------------------
-----------------
--------------------------
---- --------------------
------------- ----------------------------- - ----------------- - ------------------
------------- --------------- -------------------------- -------------- ------------------------- - ------------------ - ------------------
------
---------------
--
------ ---------
-
-
----------------------------------- -----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb73