O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?

这篇具有很好参考价值的文章主要介绍了O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文主要介绍如何在O2OA中进行审批流程表单或者工作流表单设计,O2OA主要采用拖拽可视化开发的方式完成流程表单的设计和配置,不需要过多的代码编写,业务人员可以直接进行修改操作。

  在流程表单设计界面,可以在左边的工具栏找到ElementUI组件。

O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?,vue.js,elementui,前端

将对应的组件拖动到表单设计区域就可以创建组件了。下面我们逐个介绍一下对应的组件。

布局容器

创建布局容器

O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?,vue.js,elementui,前端

选择常用布局,或在“布局代码”中输入相应的HTML内容,即可创建布局。

O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?,vue.js,elementui,前端

可参考ELementUI组件文档:

Element - The world's most popular Vue UI framework

字段类型组件

  字段类型的组件是指可存储数据的组件,包括了:输入框、自动完成框、计数器、单选框、多选框、选择器、级联选择器、开关和滑块。

  字段类型的默认值、校验、校验脚本、区段等基本属性,都和基础的字段类组件是一样的,下面主要介绍每个组件的特有属性。

输入框

  类似基础组件的文本字段和多行文本。

ElementUI参考文档:Element - The world's most popular Vue UI framework

属性:

属性

对应ElementUI参数

类型

说明

类型

type

string

text,textarea 和其他 原生 input 的 type 值

最大长度

maxlength

number

字数统计

show-word-limit

boolean

是否显示输入字数统计,只在 type = "text" 或 type = "textarea" 时有效

可清空

clearable

boolean

显示切换密码图标

show-password

boolean

是否显示切换密码图标

尺寸

size

string

输入框尺寸

多行文本行数

rows

number

输入框行数,只对 type="textarea" 有效

适应高度

autosize

boolean/object

自适应内容高度,只对 type="textarea" 有效,可传入对象,如,{ minRows: 2, maxRows: 6 }

改变大小

resize

string

控制是否能被用户缩放

头部图标

prefix-icon

string

输入框头部图标

尾部图标

suffix-icon

string

输入框尾部图标

Vue Data

object/

function

Vue组件的数据对象

Vue Methods

object

{ [key: string]: Function }

被混入到 Vue 实例中方法定义

Vue Css

css

css样式

Vue Slots

html

组件可用的slot的内容

样例

下面设计一个样例,来说明一下Vue Data、Vue Methods、Vue Css和Vue Slots用法。

我们实现一个复合输入框,在输入框之前有一个下拉框,后面一个搜索按钮,如下效果:

O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?,vue.js,elementui,前端

首先我们设计好其他容器、表格、操作条等组件,在单元格中拖入Elinput组件。如下图:

O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?,vue.js,elementui,前端

1、在输入框组件的Vue Slots属性中添加以下代码:

<el-select v-model="select" slot="prepend" placeholder="请选择">
	<el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>

其中<el-select>的solt属性“prepend”表示这是一个输入框前置内容,v-model指定下拉框值要绑定的数据,此数据会自动与业务数据绑定。可以在脚本中通过this.data.select访问到。注意:v-model指定的数据不能与表单上其他任何组件的id同名,也不能与当前组件配置的json数据中的属性key同名。(可以通过组件属性框的“JSON”选项页可以查看到当前组件配置的完整json)

<el-option>中循环options,创建下拉框可选项。(稍后options将在Vue Data中创建它)

<el-button>中的solt属性“append”表示这是一个输入框后置内容。

<el-button>中的@click属性监听click事件,并执行doSearch方法。(稍后将在Vue Methods中创建doSearch方法)

2、然后在Vue Data中创建需要的对象。输入以下代码:

return {
    options: [{
        value: '选项1',
        label: '用户'
    }, {
        value: '选项2',
        label: '部门'
    }, {
        value: '选项3',
        label: '公司'
    }]
}

options用于选择框的可选项。

3、在Vue Methods中创建需要的方法,输入代码如下:

