开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约

码云组 / gitee-frontendJavaScriptMIT

Watch 20 Star 45
加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
Loading...
README.md

Gitee::Frontend

gitee-frontend 是一个前端组件库,基于 jQuery 和 Semantic-UI 实现,包含了码云现在用到的一些通用性较强的组件。

npm npm

依赖

以下依赖项需要手动引入。

组件

  • FilteredSearchBox: 筛选搜索框,支持在输入框中选择各种筛选条件,与常规的筛选面板相比,页面空间占用小,操作方便。
  • Boards: 看板,以板块+卡片的形式展示任务的状态和进度。

安装

$ npm install gitee-frontend --save

使用

参考示例:https://mayun-team.gitee.io/gitee-frontend/

开发

生成用于示例的相关资源:

$ npm run demo

生成全部用于发行的资源:

$ npm run dist

构建一个新版本:

$ npm version 1.x.x -m "build: build 1.x.x"

发布当前版本的 npm 包:

$ npm publish

FilteredSearchBox

示例:

var options = {
    data: function () {
        return {
            gender: 'male'
        }
    },
    text: {
      loading: '载入中...',
      searchHelp: '按回车键或点击此处搜索',
      selectOtherFilter: '选择其它筛选条件',
      placeholder: '搜索或过滤结果...'
    },
    filters: [
        {
            name: '性别',
            key: 'gender',
            none: {
                name: '不限',
                value: 'none'
            },
            items: [
                {
                    name: '男',
                    value: 'male'
                }, {
                    name: '女',
                    value: 'female'
                }
            ]
        }
    ],
    callback: function (data) {
        console.log('性别是:', data.gender)
    }
}
$('#example-element').filteredSearchBox(options)

配置说明:

  • data: Function(): Object 初始数据,值必须是个函数,其返回值类型必须是 Object
  • history: Object,Boolean 历史记录,如果想禁用用该功能,可设置为 false
    • limit Number 最大数量,默认值为 5,即:最多保存近 5 条搜索历史
    • store Object 存储库对象,默认值为 localStorage,如需自定义存储位置,请提供包含 setItem()getItem()removeItem() 方法的对象。
    • storeKey String 存储键值,默认值为 "GiteeSearchHistory"
  • filters: Array 筛选器列表
    • key: String 筛选器标识,例如:"member_id"
    • name: String 筛选器名称,例如:"成员"
    • type: String 筛选器类型,如需日期范围筛选,请指定为"daterange"
    • icon: String 筛选器图标,例如:"icon user"
    • none: Object “无”条件,例如:{ name: "未关联", value: 0 }
    • config: any 给筛选器的配置参数,当筛选器类型为 "daterange" 时,需要手动指定 DateRangePicker 插件的配置
    • items: Array 选项列表
      • name: String 名称
      • value: String
      • image: String 图片地址,例如:"https://gitee.com/logo-black.svg"
      • icon: String 图标
      • iconStyle: String 图标样式,例如:"background-color: #f00;"
      • color: String 颜色,例如:"#f00"
      • description: String 附加说明
      • keywords String 关键词
    • remote: Object 远程选项列表的配置(可选),设置它后,将会请求指定地址来获取选项列表
      • url: String API 地址
      • params: Object, Function(data): Object,请求时携带的参数
      • fetcher: Function(config, onSuccess, onError) 获取器,如需自定义请求方式,可指定它
      • converter: Function(data): Object 数据转换器,用于将请求到的数据转换为组件支持的结构
  • groups: Array 分组
    • keys: Array 组内的筛选器的标识列表,例如:["author_id", "project_id"]
    • name: String 组名
  • text: Object 文本翻译
  • callback: Function(data) 确定搜索时的回调,传入参数是当前的筛选参数
  • debug Boolean 是否开启调试

Boards

用法:

var options = {
    // 配置
}

$('#example-element').boards(options)

配置说明:

  • key: String 用于标识任务所属板块的字段名,默认值为 "state"
  • name: Sting 看板名称,默认值为 "board"。当页面中存在多个看板时建议设置该属性,以避免内容冲突
  • message: Object 提示信息
    • loading: String 加载中的提示
    • stateDisabled: String 当板块不接受某一状态的任务时的提示
    • allComplete: String 板块内所有任务已经加载完的提示
    • btnSetFirst: String 板块前置按钮的提示
    • btnSetLast: String 板块后置按钮的提示
  • className: Object 一些元素的样式类名称
    • iconComment: String 评论图标
    • iconIssue: String 任务图标
    • iconAngleLeft: String 左箭头图标
    • iconAngleRight: String 右箭头图标
    • card: String 卡片
    • avatar: String 头像
    • action: String 操作按钮
    • actions: String 操作按钮组
  • data: Array 板块列表
    • name: String 名称
    • state: String 状态
    • color: String 主题色
  • plugins: Object 插件
  • actions: Function(Config) 板块的操作按钮集的构造函数,返回值类型必须为 Array
  • actions: Array 板块的操作按钮集
    • id: String 标识
    • class: String 样式类名称
    • icon: String 图标
    • title: String 提示文本
    • callback Function(Boards, Board, Event) 在用户点击操作按钮时的回调
  • types: Array 任务类型,当拖动任务卡片时,如果有的板块的状态不属于该任务的类型,则会被禁用
    • id: Number,String 类型标识
    • states: Array 状态列表
      • id: Number,String 标识
  • onLoad: Function(Object, Function) 在开始加载下一页任务列表时的回调
  • onUpdate: Function(Object, any) 在更新任务状态时的回调
  • onRender: Function(Object, JQuery) 在渲染任务卡片时的回调
  • onSorted: Function(Array) 在板块列表被排序后的回调

详细的配置参数可参考 src/components/boards/config.js 文件,以及示例页面中的 js 代码。

搜索帮助

12_float_left_people 12_float_left_close