refactor:views/components

src/views/i18n-demo/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <svg-icon icon-class="international" />
+        <span style='margin-left:10px;'>{{$t('i18nView.title')}}</span>
+      </div>
+      <div>
+        <el-radio-group v-model="lang" size="small">
+          <el-radio label="zh" border>简体中文</el-radio>
+          <el-radio label="en" border>English</el-radio>
+        </el-radio-group>
+        <el-tag style='margin-top:15px;display:block;' type="info">{{$t('i18nView.note')}}</el-tag>
+      </div>
+    </el-card>
+    <el-row :gutter="20" style="margin:100px 50px 50px;">
+      <el-col :span="12">
+        <div class="block">
+          <el-date-picker v-model="date" type="date" :placeholder="$t('i18nView.datePlaceholder')"></el-date-picker>
+        </div>
+        <div class="block">
+          <el-pagination :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
+            :total="400">
+          </el-pagination>
+        </div>
+        <div class="block">
+          <el-button  size="small">{{$t('i18nView.default')}}</el-button>
+          <el-button size="small" type="primary">{{$t('i18nView.primary')}}</el-button>
+          <el-button size="small" type="success">{{$t('i18nView.success')}}</el-button>
+          <el-button size="small" type="info">{{$t('i18nView.info')}}</el-button>
+          <el-button size="small" type="warning">{{$t('i18nView.warning')}}</el-button>
+          <el-button size="small" type="danger">{{$t('i18nView.danger')}}</el-button>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <el-table :data="tableData" fit highlight-current-row border style="width: 100%">
+          <el-table-column prop="date" :label="$t('i18nView.tableDate')" width="180"></el-table-column>
+          <el-table-column prop="name" :label="$t('i18nView.tableName')" width="180"></el-table-column>
+          <el-table-column prop="address" :label="$t('i18nView.tableAddress')"></el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import local from './local'
+const viewName = 'i18nView'
+
+export default {
+  name: 'i18n',
+  data() {
+    return {
+      date: '',
+      currentPage: 5,
+      tableData: [{
+        date: '2016-05-03',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-04',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      },
+      {
+        date: '2016-05-01',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      }]
+    }
+  },
+  created() {
+    if (!this.$i18n.getLocaleMessage('en')[viewName]) {
+      this.$i18n.mergeLocaleMessage('en', local.en)
+      this.$i18n.mergeLocaleMessage('zh', local.zh)
+    }
+  },
+  computed: {
+    lang: {
+      get() {
+        return this.$store.state.app.language
+      },
+      set(lang) {
+        this.$i18n.locale = lang
+        this.$store.dispatch('setLanguage', lang)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box-card {
+  width: 600px;
+  margin: 20px auto;
+}
+
+.block {
+  padding: 25px;
+}
+</style>

src/views/i18n-demo/local.js

@@ -0,0 +1,36 @@
+
+export default {
+  zh: {
+    i18nView: {
+      title: '切换语言',
+      note: '目前只翻译了当前页面和侧边栏和导航，未完待续，敬请期待...',
+      datePlaceholder: '请选择日期',
+      tableDate: '日期',
+      tableName: '姓名',
+      tableAddress: '地址',
+      default: '默认按钮',
+      primary: '主要按钮',
+      success: '成功按钮',
+      info: '信息按钮',
+      warning: '警告按钮',
+      danger: '危险按钮'
+    }
+
+  },
+  en: {
+    i18nView: {
+      title: 'Switch Language',
+      note: 'Currently only translated the i18n page and the sidebar and levelbar, please look forword to...',
+      datePlaceholder: 'Pick a day',
+      tableDate: 'tableDate',
+      tableName: 'tableName',
+      tableAddress: 'tableAddress',
+      default: 'default:',
+      primary: 'primary',
+      success: 'success',
+      info: 'info',
+      warning: 'warning',
+      danger: 'danger'
+    }
+  }
+}