return {
    doSearch: function(){
        console.log(this.data.elinput);	 输出输入框中的值
    }.bind(this)
}

此处返回一个方法,在点击按钮时调用。

4、为了调整选择框的宽恕,可以在Vue Css中输入以下内容:

  .el-select .el-input {
    width: 130px;
  }

这样,我们就实现了一个前有选择框,后有按钮的复合输入框。数据都绑定到了this.data中。

自动完成框

自动完成框和输入框类似,只是多了一个提供输入建议的功能。

ElementUI参考文档:Element - The world's most popular Vue UI framework

属性

属性

对应ElementUI参数

类型

说明

可选值

fetch-suggestions

输入建议的可选项,可提供列表和脚本

弹出位置

placement

string

菜单弹出位置

尺寸

size

string

输入框尺寸

列表类名

popper-class

string

Autocomplete 下拉列表的类名

激活即列出输入建议

trigger-on-focus

boolean

是否在输入框 focus 时显示建议列表

头部图标

prefix-icon

string

输入框头部图标

尾部图标

suffix-icon

string

输入框尾部图标

Vue Data

object/

function

Vue组件的数据对象

Vue Methods

object

{ [key: string]: Function }

被混入到 Vue 实例中方法定义

Vue Css

css

css样式

Vue Slots

html

组件可用的slot的内容

主要说明一下通过脚本提供可选建议列表。脚本返回一个方法,此方法接收两个参数querystring和callback,querystring接收当前输入的数据,当输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回。如:

return function(queryString, callback){
  var list = [{"value": "流程"},{"value": "内容管理"},{"value": "服务管理"}];
  var returnList = list.filter(function(o){
  	return (o.value.indexOf(queryString)!==-1)
  });
  callback(returnList);
}

注意:这里function内的this指向为表单组件的module,而不是Vue组件,你可以在脚本中使用this.vm访问Vue组件对现象。

计数器

仅允许输入标准的数字值。

ElementUI参考文档:Element - The world's most popular Vue UI framework

属性

属性

对应ElementUI参数

类型

说明

最大值

max

number

设置计数器允许的最大值

最小值

min

number

设置计数器允许的最小值

步长

step

number

计数器步长

只允许输入步长的倍数

step-strictly

boolean

是否只能输入 step 的倍数

数值精度

trigger-on-focus

boolean

是否在输入框 focus 时显示建议列表

尺寸

size

string

输入框尺寸

按钮位置

controls-position

string

控制按钮位置

Vue Data

object/

function

Vue组件的数据对象

Vue Methods

object

{ [key: string]: Function }

被混入到 Vue 实例中方法定义

Vue Css

css

css样式

单选框和多选框

ElementUI参考文档:Element - The world's most popular Vue UI framework

                                 Element - The world's most popular Vue UI framework

属性

对应ElementUI参数

类型

说明

可选值

单选框和多选框的可选项,可提供列表和脚本

可选项设置和基础组件的单选框和多选框一样。

按钮模式

boolean

是传统单选模式还是按钮模式

字体颜色

text-color

string

按钮形式的 Radio 激活时的文本颜色

背景颜色

fill

string

按钮形式的 Radio 激活时的填充色和边框色

尺寸

size

string

输入框尺寸

显示边框

border

boolean

是否显示边框

样式和属性

object

附加在<el-radio-group>或<el-checkbox-group>上的样式和属性

组样式和组属性

object

附加在<el-radio-group>或<el-checkbox-group>上的样式和属性

Vue Data

object/

function

Vue组件的数据对象

Vue Methods

object

{ [key: string]: Function }

被混入到 Vue 实例中方法定义

Vue Css

css

css样式

选择器

就是下拉列表选择框。

ElementUI参考文档:Element - The world's most popular Vue UI framework

属性

对应ElementUI参数

类型

说明

可选项分组

boolean

是否对可选项进行分组,当选择“否”时,可通过配置列表或脚本两种方式提供可选项;当选择“是”时,只能通过脚本提供可选项。

