11月04, 2016

Element-UI组件中的分页国际化

Element-UI 是去哪里前端团队基于Vue2.0开发的一套UI组件,使用起来非常方便。最近在项目中用到了它的Pagination组件,显示效果如下:

See the Pen oYNwxr by flyingzl (@flyingzl) on CodePen.

但是,由于我们系统是英文的,翻页条上不能显示中文, 翻看下其API文档,发现没有配置的地方;同时也翻阅了下源码,代码里面是这么写的:

render(h) {
  return (
    <span class="el-pagination__jump">
      前往
      <input
        class="el-pagination__editor"
        type="number"
        min={ 1 }
        max={ this.pageCount }
        domProps-value={ this.$parent.internalCurrentPage }
        on-change={ this.handleChange }
        on-focus={ this.handleFocus }
        style={{ width: "30px" }}
        number/></span>
  );
}
},

从源码中可以看到,中文是写死的,这种情况下,我们该怎么把中文替换为英文呢? 第一反应是能否通过DOM操作来替换字符串,思路就是在组件加载完毕后,进行DOM替换。事实证明这样也是可行,如下所示:

See the Pen element-ui-pagination-dom by flyingzl (@flyingzl) on CodePen.

但是总觉得有点不舒服,我们用Vue就是为尽量少的操作DOM,让数据来驱动DOM,这样就显得不是那么优雅了。有没有更优雅的方式来处理呢?Stackoverflow下,有人提到了用font-size来隐藏文本,我觉得是个好方法,就实现了这种想法。如下面的代码所示:

See the Pen element-ui-pagination-i18n by flyingzl (@flyingzl) on CodePen.

思路其实很简单,我们先将.el-pagination__editorfont-size设置为0,这样其下的文本就隐藏了,然后在通过::before动态生成一个文本就可以了,思路还是很巧妙的。不过这种思路也存在一个小问题,就是需要重置父亲节点下所有文本框的font-size。同时,国际化也不是非常方便,因为Go这个字符串是写死在CSS代码里面。所以还需要想办法把Go替换为变量。可以考虑通过Javascript来动态生成CSS,或者把CSS写在通过服务端来渲染的页面中也可以,因为这样才可以读取到国际化信息。

这是一种不错的思路,希望能和大家分享下。

本文链接:http://www.asyncoder.com//post/element-ui-pagination-i18n.html

-- EOF --

Comments