# @blueking/user-selector

> 基于用户管理ESB接口的人员选择器，且可定义数据源

Latest version **1.0.14** (published 2024-05-06) · 0 weekly downloads

## Install

```sh
npm install @blueking/user-selector
pnpm add @blueking/user-selector
yarn add @blueking/user-selector
bun add @blueking/user-selector
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2024-05-06 |
| First published | 2020-03-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | bkfe |
| Maintainers | blueking |

## Links

- npm: https://www.npmjs.com/package/@blueking/user-selector
- npm.io page: https://npm.io/package/@blueking/user-selector

## Dependencies (3)

- [tippy.js](https://npm.io/package/tippy.js.md) ^6.2.3
- [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1
- [@icon-cool/bk-icon-bk-biz-components](https://npm.io/package/@icon-cool/bk-icon-bk-biz-components.md) ^0.0.4

## Recent versions

- 1.0.14 (latest) — 2024-05-06
- 1.0.13 — 2024-05-06
- 1.0.12 — 2024-04-03
- 1.0.11 — 2023-09-01
- 1.0.10 — 2023-09-01
- 1.0.9 — 2023-02-08
- 1.0.8 — 2023-02-08
- 1.0.7 — 2021-06-25
- 1.0.6 — 2021-01-31
- 1.0.5-beta.2 — 2020-06-22
- 1.0.5-beta.1 — 2020-06-22
- 1.0.4 — 2020-06-22
- 1.0.3 — 2020-06-22
- 1.0.2 — 2020-06-22
- 1.0.1 — 2020-06-22
- … 18 more at https://npm.io/package/@blueking/user-selector/versions

## README

### 参考用法
```html
<template>
    <bk-user-selector v-model="users"
       :fuzzy-search-method="fuzzySearchMethod"
       :exact-search-method="exactSearchMethod"
       :paste-validator="pasteValidator">
    </bk-user-selector>
</template>

<script>
    import BkUserSelector from '@blueking/user-selector'
    export default {
        components: { BkUserSelector },
        data () {
            return {
                users: []
            }
        },
        methods: {
            /**
            * 模糊查询方法
            * keyword [String] - 关键字
            * next [Number, Boolean] - 滚动加载时next参数的值为加载的页码
            */
            fuzzySearchMethod (keyword, next) {
                return Promise.resolve({
                    next: true,                                  // 模糊搜索结果还有下一页
                    results: [{
                        category_id: 1,                         // 目录id
                        category_name: '默认目录',               // 目录名称
                        id: 1,                                  // 用户id
                        username: 'blueking@default',           // 用户名
                        display_name: '蓝鲸智云',                // 全名
                        domain: 'default',                      // 目录域
                        logo: ''                                // 用户头像
                    }]    
                })
            },
            /**
            * 精确查询单个用户方法，用于加载已选择用户的信息
            * username [String] - 用户名
            */
            exactSearchMethod (username) {
                return Promise.resolve({
                    category_id: 1,
                    category_name: '默认目录',
                    id: 1,
                    username: 'blueking@default',
                    display_name: '蓝鲸智云',
                    domain: 'default',
                    logo: ''    
                })  
            },
            /**
            * 校验粘贴数据中合法的值
            * usernames [Array] - 格式化后的用户名数组，可通过paste-formatter配置自定义格式化方法
            */
            pasteValidator (usernames) {
                return usernames.filter(username => username.startWith('a'))
            }
        }
    }
</script>