可选项

提供选择框的可选项。

尺寸

size

string

输入框尺寸

可清空

clearable

boolean

是否可以清空选项

列表类名

popper-class

string

Select 下拉框的类名

是否多选

multiple

boolean

是否多选

合并Tags

collapse-tags

boolean

多选时是否将选中值按文字的形式展示

最多可选数

multiple-limit

number

多选时用户最多可以选择的项目数,为 0 则不限制

允许搜索

filterable

boolean

是否可搜索

创建新条目

allow-create

boolean

是否允许用户创建新条目,需配合 filterable 使用

无匹配文本

no-match-text

string

搜索条件无匹配时显示的文字,也可以使用slot="empty"设置

无数据文本

no-data-text

string

选项为空时显示的文字,也可以使用slot="empty"设置

自定义搜索方法

filter-method

function

自定义搜索方法,返回一个function(querystring){} ;querystring为当前输入值,在此方法中修改options的值。

远程搜索

remote

boolean

是否为远程搜索

加载中文本

loading-text

string

远程加载时显示的文字

远程搜索方法

remote-method

function

远程搜索方法,返回一个function(querystring){} ;querystring为当前输入值,在此方法中修改options的值。

Select 样式和属性

object

附加在<el-select>上的样式和属性

Option 样式和属性

object

附加在<el-option>上的样式和属性

Group 样式和属性

object

附加在<el-option-group>上的样式和属性

组样式和组属性

object

附加在<el-radio-group>或<el-checkbox-group>上的样式和属性

Vue Data

object/

function

Vue组件的数据对象

Vue Methods

object

{ [key: string]: Function }

被混入到 Vue 实例中方法定义

Vue Css

css

css样式

Vue Slots

html

组件可用的slot的内容

自定义选项模板

html

自定义选项样式的html

可选项脚本和分组可选项脚本

可选项脚本返回一个数组或者一个resolve了可选值数组的Promise对象,用于列示可选项。下面是示例代码:

//直接返回数组,如需要禁用选择项,在元素中增加disabled: true

return [
    {
        "label": "公司",
        "value": "company"
    },
    {
        "label": "部门",
        "value": "department"
    },
    {
        "label": "用户",
        "value": "person"
    }
]

//返回一个Promise
return new Promise(function (resolve) {
    var options = [
        {
            "label": "公司",
            "value": "company"
        },
        {
            "label": "部门",
            "value": "department"
        },
        {
            "label": "用户",
            "value": "person"
        }
    ];
    window.setTimeout(function () {
        resolve(options);
    }, 1000)
});

当可选项分组选择“是”时,可选择脚本返回一个数组或者一个resolve了可选值数组的Promise对象,用于列示可选项,在返回的可选择组数中要增加分组信息,下面是示例代码:

return [{
    label: '热门城市',
    options: [{
        value: 'Shanghai',
        label: '上海'
    }, {
        value: 'Beijing',
        label: '北京'
    }]
}, {
    label: '城市名',
    options: [{
        value: 'Chengdu',
        label: '成都'
    }, {
        value: 'Shenzhen',
        label: '深圳'
    }, {
        value: 'Guangzhou',
        label: '广州'
    }, {
        value: 'Dalian',
        label: '大连'
    }]
}];

自定义搜索和远程搜索方法

自定义搜索和远程搜索方法,都是返回一个function(querystring){} ;querystring为当前输入值,在此方法中修改options的值。

自定义搜索方法只在“允许搜索”为“是”时生效,它会在输入值发生变化时被调用。如下面的示例:

//返回一个方法,其中this.json.$options存储的是配置的可选项
return function (querystring) {
    this.json.options = this.json.$options.filter(function (item) {
        return (item.label.indexOf(querystring) != -1);
    });
}

远程搜索方法和自定义搜索方法类似,“远程搜索”属性必须选择“是”才会生效。它会在输入值发生变化时被调用,下面是示例代码:

