@blueking/user-selector

参考用法

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