```

### 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------|------|------|------|------|
| api | 用户管理API esb 地址，与自定义数据源相关配置互斥 | String | —— | —— |
| fuzzy-search-method | 自定义模糊搜索的方法，返回的数据结构如示例 | Function | —— | —— |
| exact-search-method | 自定义精确搜索的方法，用于一些初始化场景，比如已选择用户的提示信息等，返回的数据结构如示例 | Function | —— | —— |
| paste-validator | 对粘贴的值进行校验，配置自定义数据源时此配置也需要一同配置 | Function | —— | —— |
| paste-formatter | 对粘贴的值进行格式化, 默认会将粘贴的值中括号中的内容去掉 | Function | —— | `value => value.replace(/\(.*/, '')` |
| search-limit | 单页搜索结果数量 | Number | —— | 20 |
| placeholder | 未输入时的文字提示 | String | —— | 请输入用户 |
| disabled | 是否禁用 | Boolean | —— | false |
| multiple | 是否多选 | Boolean | —— | true |
| focus-row-limit | 获得焦点时，开始出现滚动条的行数 | Number | —— | 6 |
| default-alternate | 获得焦点但未开始输入时显示的默认备选内容.取值为`history`表示显示最近输入, 取值为函数时表示自定义内容 | String, Function| —— | —— |
| search-from-default-alternate | 配置了默认自定义备选内容时，是否从备选内容中进行搜索 | Boolean | —— | true |
| history-key | `default-alternate`配置为`history`时，此选项必填，表示存储数据的`key` | String | —— | —— |
| history-label | 最近输入的标题 | String | —— | 最近输入 |
| history-record | 最近输入的最大记录条数 | Number | —— | 5 |
| display-list-tips | 是否显示备选项的提示 | Boolean | —— | false |
| empty-text | 模糊搜索无内容时显示的文本 | String | —— | 无匹配人员 |
| tag-type | 已选择用户的显示形式 | String | tag/avatar | tag |
| avatar-url | `tag-type`设置为`avatar`时，获取用户头像的方法，返回结果可以是图片的url或者base64编码 | Function(username) | —— | —— |
| tag-clearable | tag-type为tag时，是否显示tag中的删除图标 | Boolean | —— | true |
| fast-clear | 是否允许一键清空 | Boolean | —— | false |
| render-list | 备选列表的自定义渲染函数 | Function(h, { user, keyword, index }) | —— | —— |
| render-tag | 已选用户的自定义渲染函数 | Function(h, { username, index }) | —— | —— |
| display-tag-tips | 鼠标划过已选用户时，是否显示提示语 | Boolean | —— | false |
| tag-tips-content | 鼠标划过已选用户时，显示的提示语内容，默认显示用户的组织架构信息 | Function({ username }) | —— | —— |
| tag-tips-delay | 鼠标划过已选用户显示提示语的延迟时间, 以`ms`计算 | Number | —— | 300 |
| fixed-height | 选择器高度是否不跟随内容撑开 | Boolean | —— | true |
| panel-width | 备选面板的宽度 | String, Number | —— | —— |
| display-domain | 是否显示账户域名 | Boolean | —— | true |
| type | 选择器显示类型, 当此选项设置为info时，选择器将以纯文本展示 | String | `selector``info` | selector |

### 事件 
| 事件名称 | 说明 | 回调参数 |
|------|------|------|
| change | ——  | [array]value |
| clear | 一键清空时派发的事件  | —— |
| select-user | 选择备选列表时派发的事件  | user, index |
| remove-selected | 删除单个已选用户时派发的事件  | username |

### 自定义搜索时的数据结构
| 字段 | 说明 | 必须 | 示例 |
|------|------|------|------|
| category_id | 用户管理系统中的目录ID | 暂未启用 | —— |
| category_name | 用户管理系统中的目录名称 | 暂未启用 | —— |
| id | 用户ID | 暂未启用 | —— |
| username | 用户唯一标识 | 是 | —— |
| display_name | 用户全名 | 否 | —— |
| domain | 用户管理系统中的目录域 | 暂未启用 | —— |
| avatar | 用户头像url/base64,组件内获取头像优先级为`user.avatar->user.logo->avatarUrl(user.username)` | 否 | —— |
| logo | 用户头像url/base64,组件内获取头像优先级为`user.avatar->user.logo->avatarUrl(user.username)` | 否 | —— |

---
_Source: https://npm.io/package/@blueking/user-selector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._