//返回一个方法,其中this.json.$options存储的是配置的可选项
return function (querystring) {
    this.json.loading = true;	//设置组件为加载状态
    window.setTimeout(function () {
        this.json.loading = false;	//取消组件的加载状态
        this.json.options = this.json.$options.filter(function (item) {
            return (item.label.indexOf(querystring) != -1);
        });
    }.bind(this), 2000);
}

注意:这里function内的this指向为表单组件的module,而不是Vue组件,你可以在脚本中使用this.vm访问Vue组件对现象。

自定义选择模板

可以通过“自定义选项模板”来改变选择项的样式。下面是示例,在“自定义选项模板”中输入以下HTML内容

<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>

展现下过如下:

O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?,vue.js,elementui,前端

级联选择器

有层级关系的数据,需要进行选择时,可使用级联选择器。

ElementUI参考文档:Element - The world's most popular Vue UI framework

属性

对应ElementUI参数

类型

说明

可选值

提供选择框的可选项。返回一个可选值数组列表;或者一个resolve了可选值数组的Promise对象

尺寸

size

string

输入框尺寸

可清空

clearable

boolean

是否可以清空选项

列表类名

popper-class

string

Select 下拉框的类名

完整路径:

show-all-levels

boolean

输入框中是否显示选中值的完整路径

分隔符:

separator

string

选项分隔符

允许搜索

filterable

boolean

是否可搜索选项

自定义搜索方法

filter-method

function

返回一个Function。自定义搜索逻辑,第一个参数是节点node,第二个参数是搜索关键词keyword,通过返回布尔值表示是否命中

筛选之前

before-filter

function

返回一个Function。筛选之前的钩子,参数为输入的值,若返回 false 或者返回 Promise 且被 reject,则停止筛选

展开方式

props.expandTrigger

boolean

次级菜单的展开方式

是否多选

props.multiple

boolean

是否多选

父子节点不关联

props.checkStrictly

boolean

是否严格的遵守父子节点不互相关联

返回完整数组

props.emitPath

boolean

在选中节点改变时,是否返回由该节点所在的各级菜单的值所组成的数组,若设置 false,则只返回该节点的值

动态加载

props.lazy

boolean

是否动态加载子节点,需与 lazyLoad 方法结合使用

动态加载方法

props.lazyLoad

function

加载动态数据的方法,仅在 lazy 为 true 时有效; 返回一个function(node, resolve),node为当前点击的节点,resolve为数据加载完成的回调(必须调用)

选项值属性

props.value

指定选项的值为选项对象的某个属性值

选项标签属性

props.label

指定选项标签为选项对象的某个属性值

子选项属性

props.children

指定选项的子选项为选项对象的某个属性值

选项禁用属性:

props.disabled

指定选项的禁用为选项对象的某个属性值

叶子节点标志属性:

props.leaf

指定选项的叶子节点的标志位为选项对象的某个属性值

Vue Data

object/

function

Vue组件的数据对象

Vue Methods

object

{ [key: string]: Function }

被混入到 Vue 实例中方法定义

Vue Css

css

css样式

Vue Slots

html

组件可用的slot的内容

可选值

可选值是一个脚本,需要返回一个可选值数组列表;或者一个resolve了可选值数组的Promise对象。下面是代码示例:

