功能分类 | 脚本名称/关键字 | 功能描述 | 适用范围/场景 | 脚本示例说明 | 备注 | |
---|---|---|---|---|---|---|
关键字 | this.obj | 表单绑定的类的对象,如果没有条件限制默认获取的是绑定类的最新一条记录 是一个JSON对象 | 1)操作动作为visit/edit时,this.obj有数据 2)操作的前处理脚本中写了return{obj:obj},表单的this.obj会有对应值 使用范围: 在表单上绑定的前端脚本均可用 | console.log(this.obj); this.obj.[属性名] 关联类的话 this.obj.left_[左类属性名] this.obj.right_[右类属性名] this.obj.relation_[关联属性名] | this.obj是当前表单绑定类的对象,可以通过类上的属性获取返回对象的某一项的值 调试查看this.obj的返回值: console.log(this.obj); | |
this.selectedObjs | 表单中含有唯一的多对象控件时,通过此数组获得用户选中的对象,如果是有多个多对象控件可以在表单设置中绑定多对象控件 是一个JSON对象数组 | 使用范围: 表单中有多对象控件(表格),并且在表单的基础配置中设置了默认多对象控件,该脚本有效,否则为null | console.log(this.selectedObjs); | |||
this.data | 打开表单的初始化参数 在表单中的任何操作的前端脚本都可以直接使用this.data获取初始化参数 是一个JSON对象 | 可以使用的场景有两类: 1)操作的前处理脚本,通过return{ data:this.obj} 可以传递json对象到打开的表单 2)使用脚本打开表单传参,可用的有:this.openTab,this.openForm,this.openDrawer | console.log(this.data); | |||
this.env | 当前DWF前端的上下文信息,返回一个JSON对象,JSON对象属性包括:
| 可以用在所有的前端脚本中,不限位置 | console.log(this.env); console.log(this.env.serverIp); console.log(this.env.serverPort); console.log(this.env.serverURL); console.log(this.env.metaServicePort); console.log(this.env.objServicePort); console.log(this.env.appConfig); | |||
this.user | 当前登录用户的基本信息,返回一个JSON对象,包括属性如下:
| 需要获取到用户的基本信息的时候,可以使用this.user | console.log(this.user.userName); console.log(this.user.userId); console.log(this.user.oid); console.log(this.user.token); console.log(this.user.userGroups); console.log(this.user.displayName); | |||
this.store | DWF内部变量,缓存了当前访问表单的基本信息 是一个JSON对象,可用的对象如下:
| 需要获取到配置系统的配置信息的时候可以使用this.store | console.log(this.store.DWF_form); console.log(this.store.DWF_global); console.log(this.store.user); console.log(this.store); | |||
this.confirmData | 弹窗表单新增对象/编辑对象成功后提交的表单数据,在后处理脚本中可用 | 仅适用于操作的后处理脚本中 | 在后处理脚本中可以使用 console.log(this.confirmData); | |||
this.className | 表单所属的实体类或者关联类的名称 | 任何表单的脚本中都可以使用 | console.log(this.className); | |||
$env | 获取当前环境的基本信息,返回一个JSON对象,包括属性如下:
| 1、操作动作为url的时候,在URL地址中可用$env 2、在过滤条件中可以使用$env 3、嵌入网页的连接地址中可以使用$env 4、功能模型->应用管理->编辑应用中的起始操作可以使用$env | ||||
$user | 当前登录用户的基本信息,返回一个JSON对象,包括属性如下:
| 1、操作动作为url的时候,在URL地址中可用$user 2、在过滤条件中可以使用$user 3、嵌入网页的连接地址中可以使用$user 4、功能模型->应用管理->编辑应用中的起始操作可以使用$user | ||||
$obj | 表单绑定的类的对象,如果没有条件限制默认获取的是绑定类的最新一条记录 是一个JSON对象 | 1、在表单中的事件操作动作为url的时候,在URL地址中可用$obj 2、在过滤条件中可以使用$obj 3、嵌入网页控件的连接地址中可以使用$obj 注意:当表单以create状态打开,如果未初始化数据$obj的各项属性为空,慎用 | obj.[attributeName类属性英文名]=$obj.[attributeName类属性英文名] | |||
$form | 获取表单的单对象控件的取值 示例:$form["控件代号"] | 该关键字可用到过滤条件中,并且仅对单对象控件有效(有getValue方法的有效) 注意:如果是单选框、复选框、选择框等设置了数据的回填和显示属性不一致,则此处返回的是该控件的回填属性的取值 | 在过滤obj.attributeName= '$form["id"]' | |||
数据访问 | this.handleQueryData () | 获取DWF定制的实体类、关联类的数据对象的脚本,支持回调,入参的查询条件为JSON对象,分别是:(返回方式为异步请求,如果在前端脚本要等待返回成功做处理需要将处理内容写到回调函数中) 1:targetClass:要查询数据所在的类(实体类、关联类、外部实体类) 2:query:查询条件,是一个json对象 3:fresh:读取缓存还是读取数据库数据标记物,true直接读取数据库最新数据,false优先读取缓存数据,如果该查询条件数据未缓存则读取数据库数据 | 表格后台数据强制刷新/查询 | //查询条件 let queryConditon = { targetClass: "Part" , query:{query:`and obj.id= '${this.obj.name}' `}, fresh: true //是否从后台强制刷新查询(建议默认值为true) }; //基于DB进行查询 this .handleQueryData(queryConditon).then(res => { //针对res值(查询返回值)直接处理… }); | ||
this.create() | 支持实体类和关联类表单中执行新增操作
| 用于系统新增时控制是否弹出信息和关联类表单新增实体类并控制是否弹出信息 | //系统新增时控制是否弹出信息 this.create(obj, "WorkOrder", {showMessage:true}); //关联类表单新增实体类并控制是否弹出信息 this.create/edit(obj, "WorkOrderToPart", { | |||
this.createObj() | 在前端创建内存对象,临时对象不保存到数据库 | /创建前端内存对象 let obj = this.createObj(this.className).then((res) => { let param = | ||||
this.edit() | 支持实体类和关联类表单中执行编辑操作
| 用于系统编辑时控制是否弹出信息和关联类表单编辑实体类并控制是否弹出信息 | //系统编辑时控制是否弹出信息 this.edit(obj, "WorkOrder", {showMessage:true}); //关联类表单新增实体类并控制是否弹出信息 this.edit(obj, "WorkOrderToPart", { | |||
this.delete() | 支持实体类和关联类表单中执行删除操作
| 用于系统编辑时控制是否弹出信息和关联类表单删除实体类并控制是否弹出信息 | //系统删除时控制是否弹出信息 this.delete(obj, "WorkOrder", { //关联类表单删除实体类并控制是否弹出信息 this.delete(obj, "WorkOrder", {isRelation:false, | |||
this.axios | 在前端调用接口可能的第三方接口 | 需要在config中补充接口信息,如headers: {'Authorization': this.user.token} | this.axios.post(url,param, config) | |||
this.dwf_axios | 在前端调用APP端的restfull接口,主要是实体类、关联类等数据的增删改查的接口,同时该接口还支持调用第三方服务的接口 支持post、get 注意: 如果当前dwf的app接口,可以直接使用swagger中的地址去掉/dwf/v1即可 如果是另外一个dwf服务的app接口,可以直接写全地址 post方法支持param参数,该参数为json对象 | 调用app的restful API示例1 //this.dwf_axios.post(`http://192.168.30.63/workorder/init`,param); let param = { }; this .dwf_axios.post(`/workorder/init?tyWorkOrderOid=${ this .obj.oid}`,param).then(initRes => { //在回调中处理 if (initRes && initRes.data && initRes.data.result && initRes.data.result == true ){ this .msgbox.success( '已完成基于专家库作业信息的初始创建!' ); } else if (initRes && initRes.data && initRes.data.msg){ alert(initRes.data.msg); } }); | ||||
this.dwf_modeler_axios | 在前端调用modeler端的restful接口,主要是一些模型类的数据、用户、授权、应用等建模相关接口 注意: 如果当前dwf的modeler接口,可以直接使用swagger中的地址去掉/dwf/v1即可 如果是另外一个dwf服务的modeler接口,可以直接写全地址 post方法支持param参数,该参数为json对象 | 调用modeler端的restful API | //获取当前服务器端IP var curServerIP = this .env.serverIp; //获取当前登录用户 var curUserId = this .user.oid; //调用modeler端的restful API this .dwf_modeler_axios( "/dwf/v1/org/users/${curUserId}/groups" ); | |||
this.QueryResultAll() | 根据查询条件获取Store中缓存的数据 | store中 查询 | //查询条件 let queryConditon = { targetClass: "Part" , query:{query:`and obj.id= '${this.obj.name}' `}, fresh: true //是否从后台强制刷新查询(建议默认值为true) }; //该接口主要在store中进行查询(不查询后台DB) let queryResult = this .QueryResultAll(queryConditon); //TODO:查询结果queryResult处理 | |||
this.getOperation() | 根据类、操作名称获取操作的定义,通过getOperation获取到已有的操作(需要存储到数据库中),再通过executeOperation进行调用,并且允许修改已有操作的操作样式和动作。
| 在前端脚本中需要调用定义的其他前后端脚本操作,可以利用getOperation得到对应的脚本,然后借助executeOperation实现交互 |
| |||
this.queryEntity() | 获取实体类的元模型信息 |
| ||||
this.queryRelation() | 获取关联类的元模型信息 |
| ||||
this.cudBatchObjs() | 传入一个代表增删改事件的数组,批量增删改对象,配合数据容器控件使用非常方便。 | var wo = this.getAddinById('DataView1').getObj(); var rt = this.getAddinById('DataView2').getObj(); var cudEvents = [ { action: 'update', className: 'ReqWorkorder', objs: [wo] }, { action: 'update', className: 'WorkorderReport', objs: [rt] } ]; this.cudBatchObjs(cudEvents); | ||||
表单间交互 | this.openForm() | 以弹窗方式打开一个表单,表单可以是: 1)集成的url 2)dwf定制的表单 | 前端脚本中 | var targetClass = 'part' ; var viewName = 'allPartList' ; var args = {}; //args是{ conditionExpre: 查询条件, params: 初始化脚本 },如果没有args可以传空 this .openForm(targetClass, viewName, args); |
curDialogWidth:'800px', curDialogHeigt:'600px'; curDrawerWidth:'800px';// 该参数进队openDrawer生效
| |
this.returnSync() | 当前端调用后端服务接口需要等待返回后在执行返回操作可以使用该方法 | 在操作的前处理脚本中可用,并且操作样式为弹框方式 这样的话就能够保证在前处理中请求接口数据初始化弹框的内容 | //创建前端内存对象 let obj = this.createObj(this.className).then((res) => { let param = | 如果无异步调用,使用return false表示不继续弹窗;
| ||
this.closeDialog() | 关闭当前弹窗 | 表单以弹窗样式打开,该方法有效 | this.closeDialog() | |||
this.openTab() | 以tab页签方式打开表单 queryOpr中的参数 @param targetClass:表示对应的类 @param viewName:表示需要打开的表单名称 @param action:动作 @param authority:英文名 @param extSettings:是否打开默认操作 @param args中的参数
|
| ||||
this.closeTab() | 分为不带参数和带参数两种方式。他们的功能分别是关闭tab和关闭tab传值到后处理
| 关闭tab和关闭tab传值到后处理 | //不带参数:关闭tab this.closeTab(); //带参数:关闭tab传值到后处理 this.closeTab(data); | |||
this.closeTabById() | 分为不带参数和带参数两种方式。他们的功能分别是关闭指定tab和指定tab关闭传值。
| 指定tab关闭和指定tab关闭传值 | 关闭页签 this.closeTabById('moduleName-authority'); 页签的ID获取方式:moduleName-authority moduleName:新建操作的时候的模块名,即打开页签的操作所在的类名 authority:打开页签操作的操作名即打开页签操作的英文名 关闭页签并触发打开页签的后处理脚本 this.closeTabById('moduleName-authority',data); data为回传给后处理脚本的参数,可以在后处理脚本中利用this.confirmData获取 | |||
this.openDrawer() | 支持打开滑窗的功能,规则如下: opendrawer( @param @param viewName:表示需要打开的表单名称 @param left/right:表示右滑窗还是左滑窗 @param args:打开表单时的其他参数,在之前的实现保持不变的前提下,保证兼容性,推荐使用null @param displaType:tab页签打开时的状态 @param initParams:nitParams:object,与操作中的前处理脚本中return { obj:{...}, query: {...}, data: {...}} 返回的格式一致,可以设置对象,查询条件和夹带的数据 | 脚本打开滑窗 |
| |||
this.msgbox() | 消息提示,支持三种:
| 不限 | //目前如下几种消息提示都是在界面上方提示后自动关闭 this .msgbox.success( "成功的提示" ); this .msgbox.info( "一般的提示" ); this .msgbox.error( "错误的提示" ); | |||
this.msgboxDialog() | 模态弹窗提示后需手动关闭的msg提示框,支持确定和取消两种回调方式:
| 不限 |
| |||
this.spinShow() | 表单遮罩,该脚本执行会弹出一个遮罩层,防止表单此时再去编辑 弹出遮罩 | 防止重复提交,数据混淆,主要用在异步请求数据接口调用的时候 | this.spinShow(); | |||
this.spinHide() | 关闭遮罩 | 事件处理完成,关闭遮罩,在异步交口调用完成后可以关闭遮罩 | this.spinShow(); //打开遮罩
| |||
this.validateForm() | 表单单对象控件规则校验 | 提交保存表单之前,可以使用该脚本校验单对象控件是否满足设定的规则 | if(this.validateForm()){ 为了满足验重配置项的接口校验,将校验方法调整为如下: this.validateForm().then(res=>{ if(res){ console.log('表单验证成功') | |||
this.freshData() |
| 当数据同步被修改,可以利用this.freshData()获取到最新数据 |
| |||
使用控件 | this.getAddinById() | 根据控件代号获取控件对象,以便能够操作控件 | 在表单的前端脚本中都可以获取到当前表单的控件对象 | var grdiAddin = this .getAddinById( "控件代号" ); | ||
this.getTargetAddin() | 获取控件绑定的多对象控件 | 仅在按钮上有效,获取的是按钮绑定的多对象控件 | var grid = this.getTargetAddin(); | |||
this.getSourceAddin() | 获取当前操作绑定的控件,无需控件代号 | debugger // this.getSourceAddin(); console.log(this.getSourceAddin.args.text) label =this.getAddinById("Label4"); label.setValue(this.getSourceAddin.args.text) | ||||
this.getSocketId(); | 获取当前客户端的socketId | |||||
脚本互相调用 | this.executeOperation() | 调用并执行已有的后端脚本,支持回调 自定义操作对象(在现在的脚本中定义操作对象,无需事先定义操作)通过executeOperation进行调用
| 可以和getOperation配合使用 |
| ||
前端脚本调用后端脚本(二) | this.callServer(customData,'default').then(res => { | 说明:该调用方式仅仅试用与在同一个操作内编写的后端脚本有效 参数说明: customData:为前端调用后端脚本的参数JSON格式 default: 为后端脚本的脚本名称 返回结果: res:后端通过this.res给前端脚本传参 注意: 在同一个操作内编写的后端接口获取前端脚本传参可以利用this.customData获取callServer的第一个参数 返回结果需要通过this.res={}来给前端赋值回调结果 | 该方法属于操作内方法,调用的后端脚本仅支持在同一个操作内新建的后端脚本操作,如图: | 示例: 一个操作中的前端脚本: this.callServer(customData,'default').then(res => { 统一操作中的后端脚本(default): this.logger.info("前端传递给后端脚本的参数:"+this.customData); this.res = { 结果: 打开console控制台,可以看到控制台输出了两行记录: 后端回调结果 后端脚本执行成功 | ||
单对象表单控件脚本 | this.getAddinById("控件代号").getValue() | 获取控件取值 | 除按钮外的单对象控件 |
| ||
this.getAddinById("控件代号").getDisplayValue() | 获取界面显示的值,该方法仅在单选框、选择框、复选框中有效 | 单选框、选择框、复选框控件有效 |
| |||
this.getAddinById("控件代号").setValue() | 给控件设置取值,并在控件上展示 | 单对象控件 |
| |||
this.getAddinById("控件代号").args | 获取控件上的其他配置参数 示例: args.hided //控件的显示隐藏 true 隐藏 false:显示 | 所有控件 |
//可以通过console.log查看每个控件支持的args的参数
| |||
this.getAddinById("控件代号").triggerEvent() | 触发值变化事件 |
| ||||
this.getAddinById("控件代号").setTooltip() | 设置控件的鼠标悬停事件 | var grid = this.getAddinById('Grid1'); var index = Math.round(Math.random() * 10) | ||||
this.getAddinById("控件代号").setError() | 设置控件的提示信息 | 设置信息 | //控件的id可在app端开发者工具中拾取,后期可在modeler中直接拷贝 var addinElement = this .getAddinById( "指定控件的id" ); //设置控件在界面中的错误信息提示 addinElement.setError( "存在异常" ); //$el为指定控件的dom元素,可以直接对dom元素修改其样式 addinElement.$el.style.display = "none" ; | |||
this.getAddinById("控件代号").getSelected() | 获取选中的对象信息 | 仅支持多对象控件,如:表格、卡片、目录树、关联结构树 |
| |||
this.getAddinById("控件代号").getKVValue() | 获取动态参数看的KV键值数据 | 仅支持动态参数控件 |
| |||
多对象表单控件脚本(卡片还有特殊包含的关键字) | setExternalOprConfig(config) | 表格操作列样式设置 | 表格控件 | var grid = this .getAddinById( 'Grid2' ); var operationParams = [{ uniLabel: '修改过的编辑' , //按钮文字 type: 'warning' , //按钮样式 shape: true , //是否圆角 disabled: true , //是否禁用 color: 'red' , //文字颜色 show: false //按钮是否显示 },{ uniLabel: '修改过的新增' , type: (rowData) => { if (rowData.product === '草莓' ){ return 'warning' } else { return 'success' } }, shape: (rowData) => { if (rowData.product === '草莓' ){ return 'circle' //圆角 } else { return 'true' //直角 } }, //是否圆角 disabled: (rowData) => { if (rowData.product === '草莓' ){ return true } else { return false } }, //是否禁用 color: (rowData) => { if (rowData.product === '草莓' ){ return 'red' } else { return 'blue' } }, //文字颜色 show: (rowData) => { if (rowData.product === '草莓' ){ return true } else { return false } } //是否显示 }] grid.setExternalOprConfig(operationParams); | ||
setRowClass | 设置行样式 可设置的配置项如下: .grid-font-color-red | 表格控件 | //行样式设置 var grid = this.getAddinById('Grid3'); grid.setRowClass((params) => { if (params.node.rowIndex % 2 === 0) { return 'grid-font-color-red'; } if (params.node.rowIndex % 2 !== 0) { return 'grid-font-color-green'; } if (params.data.companyd === '哈哈哈1') { return 'grid-font-color-green'; } }); | |||
setColumnDefs | 设置列定义 | 表格控件 | //列样式设置 var grid = this.getAddinById('Grid3'); | |||
setColumnVisible | 设置列可见 | 表格控件 | debugger; var grdiAddin = this.getAddinById("id"); grdiAddin.setColumnVisible(0, false) | |||
setRowData | 设置表格数据 | 表格控件 |
| |||
getRowData | 获取表格数据 | 表格控件 | ||||
deleteRowData | 删除表格数据(参数对应行) | 表格控件 | ||||
updateRowData | 修改表格数据 | 表格控件 | ||||
getAll | 获取表格的所有数据 | 表格控件 |
| |||
getDefaultColumnDef | 获取一列的默认列定义 | 表格控件 | //内存表格 ar grid = this.getAddinById('Grid3'); | |||
setPageInfo | 设置当前页码 | 表格控件 | ||||
getPageInfo | 获取表格页码信息 | 表格控件 | var grid = this.getAddinById('Grid3'); var query = ""; var modReq = { "condition": query }; this.dwf_axios.post("http://192.168.31.82:9090/dwf/v1/omf/entities/recruit/objects", modReq).then(rsp => { if(rsp.data.code != 200){ }else{ var rowData = rsp.data.data; var pageInfo = grid.getPageInfo(); grid.setRowData(rowData.slice((pageInfo.pageIndex - 1) * pageInfo.pageSize, pageInfo.pageIndex * pageInfo.pageSize)) } }); | |||
setTooltip | 表格单元格的鼠标悬停事件 | 表格控件 | var grid = this.getAddinById('Grid1'); var index = Math.round(Math.random() * 10) | |||
setDisplayType() | 设置卡片的展示类型,支持 craete、visit、edit | 卡片控件 | ||||
getSelected | 获取选中行数据,支持多选对象 | 表格控件、卡片控件 | debugger var grid = this.getAddinById('Grid2'); var button = this.getAddinById("Operation3"); var selectedObjs = grid.getSelected(); console.log('getSelected',selectedObjs); | |||
getParentAddin | 获取卡片控件所在的表单 | 卡片控件 | //卡片之间值传递 var FormEngine1 = this.getAddinById('FormEngine1');//获取卡片1控件id | |||
updateShow | 刷新子表单的数据显示 | 卡片控件 | //为子表单设置对象 var FormEngine1 = this.getAddinById('FormEngine1'); let query = ` and obj.dataname = '数据111' `; //查询条件 | |||
getRootAddin | 获取控件 | 卡片控件,子表单中使用 | var subFormAddin = this .getRootAddin( ); | |||
freshObj(res) | 修改信息后刷新卡片 | 卡片控件 | this.edit({product: '上海米老头', oid: '04D0D88571046C4C9EA6546FE6245784'}, 'salevalue').then(res => { this.getSourceAddin().getParentAddin().freshObj(res) }); | |||
freshObj(res) | 关联类修改信息后刷新卡片 | 卡片控件 | var newObj= {relation_leftOid: '34AC734FBFB2294E852EE50B54C00831', relation_number: 77, right_partName:"螺丝", left_partName:"头盔", relation_oid: "A7EEDE6CA7AE0748BEE6B195041EB877", relation_rightOid: "DAFB73D0B5202941A46AC896965682BE" }; this.edit(newObj, 'PartToPart', {isRelation: true}).then(res => { this.getSourceAddin().getParentAddin().freshObj(res) }); | |||
editNodeObj() | 编辑树 | 树控件 |
let fixObj = { | |||
start(args) | 启动消息订阅 | 订阅控件 | var addin = this.getAddinById("TextInput1"); var wm = this.getAddinById('WatchMessage2'); | |||
pause() | 暂停消息订阅 | 订阅控件 | var wm = this.getAddinById('WatchMessage2'); wm.pause(); | |||
resume() | 恢复消息订阅 | 订阅控件 | var wm = this.getAddinById('WatchMessage2'); wm.resume(); | |||
stop() | 停止消息订阅 | 订阅控件 | var wm = this.getAddinById('WatchMessage2'); wm.stop(); | |||
this.param | 获取后端返回值,当调用后端脚本完成后,后端脚本返回的数据会存储在this.param变量中,需要的时候可以取到 | 调用后端脚本或restful接口返回的结果存储在this.param中,当调用后该对象有值 | console.log(this.param); var label = this.getAddinById("Label1"); label.setValue(this.param.data.operationResult); | |||
可视化表单控件脚本 | this.getAddinById('可视化控件代号').clickData | 获取选中系列 | 可视化控件 | let chart = this.getAddinById('EChart1'); | ||
freshData(query) | 根据过滤条件更新数据 | 多对象控件、可视化控件 | //获取可视化控件 var grid = this.getAddinById("控件id"); //设置过滤条件 //根据query过滤显示可视化控件 | |||
freshData(extendArr, extendGrid, extendSTime, extendETime) | @param extendArr 外部选择的序列集合 * @param extendGrid 外部指定图表排列方式 * @param extendSTime 外部指定查询起始时间 * @param extendETime 外部指定查询结束时间, | 时序看板 | ||||
getToolsSeries() | 返回当前工具栏所选全部序列 | 时序看板 | ||||
getToolsGridType() | 返回当前工具栏所选图标排列方式 | 时序看板 | ||||
getToolsStartTime() | 返回当前工具栏日期起始时间 | 时序看板 | ||||
getToolsEndTime() | 返回当前工具栏日期结束时间 | 时序看板 | ||||
option.legend | 设置图例位置 | 可视化控件 | let myChart = this.getAddinById('EchartBar1'); myChart.args.option.legend.right = 60;//可以写left ,right,top,bottom myChart.args.option.legend.bottom = 'auto'; | |||
编码扩展表单控件脚本 | HTML | 超级控件扩展,支持Html和Vue两种格式 在控件内可以通过dwf_ctx调用dwf脚本引擎中的方法 获取dwf_ctx句柄的方法: var _this = window.parent.dwf_ctx; //获取dwf的脚本句柄 | 1)自定义复杂的交互逻辑,如根据设置数据自动增加可控件等 2)酷炫的可视化看板功能 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> /* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ .fade-enter-active, .fade-leave-active { transition: opacity 2s } .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ { opacity: 0 } </style> </head> <body> <div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">动画实例</p> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { show:true, styleobj :{ fontSize:'30px', color:'red' } }, methods : { } }); </script> </body> </html> | ||
VUE | vue-超级控件 | 支持Iview的组件,如需其他组件需要在服务器安装后才可以被引用,如要使用elementUI的组件库,可以预先在dwf服务器下载安装,然后才能再此处加入引用 | <template> @import "../../node_modules/iview/dist/styles/iview.css"; </style> |
概览
内容工具