[Doc] add switch lang button in mobile (#348)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

* [Doc] add Internationalization document

* [bugfix] remove unnecessary props

* [fix] optimize clickoutside

* [new feature] optimize find-parent

* [new feature]: change document title accordinng to language

* [new feature] Pagination code review

* [improvement] adjust icon-font unicode

* [improvement] Icon spinner color inherit

* [improvement] icon default width

* [bugfix] DateTimePicker validate date props

* [bugfix] Tab item text ellipsis

* [improvement] optimize single line ellipsis

* [Improvement] optimzie staticClass

* [Improvement] Button: use sfc instread of jsx

* [Improvement] update actionsheet close icon style

* fix: yarn.lock

* fix: icon test cases

* [bugfix] errors during ssr

* [Improvement] SubmitBar add left slot

* [new feature] ImagePreview support manually close

* fix: ImagePreview test case

* [Doc] add switch lang button in mobile

.eslintrc.js

@@ -106,7 +106,7 @@ module.exports = {
     'no-this-before-super': 2,
     'no-throw-literal': 2,
     'no-trailing-spaces': 2,
-    'no-undef': 2,
+    'no-undef': 0,
     'no-undef-init': 2,
     'no-unexpected-multiline': 2,
     'no-unmodified-loop-condition': 2,

docs/src/components/DemoList.vue

@@ -4,6 +4,10 @@
       <img src="https://img.yzcdn.cn/public_files/2017/10/25/c2e074cd97d4d9e9b14a87b2fcb29430.png" />
       <span>Vant</span>
     </h1>
+    <div class="mobile-switch-lang">
+      <span :class="{ active: $vantLang === 'en-US' }" @click="switchLang('en-US')">EN</span>
+      <span :class="{ active: $vantLang === 'zh-CN' }" @click="switchLang('zh-CN')">中文</span>
+    </div>
     <h2 class="zanui-desc">{{ description }}</h2>
     <div class="mobile-navs">
       <div class="mobile-nav-item" v-for="(item, index) in navList" v-if="item.showInMobile" :key="index">
@@ -16,6 +20,7 @@
 <script>
 import docConfig from '../doc.config';
 import MobileNav from './MobileNav';
+import { setLang } from '../utils/lang';
 
 export default {
   data() {
@@ -40,15 +45,23 @@ export default {
     description() {
       return this.$vantLang === 'zh-CN' ? '有赞移动端 Vue 组件库' : 'A Vue.js 2.0 Mobile UI at YouZan';
     }
+  },
+
+  methods: {
+    switchLang(lang) {
+      setLang(lang);
+    }
   }
 };
 </script>
 
 <style lang="postcss">
+@import '../../../packages/vant-css/src/common/var';
+
 .side-nav {
   width: 100%;
   box-sizing: border-box;
-  padding: 40px 15px 20px;
+  padding: 60px 15px 20px;
   position: relative;
   z-index: 1;
 
@@ -82,7 +95,30 @@ export default {
   .zanui-desc {
     font-size: 14px;
     color: #455a64;
-    margin: 0 0 50px;
+    margin: 0 0 60px;
+  }
+}
+
+.mobile-switch-lang {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  font-size: 11px;
+  border: 1px solid $blue;
+  border-radius: 3px;
+  color: $blue;
+  cursor: pointer;
+
+  span {
+    width: 32px;
+    line-height: 22px;
+    text-align: center;
+    display: inline-block;
+
+    &.active {
+      color: #fff;
+      background-color: $blue;
+    }
   }
 }
 </style>

docs/src/index.js

@@ -18,7 +18,7 @@ const router = new VueRouter({
 
 router.beforeEach((route, redirect, next) => {
   if (isMobile) {
-    window.location.replace('/zanui/vant/examples');
+    location.replace('/zanui/vant/examples' + location.hash);
   }
   document.title = route.meta.title || document.title;
   next();

docs/src/utils/lang.js

@@ -3,24 +3,36 @@ import zhCN from '../../../packages/locale/lang/zh-CN';
 import enUS from '../../../packages/locale/lang/en-US';
 
 const langMap = {
-  'en-US': enUS,
+  'en-US': {
-  'zh-CN': zhCN
+    title: 'Vant - A Vue.js 2.0 Mobile UI at YouZan',
+    messages: enUS
+  },
+  'zh-CN': {
+    title: 'Vant - 有赞移动端 Vue 组件库',
+    messages: zhCN
+  }
 };
 
-const titleMap = {
+setLang(getDefaultLang());
-  'en-US': 'Vant - A Vue.js 2.0 Mobile UI at YouZan',
-  'zh-CN': 'Vant - 有赞移动端 Vue 组件库'
-};
 
-const userLang = window.localStorage.getItem('VANT_LANGUAGE') || window.navigator.language || 'en-US';
+function getDefaultLang() {
-let defaultLang = 'en-US';
+  const langs = Object.keys(langMap);
-if (userLang.indexOf('zh-') !== -1) {
+  const hash = location.hash;
-  defaultLang = 'zh-CN';
+
+  for (let i = 0; i < langs.length; i++) {
+    if (hash.indexOf(langs[i]) !== -1) {
+      return langs[i];
+    }
+  }
+
+  const userLang = localStorage.getItem('VANT_LANGUAGE') || navigator.language || 'en-US';
+  return userLang.indexOf('zh-') !== -1 ? 'zh-CN' : 'en-US';
 }
-setLang(defaultLang);
 
 export function setLang(lang) {
-  window.localStorage.setItem('VANT_LANGUAGE', lang);
+  if (window.localStorage) {
-  Locale.use(lang, langMap[lang]);
+    localStorage.setItem('VANT_LANGUAGE', lang);
-  document.title = titleMap[lang];
+  }
+  Locale.use(lang, langMap[lang].messages);
+  document.title = langMap[lang].title;
 }