return [{
    value: 'zhinan',
    label: '指南',
    children: [{
        value: 'shejiyuanze',
        label: '设计原则',
        children: [{
            value: 'yizhi',
            label: '一致'
        }, {
            value: 'fankui',
            label: '反馈'
        }, {
            value: 'xiaolv',
            label: '效率'
        }, {
            value: 'kekong',
            label: '可控'
        }]
    }, {
        value: 'daohang',
        label: '导航',
        children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
        }, {
            value: 'dingbudaohang',
            label: '顶部导航'
        }]
    }]
}, {
    value: 'zujian',
    label: '组件',
    children: [{
        value: 'basic',
        label: 'Basic',
        children: [{
            value: 'layout',
            label: 'Layout 布局'
        }, {
            value: 'color',
            label: 'Color 色彩'
        }, {
            value: 'typography',
            label: 'Typography 字体'
        }, {
            value: 'icon',
            label: 'Icon 图标'
        }, {
            value: 'button',
            label: 'Button 按钮'
        }]
    }, {
        value: 'form',
        label: 'Form',
        children: [{
            value: 'radio',
            label: 'Radio 单选框'
        }, {
            value: 'checkbox',
            label: 'Checkbox 多选框'
        }, {
            value: 'input',
            label: 'Input 输入框'
        }, {
            value: 'input-number',
            label: 'InputNumber 计数器'
        }, {
            value: 'select',
            label: 'Select 选择器'
        }, {
            value: 'cascader',
            label: 'Cascader 级联选择器'
        }, {
            value: 'switch',
            label: 'Switch 开关'
        }, {
            value: 'slider',
            label: 'Slider 滑块'
        }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器'
        }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器'
        }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器'
        }, {
            value: 'upload',
            label: 'Upload 上传'
        }, {
            value: 'rate',
            label: 'Rate 评分'
        }, {
            value: 'form',
            label: 'Form 表单'
        }]
    }, {
        value: 'data',
        label: 'Data',
        children: [{
            value: 'table',
            label: 'Table 表格'
        }, {
            value: 'tag',
            label: 'Tag 标签'
        }, {
            value: 'progress',
            label: 'Progress 进度条'
        }, {
            value: 'tree',
            label: 'Tree 树形控件'
        }, {
            value: 'pagination',
            label: 'Pagination 分页'
        }, {
            value: 'badge',
            label: 'Badge 标记'
        }]
    }, {
        value: 'notice',
        label: 'Notice',
        children: [{
            value: 'alert',
            label: 'Alert 警告'
        }, {
            value: 'loading',
            label: 'Loading 加载'
        }, {
            value: 'message',
            label: 'Message 消息提示'
        }, {
            value: 'message-box',
            label: 'MessageBox 弹框'
        }, {
            value: 'notification',
            label: 'Notification 通知'
        }]
    }, {
        value: 'navigation',
        label: 'Navigation',
        children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单'
        }, {
            value: 'tabs',
            label: 'Tabs 标签页'
        }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑'
        }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单'
        }, {
            value: 'steps',
            label: 'Steps 步骤条'
        }]
    }, {
        value: 'others',
        label: 'Others',
        children: [{
            value: 'dialog',
            label: 'Dialog 对话框'
        }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示'
        }, {
            value: 'popover',
            label: 'Popover 弹出框'
        }, {
            value: 'card',
            label: 'Card 卡片'
        }, {
            value: 'carousel',
            label: 'Carousel 走马灯'
        }, {
            value: 'collapse',
            label: 'Collapse 折叠面板'
        }]
    }]
}, {
    value: 'ziyuan',
    label: '资源',
    children: [{
        value: 'axure',
        label: 'Axure Components'
    }, {
        value: 'sketch',
        label: 'Sketch Templates'
    }, {
        value: 'jiaohu',
        label: '组件交互文档'
    }]
}]

动态加载

首先设置“动态加载”属性为“是”。在可选值脚本中输入代码如下:

return [{
    "label": "层级一",
    "value": "level1"
}, {
    "label": "层级二",
    "value": "level2"
}, {
    "label": "层级三",
    "value": "level3",
    "leaf": true			//表示层级三是叶子节点,不再有下一层级了
}]

在“动态加载方法”属性中,输入如下代码:

return function (node, resolve) {
    window.setTimeout(function () {	//用setTimeout模拟异步
        var subNodes = [];
        for (var i = 0; i < 3; i++) {
            subNodes.push({
                "value": node.value + "-" + i,
                "label": node.label + "-" + i,
                "leaf": node.level > 2
            });
        }
        resolve(subNodes);	//加载数据完成后回调
    }, 1000)
}

