el |
您所在的位置:网站首页 › elsa翻译中文 › el |
目标效果
先看下 element-plus 官网的效果 想要的目标效果如下: 废话不多说,先上代码 //main.ts import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import zhCn from 'element-plus/es/locale/lang/zh-cn'; // 修改分页器默认文字 zhCn.el.pagination.total = '共 `{total} 条`'; zhCn.el.pagination.goto = '跳至'; zhCn.el.pagination.pagesize = '条/页'; zhCn.el.pagination.pageClassifier = '页'; const app = createApp(App); app.use(ElementPlus, { locale: zhCn }).mount('#app');一般情况直接在main.ts 配置完就可以了,但是我的项目使用的 unplugin-vue-components 和 unplugin-auto-import 按需自动导入组件,有什么方法可以不用全局引入 ElementPlus 直接修改吗,当然! element 官网提供了一个组件 Config Provider,我们可以通过 ElConfigProvider 来实现语言配置。 完整代码如下: // ElConfigProvider 组件 import { ElConfigProvider } from 'element-plus'; // 引入中文包 import zhCn from 'element-plus/es/locale/lang/zh-cn'; // 更改分页文字 // zhCn.el.pagination.total = '共 `{total} 条`'; // zhCn.el.pagination.goto = '跳至'; // zhCn.el.pagination.pagesize = '条/页'; // zhCn.el.pagination.pageClassifier = '页';如果修改配置报错,可能时引入zhcn路径不正确,建议检查下elementplus版本,检查文件路径。 如果你想对所有使用的组件都转换中文,可以直接使用 包裹路由来实现。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |