@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>

属性

事件

自定义搜索时的数据结构