注意:这里function内的this指向为表单组件的module,而不是Vue组件,你可以在脚本中使用this.vm访问Vue组件对现象。

开关

表示两种相互对立的状态间的切换,多用于触发「开/关」。

ElementUI参考文档:Element - The world's most popular Vue UI framework

属性

对应ElementUI参数

类型

说明

宽度

width

number

switch 的宽度(像素)

打开文本

active-text

string

switch 打开时的文字描述

关闭文本

inactive-text

string

switch 关闭时的文字描述

打开颜色

active-color

string

switch 打开时的背景色

关闭颜色

inactive-color

string

switch 关闭时的背景色

值类型

string

switch 取值类型

打开的值

active-value

boolean / string / number

switch 打开时的值

关闭的值

inactive-value

boolean / string / number

switch 关闭时的值

打开图标

active-icon-class

string

switch 打开时所显示图标的类名,设置此项会忽略 active-text

关闭图标

inactive-icon-class

string

switch 关闭时所显示图标的类名,设置此项会忽略 inactive-text

Vue Data

object/

function

Vue组件的数据对象

Vue Methods

object

{ [key: string]: Function }

被混入到 Vue 实例中方法定义

Vue Css

css

css样式

滑块

通过拖动滑块在一个固定区间内进行选择。

ElementUI参考文档:Element - The world's most popular Vue UI framework

属性

对应ElementUI参数

类型

说明

最大值

max

number

最大值

最小值

min

number

最小值

步长

step

number

步长

是否显示间断点

show-stops

boolean

是否显示间断点

是否范围选择

range

boolean

是否范围选择

竖向模式

vertical

boolean

是否竖向模式

高度

height

string

Slider 高度,竖向模式时必填,竖向模式时默认为100px。

显示输入框

show-input

boolean

是否显示输入框,仅在非范围选择时有效

显示输入框按钮

show-input-controls

boolean

在显示输入框的情况下,是否显示输入框的控制按钮

输入框大小

input-size

string

输入框的尺寸

显示提示

show-tooltip

boolean

是否显示 tooltip

提示类名

tooltip-class

string

tooltip 的自定义类名

格式化提示

format-tooltip

function

格式化 tooltip message

Marks 标记

marks

object

标记, key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标记可以单独设置样式

Vue Data

object/

function

Vue组件的数据对象

Vue Methods

object

{ [key: string]: Function }

被混入到 Vue 实例中方法定义

Vue Css

css

css样式

按钮

ElementUI参考文档:Element - The world's most popular Vue UI framework

属性

对应ElementUI参数

类型

说明

尺寸

size

string

按钮尺寸

类型:

type

string

类型:primary / success / warning / danger / info / text

图标

icon

string

图标类名

朴素按钮

plain

boolean

是否朴素按钮

圆角按钮

round

boolean

是否圆角按钮

圆型按钮

circle

boolean

是否圆形按钮

是否禁用

disabled

boolean

是否禁用状态

加载中

loading

boolean

是否加载中状态

默认焦点

autofocus

boolean

是否默认聚焦

显示文字

boolean

是否显示文本

Vue Data

object/

function

Vue组件的数据对象

Vue Methods

object

{ [key: string]: Function }

被混入到 Vue 实例中方法定义

Vue Css

css

css样式

控制按钮状态

我们可以在脚本中控制按钮的状态,只需要通过改变当前按钮组件的json配置数据即可。如以下代码:

//获取按钮的module对象
var module = this.form.get("elbutton");

//获取组件的数据
var json = module.json;
//设置按钮为禁用
json.disabled = true;
//设置按钮为loading状态
json.loading = true;


//或----------------------------------------

//也可以通过vue组件获取数据,如以下代码
var vm = module.vm;		//获取到vue对象
var json = vm.$data;
//设置按钮为禁用
json.disabled = true;
//设置按钮为loading状态
json.loading = true;

这样的用法,在脚本中对每个ElementUI组件都是有效的。

图标

通用组件

  系统并没有包装所有的ElementUI组件,虽然包装后的组件更方便使用,但灵活度也有所降低,所以我们提供了通用ElemenmtUI组件,以供用户创建其他的组件。

  通用组件提供了“Vue Template”、“Vue App”和“Vue Css”三个脚本区域,来创建通用的Vue组件。

Vue Template:提供组件需要的HTML内容。

Vue App:提供组件需要Script内容,返回用于创建Vue实例的options对象。

Vue Css:css样式内容。

样例

我们以创建一个日期范围选择器为例,来创建一个通用组件。

在“Vue Template”中的输入以下代码:

<el-date-picker
    v-model="value1"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
</el-date-picker>

点击"Preview"按钮可预览组件样式。

O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?,vue.js,elementui,前端

保存表单就创建了一个用与选择日期范围的组件,组件的值会自动绑定到“v-model”属性指向的key,本例中,选择框的值被绑定到了this.data.value1中。

O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?,vue.js,elementui,前端

我们在给日期选择框添加一些快捷选项。

在“Vue Template”中的<el-date-picker>中增加一个属性:picker-options="pickerOptions":

<el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
</el-date-picker>

然后在“Vue App”中添加代码如下:

return {
    data: function() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        };
    }
};

然后可以再设置一下样式,在“Vue Css”中输入以下css:

.el-range-separator {
    padding: 0;
    color: #FF0000;
}

保存表单后就可以看到效果了。

O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?,vue.js,elementui,前端

一个通用组件创建了一个Vue应用,它同时可以包含多个ElementUI组件的。如在“Vue Template”中的输入以下代码:

<el-card class="box-card">
	<div slot="header" class="clearfix">
		<span>卡片名称</span>
		<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
	</div>
	<div>
		<el-input placeholder="请输入内容" v-model="input1">
			<template slot="prepend">Http://</template>
		</el-input>
	</div>
	<div style="margin-top: 15px;">
		<el-input placeholder="请输入内容" v-model="input2">
			<template slot="append">.com</template>
		</el-input>
	</div>
	<div style="margin-top: 15px;">
		<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
			<el-select v-model="select" slot="prepend" placeholder="请选择">
				<el-option label="餐厅名" value="1"></el-option>
				<el-option label="订单号" value="2"></el-option>
				<el-option label="用户电话" value="3"></el-option>
			</el-select>
			<el-button slot="append" icon="el-icon-search"></el-button>
		</el-input>
	</div>
</el-card>
在“Vue Css”中输入以下css:

  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

其中我们用到了<el-card>,<el-input>和<el-select>等ELementUI组件,创建了一个复合组件。保存后预览表单会看到如下效果:

O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?,vue.js,elementui,前端

所有的v-model会自动绑定到业务数据,可以在脚本中使用this.data.xxx来访问到。注意:v-model请不要重名。


以上是在流程表单中使用基于Vue的ElementUI组件相关说明,更多关于O2OA流程设计的内容,请继续阅读下面的章节。
 文章来源地址https://www.toymoban.com/news/detail-837498.html

