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 参数表

参数	说明	类型	必填	默认值
header	表单名称	String
refs	表单 DOM 选择器	String
form	表单结构描述	Object	Y
data	表单数据描述	Object		{}
layout	表单元素布局描述	Array	Y
actions	表单操作按钮描述	Array		[]
position	表单 label 的对齐位置	String		right
locale	i18n 前缀	String, Boolean		false
rules	表单验证规则，参考 asnyc-validator	Object, Array
labelWidth	表单 label 宽度，仅在 position 不为 top 的情况下生效	Number		100

---

Helper > TableHelper

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

TableHelper 参数表

参数	说明	类型	必填	默认值
header	表格名称	String
columns	表格表头结构描述	Array, Object	Y
data	表格数据描述	Array		[]
total	表格数据总数，用以显示分页	Number		0
border	是否显示表格边框线	Boolean		true
filter	是否显示搜索框，调用 FilterHelper	Boolean		false
showIndex	是否显示列索引	Boolean		false
showCheckbox	是否显示行选择框	Boolean		false
locale	i18n 前缀	String, Boolean		false
draggable	表格列宽能否拖拽	Boolean		false

---

Helper > Editor

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

Editor 参数表

参数	说明	类型	必填	默认值
value	编辑器html内容，可使用 v-model 双向绑定	String		空
options	编辑器配置项结构描述	Object		{}
height	初始化编辑器高度	Number, String		300
dev-twice	对于编辑器的二次开发，一般多为添加工具栏图标，下拉筐或者是添加一个dialog	Function		空
destory	是否在组件的beforeDestroy钩子里销毁编辑器实例	Boolean		true

Editor 事件表

事件名	说明	返回值
input	编辑后返回html内容	String
on-change	编辑后返回html内容、纯文本和编辑器对象	String, String, Object
on-ready	编辑器初始化完成后返回编辑器对象，以便能手动初始化、销毁编辑器等	Object

Editor 方法表

方法名	说明	参数	类型
registerToolbar	定制工具栏图标	定制项的结构描述	Object