npm 包 bse-productselector 使用教程

介绍

bse-productselector 是一款前端 npm 包，它为开发者提供了一种可定制的产品选择器功能，可以用于各种需要让用户选择产品的场景。

包含特性:

• 支持多种布局方式和样式
• 支持自定义产品列表和更新方式
• 支持数据缓存和页面缓存

安装和使用

使用该 npm 包前，需要先安装 node 和 npm。

安装

可以直接通过 npm 安装 bse-productselector。

npm install bse-productselector

引入

在你项目的 js 文件中引入该包：

import BSEProductSelector from 'bse-productselector';

基本用法

let productSelector = new BSEProductSelector(options);
productSelector.init();

配置项

options 包含可配置的参数：

• container: [string] 渲染到的目标元素选择器
• dataUrl: [string] 获取产品列表的 AJAX 接口地址
• dataMethod: [string] 获取产品列表的 AJAX 请求方式，默认 GET
• dataParams: [object] 获取产品列表的 AJAX 请求参数，默认 {}
• type: [string] 布局方式，可选参数 grid、table，默认 grid
• selected: [array] 默认选中的产品 id，格式为 [ "id1", "id2" ]，默认 []
• onSelect: [function] 产品选中事件回调
• cacheKey: [string] 缓存数据唯一标识，默认选项参数拼接而成的字符串
• cacheExpires: [number] 缓存数据过期时间，单位毫秒，默认 300000（5 分钟）
• loadingText: [string] 获取数据时的加载提示信息，默认为“加载中”

-- -------------------- ---- -------
--- ------- - -
  ---------- --------------------
  -------- ----------------
  ----------- -------
  ----------- -
    --------- -----
  --
  ----- --------
  --------- - ------ ----- --
  --------- -------------------------- -
    ------------------------------
  --
  --------- ---------------
  ------------- -------
  ------------ -------- --------
--
--- --------------- - --- ----------------------------
-----------------------

更多用法

如果你需要更多的自定义与控制，可以直接调用对应方法。

-- -------------------- ---- -------
--- --------------- - --- ----------------------------

-- ------ --- --
----------------------------------------------
-- ----------
--- -------- - ---------------------------------------
-- ------- -- --
--- ---------------- - --------------------------------------
-- -----------
--- ---------------- - ------------------------------------------
-- -- -- ---------
--- ----------- - ----------------------------------
-- ----------- ----------------
-------------------------------------

示例代码

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  -------------------------- ----------
  ----- ---------------- ---------------------------------------------------------------------------------------
  -------
    ----------------- -
      ------------- -----
      --------- -------
    -
  --------
-------
------
  ---- ------------------
    ---- ------------
      ---- -----------------
        ---- ----------------------------
      ------
    ------
  ------

  ------- ----------------------------------------------------------------------------
  ------- ----------------------------------------------------------------------------------------------------
  ------- ----------------------------------------------------------------------------------
  --------
    --- ------- - -
      ---------- --------------------
      -------- ----------------
      ----------- -------
      ----------- -
        --------- -----
      --
      ----- --------
      --------- - ------ ----- --
      --------- -------------------------- -
        ------------------------------
      --
      --------- ---------------
      ------------- -------
      ------------ -------- --------
    --
    --- --------------- - --- ----------------------------
    -----------------------
  ---------
-------
-------

结论

bse-productselector 是一款可定制的产品选择器 npm 包，可以方便地嵌入到前端项目中。通过多种参数选项的配置，可以实现各种不同的产品选择功能，提高用户体验。同时，对于需要更多自定义的场景，也提供了多种函数接口来满足需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d5881e8991b448db1e7