到了这里,关于O2OA(翱途)开发平台如何在流程表单中使用基于Vue的ElementUI组件?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • NFT交易系统平台开发流程解析 探索元宇宙应用场景

    元宇宙是近年来爆火的词语,也是互联网从web2.0时代向web3.0时代跨越的体现。 怎么理解元宇宙? 元宇宙是指虚拟世界,包括虚拟人物、虚拟IP、虚拟场景、虚拟消费......是伴随区块链、人工智能、虚拟现实技术发展下,区别于现实世界的产物。 当下,元宇宙深受品牌营销和

    2023年04月08日
    浏览(49)
  • JAVA 微信公众号授权给开放平台(第三方平台)开发流程及第三方平台代公众号实现业务

    一 、开放平台账户注册及开发配置请参考我之前的文章 开发前准备工作。 二、授权流程 官方文档细节比较多 我说的比较直白 (1)首先 启动票据推送服务 (2)接收消息→解密→验证并获取票据→保存票据 component_verify_ticket (3)获取第三方平台调用凭证 component_access_tok

    2024年03月15日
    浏览(64)
  • NFT数字藏品平台开发——如何快速搭建搭建数字藏品平台

    2021年可以称为元宇宙年。随着元宇宙概念的兴起,好多人都在关心我们是否可以成功构建元宇宙。显然是可以实现的,2022年年初,NFT在国内的热潮兴起,国内也称之为数字藏品,NFT由于具有不可置换,不可分割的特性,很快在国内掀起一热潮。西西弗斯网络科技针对国内数

    2024年02月15日
    浏览(47)
  • 用Vue如何实现低代码开发平台?

    在众多开发技术中,Vue组件化开发技术以其卓越的灵活性和高效性备受瞩目。 低代码平台相信不少人知道它的存在,而且现在大部分公司都在开发自己的低代码平台, 首先我们来看看低代码平台可视化界面: 官网:https://www.jnpfsoft.com/?csdn,感兴趣自行去体验。 可以看到,大

    2024年02月16日
    浏览(36)
  • Flutter的Platform介绍-跨平台开发,如何根据不同平台创建不同UI和行为

    Flutter 平台(Platform)是一个概念,用于描述 Flutter 框架在不同操作系统(如Android、iOS、Web、macOS、Windows等)上运行时的适应性和支持。Flutter 旨在实现跨平台开发,使开发人员能够使用单一代码库构建应用程序,然后在多个平台上运行,而无需编写平台特定的代码。以下是有

    2024年02月08日
    浏览(58)
  • 如何开发一款唯一艺术平台 区块链 /数字藏品

        艺术作品是人类文化的瑰宝,而艺术平台则是连接艺术家与观众的桥梁。如何开发一款独一无二的艺术平台,既要满足专业艺术作品展示的要求,又要提供深度思考的空间,这是我们所面临的挑战。本文将从专业性、思考深度和逻辑性等多个方面,探讨如何打造一个引领

    2024年02月10日
    浏览(49)
  • 一文解读!如何选择适合你的零代码、低代码开发平台

           首先,我们来探讨一下什么是 低/零代码 。低代码和零代码的概念最早出现在2014年,由Forrester提出。它们的核心要点包括:        1. 快速交付业务应用:低代码和零代码平台能够实现业务应用的快速交付,这种速度甚至可以是颠覆性的。        2. 降低业务应用开

    2024年02月14日
    浏览(41)
  • 大型企业如何通过低代码平台提高开发效率和降低成本?

    云计算、大数据、人工智能、物联网风口之下,企业数字化转型如同被按下了快进键。为快速攻破转型路上的技术关,企业纷纷把目光投向了低代码开发平台,希望可以用最短的时间,开发出最适合企业发展的应用。 首先,我们要明确一个问题,那就是对于集团型企业来说,

    2024年02月06日
    浏览(69)
  • RK3568平台开发系列讲解(调试篇)如何跟踪系统事件

    沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本文我们要介绍 Linux 上两个非常有用的工具: ltrace 和 strace 。在分析软件的运行过程、调试疑难 Bug 、执行性能分析和调优等方面,它们都是非常有用的辅助工具。另外,我们还会介绍与之相关的一个功能强大的系统调

    2023年04月18日
    浏览(78)
  • Tauri开发的程序,使用github action快速跨平台编译并发布流程,包括Windows、mac、m芯片、linux等,以及常见报错

    Tauri 严重依赖原生库和工具链,因此目前无法在某一平台实现交叉编译。最佳选择是使用托管在 GitHub Action、Azure Pipelines、GitLab 或其他选项上的 CI/CD 管道进行编译。管道可以同时为每个平台运行编译,使编译和发布过程更加容易。 为了便于设置,官方目前提供 Tauri Action。

    2024年02月10日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包