这两天遇到了一个需求,就是给项目中所有上传 el-upload 组件,在请求头里添加一个model参数,参数值就取当前页面的路由router的hash。
因为项目中用到的el-upload 地方比较多,用法基本和官方文档一致:
<el-form-item :label="$t('bpa_mainDocument')" required>
<el-upload
:action="action"
:on-success="handlerFileUploadSuccess"
:on-error="handlerFileUploadError"
:before-upload="handlerFileUploadBefore"
:show-file-list="false"
>
<el-button size="mini" type="primary">
{{ $t('bpa_clickUpload') }}
</el-button>
</el-upload>
</el-form-item>
官方文档:
要是一个一个加的话,每一处都要加一个 headers
,整个项目有80多个页面需要加,这样耗时耗力,还容易加漏,加完了,每一处还得测一遍,保证加上,工作量太大了,于是就想了,能不能全局配置一次,批量处理,于是就处理成下面的写法了:
首先在utils文件夹里,新建一个.js文件,我建了uploadConfig.js
uploadConfig.js的内容:
// 全局 配置 upload 组件属性
import ElementUI from 'element-ui';
// model 公共参数
let modelInterface = ''
modelInterface = localStorage.getItem('CommonInterface')
ElementUI.Upload.props.headers.default = {
model: modelInterface ? modelInterface : ''
}
export default ElementUI
然后在man.js里引入,就可以了:
import './utils/uploadConfig' //引入upload组件属性全局配置方法
在页面调用的结果如下:
这样在每处使用上传组件的接口,请求头里都加上了model参数。
类似的,其他组件也可以这样配置,例如:
1.element-ui dialog组件 怎么全局配置close-on-click-modal默认值为false?
import Vue from 'vue'
import Element from 'element-ui'
//全局修改默认配置
Element.Dialog.props.closeOnClickModal.default=false;
console.info(Element.Dialog);
Vue.use(Element)
注意点,就是点到属性后,再 .default
,不然不生效,这个是element ui 自己封装的语法。