@beisen-cmps/ux-m-platform-user-select

# UserSelect人员选择

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@beisen-cmps/ux-m-platform-user-select
Minified + gzip package size for @beisen-cmps/ux-m-platform-user-select in KB

Readme

组件使用、扩展文档

UserSelect人员选择

用于人员选择

UI规则

  1. 分为导航栏、搜索区、选人区。

  2. 选人区域,点击一个人员后,展示在搜索区中的已选人员区域。

  3. 已选人员在搜索区展示,点击已选人员头像,删除该人。

  4. 在搜索框内,如没有输入搜索内容,点击删除,最后一个人置灰,连续点击两次删除键,删除该人。

  5. 如果当前有置灰的人,此时在列表中选择了一个新的人员,则置灰取消。

  6. 点击搜索区域搜索人员,输入后显示搜索结果,搜索内容高亮,选择后在搜索区展示已选人员。

  7. 人员单选,选择一个人员后,退出人员选择页面。

  8. 人员多选,选择人员后,点击确定,退出人员选择页面。

  9. 导航栏区域,人员多选,展示返回、清空、确定,三个按钮,人员单选,展示返回、清空两个按钮。点击按钮后退出人员选择页面

  10. 搜索图标:选择区域有人时、搜索框获取焦点时均不显示图标

    weuser

API

TextArea props

name description type default
cls 自定义container css String ''
style 自定义container style Object {}
title 标题 String ''
singleSelect 是否为单选 Boolean
pop_type 弹层类型searchItem为筛选项 String
usersList 人员列表 Array []
defaultUsers 默认人员列表 Array []
selectedDatas 当前表单中已选中的人员 Array []
fetchDefaultUsers 请求默认人员列表回调 Function
fetchSearchUsers 搜索人员时回调 Function(value)
handleCancel 点击取消回调 Function
handleConfirm 点击确定回调 Function(event, data)
onClearValue 点击清空回调 Function

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.