webpackJsonp([76],{"C/JU":function(s,a,t){s.exports=t("VdIl")},VdIl:function(s,a,t){varn=t("VU/8")(null,t("b9ml"),null,null,null);s.exports=n.exports},b9ml:function(s,a){s.exports={render:function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("section",[t("h2",{attrs:{id:"Internationalization"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Internationalization-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Internationalization")]),s._v(""),s._m(0),s._v(""),s._m(1),s._v(""),t("h2",{attrs:{id:"Internationalizationwithincomponents"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Internationalizationwithincomponents-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Internationalization within components")]),s._v(""),t("p",[s._v("Cube-ui is the Chinese language pack used by default and is already registered. The corresponding English language pack is also built into the cube-ui, but you need the following logic to register the language pack and switch to the corresponding language.")]),s._v(""),s._m(2),s._v(""),t("p",[s._v("Cube-ui will listen to the current language type, so it automatically renders the corresponding copy of the component, and caches the loaded copy. When the component language is switched, if the language pack is already installed, cube-ui directly takes the cached copy. Similar pseudo code is as follows:")]),s._v(""),s._m(3),s._v(""),t("p",[s._v("But maybe you have translation needs in other countries, such as Japanese and Korean, then you need to provide the language pack yourself and switch to the corresponding language. code show as below:")]),s._v(""),s._m(4),s._v(""),t("p",[s._v("The configuration item format of the language pack you import should be similar to the following. The default Chinese language pack is as follows:")]),s._v(""),s._m(5),s._v(""),t("h2",{attrs:{id:"Internationalizationofapplications1.12.23+"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Internationalizationofapplications1.12.23+-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Internationalization of applications"),t("sup",[s._v("1.12.23+")])]),s._v(""),t("p",[s._v("As mentioned above, cube-ui provides international capabilities for its own components, but this capability can be extended to your application in two steps:")]),s._v(""),s._m(6),s._v(""),s._m(7),s._v(""),s._m(8),s._v(""),t("p",[s._v("Then import the language pack in your app's entry file.")]),s._v(""),s._m(9),s._v(""),s._m(10),s._v(""),s._m(11),s._v(""),s._m(12),s._v(""),s._m(13),s._v(""),s._m(14),s._v(""),s._m(15),s._v(""),s._m(16),s._v(""),s._m(17),s._v(""),s._m(18)])},staticRenderFns:[function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("blockquote",[t("p",[s._v("New in 1.11.0+")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("p",[s._v("All non-configurable copy files inside "),t("code",{pre:!0},[s._v("cube-ui")]),s._v(" are in Chinese, so if your application needs to do the corresponding international translation, then "),t("code",{pre:!0},[s._v("1.11.0")]),s._v(" is available for cube-ui provide ability to translate a component's copywriting, even this ability can be extended to your application.")])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v(""),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Locale } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enUSMessages "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui/src/locale/lang/en-US'")]),s._v("\n\n Vue.use(Locale)\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Switch to English and cache the current language pack")]),s._v("\n Locale.use("),t("span",{attrs:{class:"hljs-string"}},[s._v("'en-US'")]),s._v(", enUSMessages)\n")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v(""),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Locale } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enUSMessages "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui/src/locale/lang/en-US'")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Load Chinese language pack by default")]),s._v("\n Vue.use(Locale)\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Switch to English and need to import the English language pack")]),s._v("\n one.click("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v("{\n Locale.use("),t("span",{attrs:{class:"hljs-string"}},[s._v("'en-US'")]),s._v(", enUSMessages)\n })\n\n another.click("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// load Chinese from cache")]),s._v("\n Locale.use("),t("span",{attrs:{class:"hljs-string"}},[s._v("'zh-CN'")]),s._v(")\n })\n")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v(""),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Locale } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" jPMessages "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'/somewhere/ja-JP.js'")]),s._v(""),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Your own language")]),s._v("\n\n Vue.use(Locale)\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Switch to Japanese and need to import Japanese language packs")]),s._v("\n Locale.use("),t("span",{attrs:{class:"hljs-string"}},[s._v("'ja-JP'")]),s._v(", jPMessages)\n")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v(""),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(""),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("cancel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'取消'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("confirm")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'确认'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("ok")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'确定'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("prev")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'上一步'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("next")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'下一步'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("now")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'现在'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectTime")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'选择时间'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("today")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'今日'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("formatDate")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'M月D日'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("hours")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'点'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("minutes")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'分'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'此为必填项'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入数字'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'数据类型应为数组'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择有效日期'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入有效邮箱'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入有效的手机号码'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入有效网址'")]),s._v("\n },\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'至少输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'不得小于 {{config}}'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择至少 {{config}} 项'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择 {{config | toLocaleDateString(\"yyyy年MM月dd日\")}} 之后的时间'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'至少输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'至少输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'至少输入 {{config}} 位字符'")]),s._v("\n },\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请勿超过 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请勿大于 {{config}}'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'最多选择 {{config}} 项'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择 {{config | toLocaleDateString(\"yyyy年MM月dd日\")}} 之前的时间'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请勿超过 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请勿超过 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请勿超过 {{config}} 位字符'")]),s._v("\n },\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("len")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'长度应等于 {{config}}'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择 {{config}} 项'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择 {{config | toLocaleDateString(\"yyyy年MM月dd日\")}} 之前的时间'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入 {{config}} 位字符'")]),s._v("\n },\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("pattern")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'格式错误'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("custom")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'未通过校验'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("notWhitespace")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'空白内容无效'")]),s._v("\n }\n }\n")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("ol",[t("li",[s._v("Import language packs")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("p",[s._v("you must import the language pack, which should be the full set containing the "),t("code",{pre:!0},[s._v("cube-ui")]),s._v(" default language pack. For example, your language pack configuration might look like this:")])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v(""),t("span",{attrs:{class:"hljs-comment"}},[s._v("// default.js")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(""),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n"),t("span",{attrs:{class:"hljs-string"}},[s._v('"application_key"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"this is application text"')]),s._v(",\n"),t("span",{attrs:{class:"hljs-string"}},[s._v('"country"')]),s._v(": {\n"),t("span",{attrs:{class:"hljs-string"}},[s._v('"province"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Beijing"')]),s._v("\n }\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* defaults of cube-ui*/")]),s._v("\n"),t("span",{attrs:{class:"hljs-string"}},[s._v('"cancel"')]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"Cancel"')]),s._v(",\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// ...ignore")]),s._v("\n"),t("span",{attrs:{class:"hljs-string"}},[s._v('"validator"')]),s._v(": {"),t("span",{attrs:{class:"hljs-comment"}},[s._v("/* */")]),s._v("}\n }\n")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v(""),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Locale } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" defaultMessages "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'default.js'")]),s._v(""),t("span",{attrs:{class:"hljs-comment"}},[s._v("// your own language")]),s._v("\n\n Vue.use(Locale)\n Locale.use("),t("span",{attrs:{class:"hljs-string"}},[s._v("'zh-CN'")]),s._v(", defaultMessages)\n")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("ol",{attrs:{start:"2"}},[t("li",[s._v("Ability to inject translations through mixins inside components")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("p",[s._v("Then use the "),t("code",{pre:!0},[s._v("mixin")]),s._v(" capability provided by "),t("code",{pre:!0},[s._v("Vue")]),s._v(". cube-ui provides the conversion function "),t("code",{pre:!0},[s._v("$t")]),s._v(" for the language package "),t("code",{pre:!0},[s._v("key=>value")]),s._v(". You only need to inject it into the component's "),t("code",{pre:!0},[s._v("mixins")]),s._v(" property, and then you can use it in the template. An example is as follows:")])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-comment"}},[s._v("// dialog.vue")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { Locale } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n<script>\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(""),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("//...")]),s._v("\n mixins: [Locale.localeMixin] "),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Inject mixin, have the ability to $t. After v1.12.23")]),s._v("\n }\n<"),t("span",{attrs:{class:"hljs-regexp"}},[s._v("/script>\n")])])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("p",[s._v("Then you can reference the "),t("code",{pre:!0},[s._v("$t()")]),s._v(" method in the template.")])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-html"}},[s._v(""),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("{{$t('application_key')}}"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("p",[s._v("Finally, "),t("code",{pre:!0},[s._v("{{$t('application_key')}}")]),s._v(" is rendered as "),t("code",{pre:!0},[s._v('"this is application text"')]),s._v(". Considering that your language pack may be multi-level nested, "),t("code",{pre:!0},[s._v("$t")]),s._v(" also accepts a string with a separator of "),t("code",{pre:!0},[s._v('"."')]),s._v(" to get deep-level properties, such as:")])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[t("span",{attrs:{class:"hljs-comment"}},[s._v("// your language packs structure")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(""),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("a")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("b")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("c")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v('"nested c"')]),s._v("\n }\n }\n}\n")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("p",[s._v("It is easy to use it in "),t("code",{pre:!0},[s._v("template")]),s._v("。")])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-html"}},[t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n {{$t('a.b.c')}}\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])])}]}}});
webpackJsonp([76],{"C/JU":function(s,a,t){s.exports=t("VdIl")},VdIl:function(s,a,t){varn=t("VU/8")(null,t("b9ml"),null,null,null);s.exports=n.exports},b9ml:function(s,a){s.exports={render:function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("section",[t("h2",{attrs:{id:"Internationalization"}},[t("a",{staticClass:"anchor",attrs:{href:"#cube-Internationalization-anchor","aria-hidden":"true"}},[t("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Internationalization")]),s._v(""),s._m(0),s._v(""),t("p",[s._v("The cube-ui component uses Chinese internally by default. If you want to use another language, you need to set it in multiple languages. Take English as an example in main.js:")]),s._v(""),s._m(1),s._v(""),t("p",[s._v("Or, import by module")]),s._v(""),s._m(2),s._v(""),t("p",[s._v("Cube-ui will watch the current language type, so it automatically renders once language type has changed, and caches the loaded translation. When the language type is switched and the language translation is already installed, cube-ui directly takes the cached copy. Similar pseudo code is as follows:")]),s._v(""),s._m(3),s._v(""),t("p",[s._v("The default messages is as follows")]),s._v(""),s._m(4)])},staticRenderFns:[function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("blockquote",[t("p",[s._v("New in 1.11.0+")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Full import")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" CubeUI "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enUSMessages "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui/src/locale/lang/en-US'")]),s._v(""),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Built-in in cube-ui")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" jaJPMessages "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'../some/path/lang/ja-JP'")]),s._v(""),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Import Japanese language by yourself")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("const")]),s._v(" Locale = CubeUI.Locale\n Vue.use(CubeUI)\n Locale.use("),t("span",{attrs:{class:"hljs-string"}},[s._v("'en-US'")]),s._v(", enUSMessages)\n Locale.use("),t("span",{attrs:{class:"hljs-string"}},[s._v("'ja-JP'")]),s._v(", jaJPMessages)\n\n")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Only import ActionSheet")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { ActionSheet, Locale } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enUSMessages "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui/src/locale/lang/en-US'")]),s._v("\n\n Vue.use(Locale)\n Locale.use("),t("span",{attrs:{class:"hljs-string"}},[s._v("'en-US'")]),s._v(", enUSMessages)\n\n")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Only import ActionSheet")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" Vue "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'vue'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" { ActionSheet, Locale } "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui'")]),s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("import")]),s._v(" enUSMessages "),t("span",{attrs:{class:"hljs-keyword"}},[s._v("from")]),s._v(""),t("span",{attrs:{class:"hljs-string"}},[s._v("'cube-ui/src/locale/lang/en-US'")]),s._v("\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Chinese translation by default")]),s._v("\n Vue.use(Locale)\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Click to switch English language translation")]),s._v("\n one.click("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v("{\n Locale.use("),t("span",{attrs:{class:"hljs-string"}},[s._v("'en-US'")]),s._v(", enUSMessages)\n })\n\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Switch back to default")]),s._v("\n another.click("),t("span",{attrs:{class:"hljs-function"}},[t("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n"),t("span",{attrs:{class:"hljs-comment"}},[s._v("// Take the translation from the cache")]),s._v("\n Locale.use("),t("span",{attrs:{class:"hljs-string"}},[s._v("'zh-CN'")]),s._v(")\n })\n\n")])])},function(){vars=this,a=s.$createElement,t=s._self._c||a;returnt("pre",{pre:!0},[t("code",{attrs:{"v-pre":"",class:"language-js"}},[s._v("\n"),t("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(""),t("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("cancel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'取消'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("confirm")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'确认'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("ok")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'确定'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("prev")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'上一步'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("next")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'下一步'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectText")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("now")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'现在'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("selectTime")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'选择时间'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("today")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'今日'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("formatDate")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'M月D日'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("hours")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'点'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("minutes")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'分'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("validator")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("required")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'此为必填项'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入数字'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'数据类型应为数组'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择有效日期'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入有效邮箱'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入有效的手机号码'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入有效网址'")]),s._v("\n },\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'至少输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'不得小于 {{config}}'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择至少 {{config}} 项'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择 {{config | toLocaleDateString(\"yyyy年MM月dd日\")}} 之后的时间'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'至少输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'至少输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'至少输入 {{config}} 位字符'")]),s._v("\n },\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请勿超过 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请勿大于 {{config}}'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'最多选择 {{config}} 项'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择 {{config | toLocaleDateString(\"yyyy年MM月dd日\")}} 之前的时间'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请勿超过 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请勿超过 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请勿超过 {{config}} 位字符'")]),s._v("\n },\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("len")]),s._v(": {\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("string")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("number")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'长度应等于 {{config}}'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("array")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择 {{config}} 项'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请选择 {{config | toLocaleDateString(\"yyyy年MM月dd日\")}} 之前的时间'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("email")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("tel")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入 {{config}} 位字符'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("url")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'请输入 {{config}} 位字符'")]),s._v("\n },\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("pattern")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'格式错误'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("custom")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'未通过校验'")]),s._v(",\n"),t("span",{attrs:{class:"hljs-attr"}},[s._v("notWhitespace")]),s._v(": "),t("span",{attrs:{class:"hljs-string"}},[s._v("'空白内容无效'")]),s._v("\n }\n }\n\n")])])}]}}});