<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)
|
否 | —— |