* picker: add customPicker implementation with enhanced display and click handling in README

Author: catouse

lib/picker/README.md

@@ -110,110 +110,42 @@ console.log('> multiPicker', multiPicker);
 <div id="multiPicker"></div>
 ```
 
-## 使用方法
+## 复杂交互例子
 
+下面的例子默认点击提供额外的自定义操作，下拉面板需要点击右侧的图标按钮来打开。
 
-## 引入
-
-### 通过 npm
-
-```js
-import {Picker} from 'zui/picker';
-
-const picker = new Picker(element, options);
-```
-
-### 通过全局对象 `zui`
-
-```js
-const picker = new zui.Picker(element, options);
-```
-
-### 使用 React 组件
-
-```jsx
-import {render} from 'react';
-import {Picker} from 'zui/picker/react';
-
-render(element, <Picker {...options} />);
+```html:example
+<div id="customPicker" class="w-40"></div>
 ```
 
-### 使用 jQuery 扩展
-
 ```js
-$(element).picker(options);
+const customPicker = new Picker('#customPicker', {
+    items,
+    placeholder: '请选择你的最爱',
+    required: true,
+    search: false,
+    className: 'picker-btn state',
 
-const picker = $(element).data('zui.picker');
-```
+    // 在下拉菜单内显示搜索框
+    menu: {
+        searchBox: true,
+        search: undefined,
+    },
 
-## 更新下拉列表
+    // 自定义下拉菜单控件显示
+    display: (value, selections) => {
+        return {html: `<div>你选择了：${selections.map(x => x.text).join(',')}</div><style>.picker-btn {box-shadow: none!important;outline:none}.picker-btn .caret{display:none}</style><button type="button" class="picker-btn-trigger btn size-xs square"><i class="icon icon-exchange">↓</i></button>`, className: 'flex justify-between gap-2 p-px'};
+    },
 
-调用菜单组件实例上的 `render` 方法来更新下拉列表，并重新进行渲染：
+    // 自定义点击事件
+    onClick: (event) => {
+        if ($(event.target).closest('.picker-btn-trigger').length) {
+            return;
+        }
 
-```js
-Picker.render(options);
+        event.preventDefault();
+        // 执行自定义操作
+        console.log('> customPicker.onClick', event);
+    },
+});
 ```
-
-## 下拉面板宽度
-
-## 下拉多选
-
-## 全选 取消全选
-
-## 可搜索
-
-## 选项
-
-| 属性名称           | 含义             | 类型 | 默认值  |
-| ----------------- |:----------------:| ----- |----- |
-| `multiple`        | 是否可多选         | `boolean` |  `false` |
-| `showSearch`      | 是否可搜索         | `boolean` |  `false` |
-| `defaultValue`    | 组件默认展示项     | `string` |  空 |
-| `placeholder`     | 占位符             | `string` |  空 |
-| `disabled`        | 禁用状态           | `boolean` |  `false` |
-| `clearable`       | 允许清除单选值		  | `boolean` |  `false` |
-| `items`           | 下拉列表		        | `array` |  `[]` |
-| `autoSelectFirst` | 是否自动选中第一项	| `boolean` |  `false` |
-| `dropWidth`       | 下拉面板宽度	      | `string` |  `100%` |
-| `minDropWidth`    | 下拉面板最小宽度	   | `string` |  `100`  |
-| `maxDropWidth`    | 下拉面板最大宽度	   | `string` |  `450` |
-| `maxDropHeight`   | 下拉面板最大高度		 | `number` |  `260` |
-
-### `items` 单项属性
-
-| 属性名称           | 含义                | 类型     | 默认值  |
-| ----------------- |:-------------------:| -------- |----- |
-| `title`           | 名称                 | `string` |   |
-| `icon`            | 图标                 | `string` |   |
-| `disabled`        | 禁用状态             | `boolean` | `false` |
-| `trailingIcon`    | 后缀图标             | `string`   |   |
-| `className`       | 类名                 | `string`   |   |
-| `key`             | 键值                 | `string`   |   |
-| `style`           | 样式                 | `object`   |   |
-
-
-## 方法
-
-### focus()
-
-激动下拉选择器。
-
-### setValue()
-
-动态设置选中的值。
-
-### getValue()
-
-获取选中的值。
-
-### onChange()
-
-当值变更后时触发。
-
-### show()
-
-展示下拉选择器。
-
-### hide()
-
-隐藏下拉选择器。

lib/picker/dev.ts

@@ -5,6 +5,8 @@ import '@zui/menu';
 import '@zui/form-control';
 import '@zui/checkbox';
 import '@zui/avatar';
+import '@zui/search-box';
+import '@zui/input-control';
 import '@zui/tree';
 import {Picker} from './src/main';
 import {$} from '@zui/core';
@@ -196,4 +198,35 @@ onPageUpdate(() => {
         display: '已选择 {count} 项',
     });
     console.log('> noSearchMultiPicker', noSearchMultiPicker);
+
+    const customPicker = new Picker('#customPicker', {
+        items,
+        placeholder: '请选择你的最爱',
+        required: true,
+        search: false,
+        className: 'picker-btn state',
+
+        // 在下拉菜单内显示搜索框
+        menu: {
+            searchBox: true,
+            search: undefined,
+        },
+
+        // 自定义下拉菜单控件显示
+        display: (value, selections) => {
+            return {html: `<div>你选择了：${selections.map(x => x.text).join(',')}</div><style>.picker-btn {box-shadow: none!important;outline:none}.picker-btn .caret{display:none}</style><button type="button" class="picker-btn-trigger btn size-xs square"><i class="icon icon-exchange">↓</i></button>`, className: 'flex justify-between gap-2 p-px'};
+        },
+
+        // 自定义点击事件
+        onClick: (event) => {
+            if ($(event.target).closest('.picker-btn-trigger').length) {
+                return;
+            }
+
+            event.preventDefault();
+            // 执行自定义操作
+            console.log('> customPicker.onClick', event);
+        },
+    });
+    console.log('> customPicker', customPicker);
 });