简介
qb-movie-list 是一个前端用来展示电影列表的 npm 包。它提供了一个简单但功能强大的界面,可以轻松地展示电影的海报和简介。
安装
使用 npm 安装 qb-movie-list,输入以下命令:
npm install qb-movie-list --save
使用
引入
在 HTML 文件中引入 qb-movie-list:
<head> <link rel="stylesheet" href="node_modules/qb-movie-list/dist/qb-movie-list.css"> </head> <body> <script src="node_modules/qb-movie-list/dist/qb-movie-list.min.js"></script> </body>
初始化
在 JS 文件中初始化 qb-movie-list:
-- -------------------- ---- ------- ----- ------ - - - ------ ------- ------- ------------------------------------------------- ------------ ----------- -- - ------ --------- ------- ------------------------------------------------- ------------ ---------------------- - -- ----- --------- - --- ----------- ---------- ------------- ------ ---
Options
container
:必选,表示包裹电影列表的容器,可以是 DOM 或者 DOM 的 ID。movies
:必选,表示电影数据,一个数组,数组的每一项是一个包含title
、poster
、description
三个属性的对象。columns
:可选,表示电影列表的列数,默认为 2。canSort
:可选,表示是否可以拖拽排序,默认为 true。
实例
下面是一个完整的示例:
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------------- ---------- ----- ---------------- --------------------------------------------------------- ------- ----------- - ------ ------ - -------- ------- ------ ---- ---------------------- ------- -------------------------------------------------------------------- -------- ----- ------ - - - ------ ------- ------- ------------------------------------------------- ------------ ----------- -- - ------ --------- ------- ------------------------------------------------- ------------ ---------------------- -- - ------ ---------- ------- - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------