element按需加载以及修改element语言包(vue)
时间:2020-05-20
本文章向大家介绍element按需加载以及修改element语言包(vue),主要包括element按需加载以及修改element语言包(vue)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一般对于vue开发来说,element应该是web端常用的ui框架,默认情况下,会加载所有的组件,但是可能很多组件我们并不需要,官方也提供了组件化的方法。
默认情况下,我们使用element:
import Vue from "vue"; import Element from "element-ui"; Vue.use(Element, options);
按需加载:
// elementPlugin.js import {Header, InfiniteScroll, Loading} from 'element-ui'; export default { install(Vue, options){ const components = [Header]; components.forEach(component => { Vue.component(component.name, component); }); Vue.prototype.$ELEMENT = { size: options.size || "", zIndex: options.zIndex || 2000 }; Vue.use(InfiniteScroll); Vue.use(Loading.directive); Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.$confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message; } }
部分可能和官方文档有区别,因为这里是直接从element源码中间复制出来的
我们就可以使用默认的加载方式加载element了
import Vue from "vue"; import Element from "./elementPlugins"; Vue.use(Element, options);
element语言包切换:
import locale from "element-ui/lib/locale" import en from "element-ui/lib/locale/lang/en"; locale.use(en);
但是有时候,我们可能需要自定义element里面的语言,我们尝试打印一下语言包中间的信息
console.log(en); // {"el":{"colorpicker":{"confirm":"OK","clear":"Clear"},"datepicker":{"now":"Now","today":"Today","cancel":"Cancel","clear":"Clear","confirm":"OK","selectDate":"Select date","selectTime":"Select time","startDate":"Start Date","startTime":"Start Time","endDate":"End Date","endTime":"End Time","prevYear":"Previous Year","nextYear":"Next Year","prevMonth":"Previous Month","nextMonth":"Next Month","year":"","month1":"January","month2":"February","month3":"March","month4":"April","month5":"May","month6":"June","month7":"July","month8":"August","month9":"September","month10":"October","month11":"November","month12":"December","week":"week","weeks":{"sun":"Sun","mon":"Mon","tue":"Tue","wed":"Wed","thu":"Thu","fri":"Fri","sat":"Sat"},"months":{"jan":"Jan","feb":"Feb","mar":"Mar","apr":"Apr","may":"May","jun":"Jun","jul":"Jul","aug":"Aug","sep":"Sep","oct":"Oct","nov":"Nov","dec":"Dec"}},"select":{"loading":"Loading","noMatch":"No matching data","noData":"No data","placeholder":"Select"}}}
ps:不全,有兴趣的可以自己打印一下
然后我们再看一下,他是如何找到对应的字段
export const t = function(path, options) { let value = i18nHandler.apply(this, arguments); if (value !== null && value !== undefined) return value; // 分割路径 const array = path.split('.'); let current = lang; // 遍历路径找到对应的值 for (let i = 0, j = array.length; i < j; i++) { const property = array[i]; value = current[property]; if (i === j - 1) return format(value, options); if (!value) return ''; current = value; } return ''; };
所以这里就有思路了,我们只需要修改对应字段的值,就可以做到定制element语言包
// 根据路径,覆盖语言包的值 function getVal(data, key) { let _first = key.shift(); const _data = data[_first]; if (!(_data instanceof Object)) { return {}; } if (key.length) { return getVal(_data, key); } else { return _data; } } if (options.locale) { // 拷贝语言包,不能修改到原始的对象,虽然原始对象不太可能继续用到 const _locale = JSON.parse(JSON.stringify(options.locale)); // 根据配置修改对应字段 if (options.localeReplace) { for (let key in options.localeReplace) { const _array = key.split("."); // 分为两部分,一部分是最后一个key,一部分是前面的,为了获取引用而不是值 const _lastKey = _array.pop(); getVal(_locale, _array)[_lastKey] = options.localeReplace[key]; } } locale.use(_locale); } main.js Vue.use(Element, { size: "small", zIndex: 3000, locale, localeReplace: { "el.pagination.pagesize": "" } });
最后,我们降pagination这个组件里面的默认字段设置为了空,本来应该显示10pages,现在就显示10
原文地址:https://www.cnblogs.com/timmer/p/12924398.html
- 如何使用Java代码访问HDFS.docx
- Django CSRF Bypass (CVE-2016-7401) 漏洞分析
- 如何使用Cloudera Manager禁用YARN的HA
- Web Worker 中的 importScripts 和 baseHref 同源策略绕过问题
- 如何使用Java代码访问CDH的Solr服务
- Safari UXSS漏洞分析(CVE-2016-4758)
- Sqoop抽取Hive Parquet表数据到MySQL异常分析
- Hue中使用Oozie创建Ssh工作流时sudo命令执行失败问题分析
- [译]Safari URL重定向漏洞(CVE-2016-4585)利用分析
- Hive中的Timestamp类型日期与Impala中显示不一致分析(补充)
- 百篇(5):FeignClient 在不同场景中的应用
- 如何使用Hue上创建一个完整Oozie工作流
- MySQL远程代码执行/权限提升漏洞的分析与实践(CVE-2016-6662)
- 如何在CDH集群上部署Python3运行环境及运行Python作业
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux笔记(12)| 几种并发式IO的实现方法
- 使用ansible部署DNS主从(ubuntu)
- “一瓶一证”防伪溯源,腾讯安全领御与百年张裕达成战略合作
- ubuntu离线安装python环境
- ubuntu下解决Unment dependencies问题
- 【Vulnhub】Literally Vulnerable
- 内核通信之 Netlink 源码分析和实例分析
- supervisor简单使用
- 干货!Python常用数据类型的基本操作(长文系列第一篇)
- JAVA注意事项
- python3实现邮件的发送
- C++ 学习笔记
- python基础—pathlib模块
- python基础—dict
- python基础—datetime模块