fix: 语言切换的问题

.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,

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': `

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: {

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)

src/locale/index.js

@@ -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 ''
-}

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 ''
+    }
+  }
+}

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)
     },

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) => {

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', () => {