# 耗时操作加提示
比如数据提交、文件上传等操作,通常需要等待完成后再做后续操作,这时需要页面上显示 ‘Loading’ 或 ‘处理中...’ 这样的提示。框架提供了一组通用函数来实现此功能:
// 打开
this.$Waiting.start()
// 默认不带提示文字,可通过给start 函数传参数加文字
this.$Waiting.start('Loading...')
// 关闭
this.$Waiting.stop()
# 内容国际化
有时需要考虑表单输入内容的国际化,例如企业信息维护页面的“企业名称”字段,需在不同语言环境下展示对应语言的名称,故在输入时要支持输入多种语言对应的名称,而后端存储各种语言对应的值:
{
"zh_CN": "ABC有限公司",
"en_US": "ABC limited."
}
CAF封装的内容国际化组件名为 content-i18n,下面介绍它的用法:
# i18n props
属性 | 类型 | 说明 | 默认值 |
---|---|---|---|
value | Object | 国际化内容,像上面的json表示的对象 | 无 |
textOnly | Boolean | 模式1、仅显示当前语言对于的内容,不能编辑,也没有编辑框,建议用于table的单元格 | false |
editable | Boolean | 模式2、是否可编辑,不可编辑时在一个readonly的input框里显示内容 | false |
name | String | 用于有多个国际化字段的编辑模式,标明是哪个字段,以便在on-change中处理 | 无 |
icon | String | 编辑框上显示的小图标 | fa-language |
@on-change | Function | 用于编辑模式下接收编辑后的内容,此函数返回一个对象 {name:'orderType', i18n: {zh_CN:'',en_US:''} } | 无 |
<template>
<e-form>
<form-item>
<content-i18n
:value="orderType"
name="orderType"
editable
@on-change="ci8nChange"
>
</content-i18n>
</form-item>
</e-form>
</template>
export default {
data () {
return {
orderType: {
zh_CN: '订单类型',
en_US: 'order type'
}
}
},
methods: {
ci8nChange (data) {
if (data.name === 'orderType') {
this.orderType = data.i18n
}
}
}
}
# LOV
LOV(List Of Value)是CAF框架定义系统变量的一种方式。前端需通过接口调用拿到LOV数据并在界面上做展示。
CAF对于LOV的使用做了封装,即兼顾性能又能使开发业务尽可能地少些代码。封装的核心是一个名为 lovmgr 的vue注入(mixins),
详细实现请参考 src/common/mixins/lovmgr.js。
开发业务时这样使用:
- 向Vue实例注入'混合(mixins)' lovmgr
import lovmgr from 'MIXINS/lovmgr'
export default {
mixins: [lovmgr]
}
- 在Vue实例的data域中声明要用到的所有LOV,注意声明字段必须是 lovs_declare
export default {
date () {
return {
lovs_declare: [
{
'param_key': 'FILEDTYPE',
'module_name': 'platform'
}, {
'param_key': 'OPTYPE',
'module_name': 'platform'
}
]
}
}
}
- 有三个方法可用于获取LOV相关的信息
getLov(module_name, param_key)
/* 获取参数列表,例如:
[{
key: 0,
value: '='
}, {
key: 1,
value: '!='
}]
*/
getLovValue(module_name, param_key, option_key)
/*
获取参数列表中的某项的值
*/
getLovKey(module_name, param_key, option_value)
/*
获取参数列表中的某项的值
*/
- html标签中使用lov数据
<e-select>
<e-option v-for="o of lovs_declare[0].data" :key="o.value">{{o.key}}</e-option>
</e-select>
← 插件使用