From 0b424e60cd20d152fdd1a9499b929a947b6ad044 Mon Sep 17 00:00:00 2001
From: mxie <15623530290@163.com>
Date: Tue, 19 Jun 2018 14:16:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AF=AD=E8=A8=80=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js         |  1 +
 demo/index.js        |  2 +-
 src/calendar.vue     |  8 +++++---
 src/index.vue        | 19 ++++++++++++-------
 src/locale/index.js  | 30 ------------------------------
 src/mixins/locale.js | 32 ++++++++++++++++++++++++++++++++
 src/panel/date.js    |  5 +++--
 src/panel/month.js   |  5 +++--
 test/index.spec.js   | 15 ++++++++++-----
 9 files changed, 67 insertions(+), 50 deletions(-)
 delete mode 100644 src/locale/index.js
 create mode 100644 src/mixins/locale.js

diff --git a/.eslintrc.js b/.eslintrc.js
index a7c2bb6..64f7572 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -25,6 +25,7 @@ module.exports = {
     'generator-star-spacing': 'off',
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-console': process.env.NODE_ENV === 'production' ? ["error", { allow: ["warn", "error"] }] : 'off'
     'camelcase': ['off', { properties: 'never' }],
     // "vue/max-attributes-per-line": [2, {
     //   "singleline": 1,
diff --git a/demo/index.js b/demo/index.js
index 92664c7..ef85c46 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -44,7 +44,7 @@ new Vue({  // eslint-disable-line
   render (h) {
     const example1 = {
       'base': '<date-picker v-model="value1" lang="en" :not-before="new Date()"></date-picker>',
-      'range': '<date-picker v-model="value2" range lang="en"></date-picker>'
+      'range': '<date-picker v-model="value2" range ></date-picker>'
     }
     const example2 = {
       'datetime': `
diff --git a/src/calendar.vue b/src/calendar.vue
index 36f33b5..eddbe72 100644
--- a/src/calendar.vue
+++ b/src/calendar.vue
@@ -64,7 +64,7 @@
 
 <script>
 import { isValidDate, isDateObejct } from '@/utils/index'
-import { t } from '@/locale/index'
+import locale from '@/mixins/locale'
 import scrollIntoView from '@/utils/scroll-into-view'
 import PanelDate from '@/panel/date'
 import PanelYear from '@/panel/year'
@@ -74,6 +74,7 @@ import PanelTime from '@/panel/time'
 export default {
   name: 'CalendarPanel',
   components: { PanelDate, PanelYear, PanelMonth, PanelTime },
+  mixins: [locale],
   props: {
     value: {
       default: null,
@@ -133,11 +134,9 @@ export default {
     const calendarYear = now.getFullYear()
     const calendarMonth = now.getMonth()
     const firstYear = Math.floor(calendarYear / 10) * 10
-    const months = t('months')
     return {
       panel: 'DATE',
       dates: [],
-      months,
       calendarMonth,
       calendarYear,
       firstYear
@@ -156,6 +155,9 @@ export default {
     },
     timeHeader () {
       return this.value && new Date(this.value).toLocaleDateString()
+    },
+    months () {
+      return this.t('months')
     }
   },
   watch: {
diff --git a/src/index.vue b/src/index.vue
index 8a7af81..f11d25c 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -98,13 +98,15 @@
 <script>
 import fecha from 'fecha'
 import clickoutside from '@/directives/clickoutside'
-import { isValidDate, isValidRange, isDateObejct } from '@/utils/index'
-import { use, t } from '@/locale/index'
+import { isValidDate, isValidRange, isDateObejct, isPlainObject } from '@/utils/index'
 import CalendarPanel from './calendar.vue'
+import locale from '@/mixins/locale'
+import Languages from '@/locale/languages'
 
 export default {
   name: 'DatePicker',
   components: { CalendarPanel },
+  mixins: [locale],
   directives: {
     clickoutside
   },
@@ -189,11 +191,17 @@ export default {
     }
   },
   computed: {
+    language () {
+      if (isPlainObject(this.lang)) {
+        return { ...Languages.en, ...this.lang }
+      }
+      return Languages[this.lang] || Languages.en
+    },
     innerPlaceholder () {
       if (typeof this.placeholder === 'string') {
         return this.placeholder
       }
-      return this.range ? t('placeholder.dateRange') : t('placeholder.date')
+      return this.range ? this.t('placeholder.dateRange') : this.t('placeholder.date')
     },
     text () {
       if (this.userInput !== null) {
@@ -222,7 +230,7 @@ export default {
       if (this.shortcuts === false) {
         return []
       }
-      const pickers = t('pickers')
+      const pickers = this.t('pickers')
       const arr = [
         {
           text: pickers[0],
@@ -248,9 +256,6 @@ export default {
       return arr
     }
   },
-  created () {
-    use(this.lang)
-  },
   methods: {
     initCalendar () {
       this.handleValueChange(this.value)
diff --git a/src/locale/index.js b/src/locale/index.js
deleted file mode 100644
index 2db7f70..0000000
--- a/src/locale/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Languages from './languages'
-import { isPlainObject } from '@/utils/index'
-
-let lang = 'zh'
-
-export function use (target) {
-  if (isPlainObject(target)) {
-    lang = { ...Languages.en, ...target }
-  } else {
-    lang = Languages[target] || Languages.en
-  }
-}
-
-export function t (path) {
-  const arr = path.split('.')
-  let current = lang
-  let value
-  for (let i = 0, len = arr.length; i < len; i++) {
-    const prop = arr[i]
-    value = current[prop]
-    if (i === len - 1) {
-      return value
-    }
-    if (!value) {
-      return ''
-    }
-    current = value
-  }
-  return ''
-}
diff --git a/src/mixins/locale.js b/src/mixins/locale.js
new file mode 100644
index 0000000..3aed378
--- /dev/null
+++ b/src/mixins/locale.js
@@ -0,0 +1,32 @@
+
+export default {
+  methods: {
+    t (path) {
+      let component = this
+      let name = component.$options.name
+      while (component && (!name || name !== 'DatePicker')) {
+        component = component.$parent
+        if (component) {
+          name = component.$options.name
+        }
+      }
+      if (component && component.language) {
+        const arr = path.split('.')
+        let current = component.language
+        let value
+        for (let i = 0, len = arr.length; i < len; i++) {
+          const prop = arr[i]
+          value = current[prop]
+          if (i === len - 1) {
+            return value
+          }
+          if (!value) {
+            return ''
+          }
+          current = value
+        }
+      }
+      return ''
+    }
+  }
+}
diff --git a/src/panel/date.js b/src/panel/date.js
index 383727b..64e96c5 100644
--- a/src/panel/date.js
+++ b/src/panel/date.js
@@ -1,7 +1,8 @@
-import { t } from '@/locale/index'
+import locale from '@/mixins/locale'
 
 export default {
   name: 'panelDate',
+  mixins: [locale],
   props: {
     value: null,
     startAt: null,
@@ -33,7 +34,7 @@ export default {
       this.$emit('select', date)
     },
     getDays (firstDayOfWeek) {
-      const days = t('days')
+      const days = this.t('days')
       const firstday = parseInt(firstDayOfWeek, 10)
       return days.concat(days).slice(firstday, firstday + 7)
     },
diff --git a/src/panel/month.js b/src/panel/month.js
index 49c7cb4..855364e 100644
--- a/src/panel/month.js
+++ b/src/panel/month.js
@@ -1,7 +1,8 @@
-import { t } from '@/locale/index'
+import locale from '@/mixins/locale'
 
 export default {
   name: 'panelMonth',
+  mixins: [locale],
   props: {
     value: null,
     calendarYear: {
@@ -14,7 +15,7 @@ export default {
     }
   },
   render (h) {
-    let months = t('months')
+    let months = this.t('months')
     const currentYear = this.value && new Date(this.value).getFullYear()
     const currentMonth = this.value && new Date(this.value).getMonth()
     months = months.map((v, i) => {
diff --git a/test/index.spec.js b/test/index.spec.js
index c722cb4..fb31a64 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -191,14 +191,19 @@ describe('datepicker', () => {
     expect(el.getAttribute('placeholder')).toBe('hehe')
   })
 
-  it('prop: lang', () => {
-    wrapper = shallowMount(DatePicker, {
+  it.only('prop: lang', () => {
+    wrapper = mount(DatePicker, {
       propsData: {
-        lang: 'en'
+        lang: 'en',
+        value: new Date(2018, 5, 5)
       }
     })
-    const el = wrapper.find('.mx-input').element
-    expect(el.getAttribute('placeholder')).toBe('Select Date')
+    const el = wrapper.find('.mx-current-month')
+    expect(el.text()).toBe('Jun')
+    wrapper.setProps({
+      lang: 'zh'
+    })
+    expect(el.text()).toBe('6月')
   })
 
   it('prop: shortcuts', () => {