omniview-ui v0.2.51

OmniView-UI

An out-of-box UI solution for enterprise applications.

Install

npm install omniview-ui --save --registry http://npm.omniview.pro

Features

Structure

OmniView UI 是基于 js 对象描述组件数据结构的方式来生成对应组件的。下例为一个标准的数据结构示例：

export default {
    name: {
        name: 'name', // 字段名称，可使用 i18n
        type: 'input', // 字段输入形式，input，select，password，cascader，datepicker，textarea 等
        key: 'name', // 唯一标识，用以匹配 data 和 layout 中的键值
        placeholder: 'type_the_customer_name', // 占位符文字，可使用 i18n
    },
    category: {
        name: 'category',
        type: 'select',
        key: 'category',
        valueText: 'categoryName', // 当某些情况下，表单需要传递的是 ID，而表格需要显示 ID 对应的文字时，可里用 valueText 来指向一个结果集中的文字字段
        options: [ // 对应选项结果
            {
                name: 'special',
                value: 1
            },
            {
                name: 'value',
                value: 2
            },
            {
                name: 'normal',
                value: 3
            }
        ],
        clearable: true,
        multiple: true,
        filterable: true,
    },
    state: {
        name: 'state',
        type: 'cascader',
        key: 'state',
        valueText: 'stateName',
        options: [
            {
                name: 'Taiyuan',
                value: 1,
                children: [ // 级联的二级选项
                    {
                        name: 'Hezhou',
                        value: 4
                    }
                ]
            },
            {
                name: 'Nanjing',
                value: 2
            },
            {
                name: 'Shanghai',
                value: 3
            }
        ]
    }
}

Helper > FormHepler

表单助手工具，通过无序数据结构（js 对象）来描述整个表单的内容

FormHelper 参数表

Helper > TableHelper

表格助手工具，通过无序数据结构（js 对象）来描述整个表格的内容

TableHelper 参数表

Helper > Editor

富文本编辑器助手工具，通过无序数据结构（js 对象）来描述整个富文本编辑器的内容

Editor 参数表

Editor 事件表

Editor 方法表