关于element-ui的一些好用的插件

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

element-ui自定义上传文件【el-upload插件】

在element-ui中提供了el-upload组件作为文件上传，实例如下：

只需要在action中添加你想要上传的url，然后再根据文档中的配置对应配置即可。但是，在实际开发中，经常需要如携带token上传文件等自定义上传方式，那么，我们就需要用到el-upload自定义上传的参数了。

使用http-request可以覆盖默认的上传行为，实现自定义上传。

大概使用如下：

 <el-upload 
     class="upload-demo"
     action="123"
     :http-request="upload"
     :show-file-list="false"
     accept=".xlsx"
 >
 <el-button type="primary"><i class="el-icon-upload2"></i> 上传模板</el-button>
</el-upload>
……
  upload(param){
     var fileObj = param.file;
     // FormData 对象
     var formData = new FormData();
     // 文件对象
     formData.append("file", fileObj);
     axios.post(url,formData,config)
            .then((response)=> {
              ……
            }).catch((res)=>{
              ……
              }
            })
     }

element-ui中使用国际化i18n

在开发过程中经常需要使用到多语言切换，那么在element-ui中提供了一个i18n的插件供我们进行多语言设置。

以下，我们以中英文配置为例。

首先安装

npm install --save vue-i18n

接下来在main.js全局引入i8n(以下是部分代码，仅供参考)

import VueI18n from 'vue-i18n';
import { messages } from './components/common/i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
    locale:'zh',  
    messages
});
Vue.use(ElementUI, {
    i18n: (key, value) => i18n.t(key, value)
})
new Vue({
    router,
    axios,
    i18n,
    render: h => h(App)
}).$mount('#app');

接着在公用文件中新建i18n.js，通过定义相同的变量，然后再‘zh’和‘en’配置不同的语言对应的表达，同时也记得将element-ui自身组件的语言包enLocale和zhLocale引入进来，并一同配置上去。

import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
export const messages = {
    'zh': {
        "i18n":{
            "t1":"系统首页",
            "t2":"会议管理"
            },
         ...zhLocale
        },
    'en': {
        i18n: {
            "t1": "Home Page",
            "t2": "Conference Management"
            },
        ...enLocale
       }
  }

最后，我们应该如何使用呢?

在页面中的显示，可以使用{{$t('i18n.t1')}}

那如何切换语言呢？

如下，可结合自身业务配置切换中英文等的按钮，再通过$i18n.locale设置为中文还是英文。

this.$i18n.locale = 'zh'    //设置中文
this.$i18n.locale = 'en'    //设置英文