@blueking/user-selector

1.0.14 • Public • Published

参考用法

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

Readme

Keywords

none

Package Sidebar

Install

npm i @blueking/user-selector

Weekly Downloads

288

Version

1.0.14

License

none

Unpacked Size

2.73 MB

Total Files

23

Last publish

Collaborators

  • blueking