npm 包 mxpicker 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 mxpicker 使用教程

简介

mxpicker 是一款基于 React 开发的轻量级下拉框组件，支持自定义弹窗模板、自定义选项列表数据以及回调函数等功能。它提供了丰富的配置选项，在实际开发中应用非常灵活，不仅可以作为下拉框控件，也可以应用于多选框、单选框、搜索框等交互页面场景中。

安装

通过 npm 安装：

npm install mxpicker --save

引入 mxpicker 组件：

import MxPicker from 'mxpicker';

API

1. props

className: 可选，自定义样式名，格式为字符串。
style: 可选，自定义样式，格式为对象。
themeColor: 可选，设置主题色，格式为字符串。
showTitle: 可选，是否显示选项框标题，格式为布尔值，默认为 true。
title: 可选，选项框标题，格式为字符串，默认为 "请选择"。
options: 必填，选项数据，格式为数组，如下：

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

selected: 可选，已选择的选项值，支持单个选项值和多个选项值，格式为字符串或字符串数组，如下：

// 单选
selected="1"

// 多选
selected={["1", "2"]}

multiple: 可选，是否多选，格式为布尔值，默认为 false。
dropdownWidth: 可选，选项框宽度，格式为字符串，单位为 px，默认为自适应。
dropdownMaxHeight: 可选，选项框最大高度，格式为字符串，单位为 px，默认为自适应。
dropdownTemplate: 可选，自定义选项框模板，格式为函数组件，如下：

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

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

onSelect: 可选，选项选择后的回调函数，格式为函数：

const handleSelect = (selected, event) => {
  console.log(selected, event);
};

<MxPicker options={options} onSelect={handleSelect} />

onOpenDropdown: 可选，选项框打开后的回调函数，格式为函数：

const handleOpenDropdown = (event) => {
  console.log(event);
};

<MxPicker options={options} onOpenDropdown={handleOpenDropdown} />

onCloseDropdown: 可选，选项框关闭后的回调函数，格式为函数：

const handleCloseDropdown = (event) => {
  console.log(event);
};

<MxPicker options={options} onCloseDropdown={handleCloseDropdown} />

2. methods

openDropdown: 打开选项框，调用方式如下：

const mxpickerRef = useRef(null);

<button onClick={() => mxpickerRef.current && mxpickerRef.current.openDropdown()}>打开选择器</button>

<MxPicker ref={mxpickerRef} options={options} />

closeDropdown: 关闭选项框，调用方式如下：

const mxpickerRef = useRef(null);

<button onClick={() => mxpickerRef.current && mxpickerRef.current.closeDropdown()}>关闭选择器</button>

<MxPicker ref={mxpickerRef} options={options} />

getSelected: 获取已选择的选项值，调用方式如下：

const mxpickerRef = useRef(null);

<button onClick={() => console.log(mxpickerRef.current && mxpickerRef.current.getSelected())}>获取选择结果</button>

<MxPicker ref={mxpickerRef} options={options} />

示例

1. 基本用法

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

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

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

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

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

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

2. 多选用法

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

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

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

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

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

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

总结

mxpicker 是一款非常灵活、易于使用的下拉框组件，在实际项目开发中应用广泛。在本文中，我们介绍了它的基本用法、多选用法以及 API 详细信息。我们相信，通过 mxpicker 的使用教程，你已经掌握了这款组件的核心技术，并能够在实际应用场景中做出更好的效果和体验。

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