fixed some components bug that can not translate when using vue-i18n

examples/routers/modal.vue

@@ -1,40 +1,45 @@
 <template>
     <div>
-        <i-button @click.native="modal2 = true">自定义页头和页脚</i-button>
+        <Button @click="confirm">标准</Button>
-        <Modal v-model="modal2" width="360">
+        <Button @click="custom">自定义按钮文字</Button>
-            <p slot="header" style="color:#f60;text-align:center">
+        <Button @click="async">异步关闭</Button>
-                <Icon type="information-circled"></Icon>
-                <span>删除确认</span>
-            </p>
-            <div style="text-align:center">
-                <p>此任务删除后，下游 10 个任务将无法执行。</p>
-                <p>是否继续删除？</p>
-            </div>
-            <div slot="footer">
-                <i-button type="error" size="large" long :loading="modal_loading" @click.native="del">删除</i-button>
-            </div>
-        </Modal>
     </div>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                modal2: false,
-                modal_loading: false,
-                modal3: false,
-                modal4: false,
-                modal5: false
-            }
-        },
         methods: {
-            del () {
+            confirm () {
-                this.modal_loading = true;
+                this.$Modal.confirm({
-                setTimeout(() => {
+                    title: '确认对话框标题',
-                    this.modal_loading = false;
+                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
-                    this.modal2 = false;
+                    onOk: () => {
-                    this.$Message.success('删除成功');
+                        this.$Message.info('点击了确定');
-                }, 2000);
+                    },
+                    onCancel: () => {
+                        this.$Message.info('点击了取消');
+                    }
+                });
+            },
+            custom () {
+                this.$Modal.confirm({
+                    title: '确认对话框标题',
+                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
+                    okText: 'OK',
+                    cancelText: 'Cancel'
+                });
+            },
+            async () {
+                this.$Modal.confirm({
+                    title: '确认对话框标题',
+                    content: '<p>对话框将在 2秒 后关闭</p>',
+                    loading: true,
+                    onOk: () => {
+                        setTimeout(() => {
+                            this.$Modal.remove();
+                            this.$Message.info('异步关闭了对话框');
+                        }, 2000);
+                    }
+                });
             }
         }
     }

src/components/modal/confirm.js

@@ -3,7 +3,7 @@ import Modal from './modal.vue';
 import Icon from '../icon/icon.vue';
 import iButton from '../button/button.vue';
 import { camelcaseToHyphen } from '../../utils/assist';
-import { t } from '../../locale';
+import Locale from '../../mixins/locale';
 
 const prefixCls = 'ivu-modal-confirm';
 
@@ -27,8 +27,8 @@ Modal.newInstance = properties => {
                     <div v-html="body"></div>
                 </div>
                 <div class="${prefixCls}-footer">
-                    <i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ cancelText }}</i-button>
+                    <i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ localeCancelText }}</i-button>
-                    <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</i-button>
+                    <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
                 </div>
             </div>
         </Modal>
@@ -37,6 +37,7 @@ Modal.newInstance = properties => {
 
     const modal = new Vue({
         el: div,
+        mixins: [ Locale ],
         components: { Modal, iButton, Icon },
         data: Object.assign(_props, {
             visible: false,
@@ -45,8 +46,8 @@ Modal.newInstance = properties => {
             body: '',
             iconType: '',
             iconName: '',
-            okText: t('i.modal.okText'),
+            okText: undefined,
-            cancelText: t('i.modal.cancelText'),
+            cancelText: undefined,
             showCancel: false,
             loading: false,
             buttonLoading: false,
@@ -64,6 +65,20 @@ Modal.newInstance = properties => {
                     'ivu-icon',
                     `ivu-icon-${this.iconName}`
                 ];
+            },
+            localeOkText () {
+                if (this.okText) {
+                    return this.okText;
+                } else {
+                    return this.t('i.modal.okText');
+                }
+            },
+            localeCancelText () {
+                if (this.cancelText) {
+                    return this.cancelText;
+                } else {
+                    return this.t('i.modal.cancelText');
+                }
             }
         },
         methods: {

src/components/modal/modal.vue

@@ -16,8 +16,8 @@
                         <div :class="[prefixCls + '-body']"><slot></slot></div>
                         <div :class="[prefixCls + '-footer']" v-if="!footerHide">
                             <slot name="footer">
-                                <i-button type="text" size="large" @click.native="cancel">{{ cancelText }}</i-button>
+                                <i-button type="text" size="large" @click.native="cancel">{{ localeCancelText }}</i-button>
-                                <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</i-button>
+                                <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
                             </slot>
                         </div>
                     </div>
@@ -30,11 +30,13 @@
     import Icon from '../icon';
     import iButton from '../button/button.vue';
     import { getScrollBarSize } from '../../utils/assist';
-    import { t } from '../../locale';
+    import Locale from '../../mixins/locale';
 
     const prefixCls = 'ivu-modal';
 
     export default {
+        name: 'Modal',
+        mixins: [ Locale ],
         components: { Icon, iButton },
         props: {
             value: {
@@ -57,16 +59,10 @@
                 default: 520
             },
             okText: {
-                type: String,
+                type: String
-                default () {
-                    return t('i.modal.okText');
-                }
             },
             cancelText: {
-                type: String,
+                type: String
-                default () {
-                    return t('i.modal.cancelText');
-                }
             },
             loading: {
                 type: Boolean,
@@ -125,6 +121,20 @@
                 Object.assign(style, styleWidth, customStyle);
 
                 return style;
+            },
+            localeOkText () {
+                if (this.okText === undefined) {
+                    return this.t('i.modal.okText');
+                } else {
+                    return this.okText;
+                }
+            },
+            localeCancelText () {
+                if (this.cancelText === undefined) {
+                    return this.t('i.modal.cancelText');
+                } else {
+                    return this.cancelText;
+                }
             }
         },
         methods: {

src/components/poptip/poptip.vue

@@ -22,8 +22,8 @@
                             <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
                         </div>
                         <div :class="[prefixCls + '-footer']">
-                            <i-button type="text" size="small" @click.native="cancel">{{ cancelText }}</i-button>
+                            <i-button type="text" size="small" @click.native="cancel">{{ localeCancelText }}</i-button>
-                            <i-button type="primary" size="small" @click.native="ok">{{ okText }}</i-button>
+                            <i-button type="primary" size="small" @click.native="ok">{{ localeOkText }}</i-button>
                         </div>
                     </div>
                     <div :class="[prefixCls + '-inner']" v-if="!confirm">
@@ -42,13 +42,13 @@
     import iButton from '../button/button.vue';
     import clickoutside from '../../directives/clickoutside';
     import { oneOf } from '../../utils/assist';
-    import { t } from '../../locale';
+    import Locale from '../../mixins/locale';
 
     const prefixCls = 'ivu-poptip';
 
     export default {
         name: 'Poptip',
-        mixins: [Popper],
+        mixins: [ Popper, Locale ],
         directives: { clickoutside },
         components: { iButton },
         props: {
@@ -79,16 +79,10 @@
                 default: false
             },
             okText: {
-                type: String,
+                type: String
-                default () {
-                    return t('i.poptip.okText');
-                }
             },
             cancelText: {
-                type: String,
+                type: String
-                default () {
-                    return t('i.poptip.cancelText');
-                }
             }
         },
         data () {
@@ -114,6 +108,20 @@
                     style.width = `${this.width}px`;
                 }
                 return style;
+            },
+            localeOkText () {
+                if (this.okText === undefined) {
+                    return this.t('i.poptip.okText');
+                } else {
+                    return this.okText;
+                }
+            },
+            localeCancelText () {
+                if (this.cancelText === undefined) {
+                    return this.t('i.poptip.cancelText');
+                } else {
+                    return this.cancelText;
+                }
             }
         },
         methods: {

src/components/select/select.vue

@@ -8,14 +8,14 @@
                 <span class="ivu-tag-text">{{ item.label }}</span>
                 <Icon type="ios-close-empty" @click.native.stop="removeTag(index)"></Icon>
             </div>
-            <span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ placeholder }}</span>
+            <span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ localePlaceholder }}</span>
             <span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
             <input
                 type="text"
                 v-if="filterable"
                 v-model="query"
                 :class="[prefixCls + '-input']"
-                :placeholder="showPlaceholder ? placeholder : ''"
+                :placeholder="showPlaceholder ? localePlaceholder : ''"
                 :style="inputStyle"
                 @blur="handleBlur"
                 @keydown="resetInputState"
@@ -26,7 +26,7 @@
         </div>
         <transition name="slide-up">
             <Drop v-show="visible" ref="dropdown">
-                <ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ notFoundText }}</li></ul>
+                <ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
                 <ul v-show="!notFound" :class="[prefixCls + '-dropdown-list']" ref="options"><slot></slot></ul>
             </Drop>
         </transition>
@@ -37,14 +37,14 @@
     import Drop from './dropdown.vue';
     import clickoutside from '../../directives/clickoutside';
     import { oneOf, findComponentDownward } from '../../utils/assist';
-    import { t } from '../../locale';
     import Emitter from '../../mixins/emitter';
+    import Locale from '../../mixins/locale';
 
     const prefixCls = 'ivu-select';
 
     export default {
         name: 'iSelect',
-        mixins: [ Emitter ],
+        mixins: [ Emitter, Locale ],
         components: { Icon, Drop },
         directives: { clickoutside },
         props: {
@@ -65,10 +65,7 @@
                 default: false
             },
             placeholder: {
-                type: String,
+                type: String
-                default () {
-                    return t('i.select.placeholder');
-                }
             },
             filterable: {
                 type: Boolean,
@@ -87,10 +84,7 @@
                 default: false
             },
             notFoundText: {
-                type: String,
+                type: String
-                default () {
-                    return t('i.select.noMatch');
-                }
             }
         },
         data () {
@@ -153,6 +147,20 @@
                 }
 
                 return style;
+            },
+            localePlaceholder () {
+                if (this.placeholder === undefined) {
+                    return this.t('i.select.placeholder');
+                } else {
+                    return this.placeholder;
+                }
+            },
+            localeNotFoundText () {
+                if (this.notFoundText === undefined) {
+                    return this.t('i.select.noMatch');
+                } else {
+                    return this.notFoundText;
+                }
             }
         },
         methods: {

src/components/table/table.vue

@@ -12,7 +12,7 @@
                     :data="rebuildData"></table-head>
             </div>
             <div :class="[prefixCls + '-body']" :style="bodyStyle" ref="body" @scroll="handleBodyScroll"
-                v-show="!((!!noDataText && (!data || data.length === 0)) || (!!noFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
+                v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
                 <table-body
                     ref="tbody"
                     :prefix-cls="prefixCls"
@@ -24,13 +24,13 @@
             </div>
             <div
                 :class="[prefixCls + '-tip']"
-                v-show="((!!noDataText && (!data || data.length === 0)) || (!!noFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
+                v-show="((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
                 <table cellspacing="0" cellpadding="0" border="0">
                     <tbody>
                         <tr>
                             <td :style="{ 'height': bodyStyle.height }">
-                                <span v-html="noDataText" v-if="!data || data.length === 0"></span>
+                                <span v-html="localeNoDataText" v-if="!data || data.length === 0"></span>
-                                <span v-html="noFilteredDataText" v-else></span>
+                                <span v-html="localeNoFilteredDataText" v-else></span>
                             </td>
                         </tr>
                     </tbody>
@@ -88,13 +88,15 @@
     import tableHead from './table-head.vue';
     import tableBody from './table-body.vue';
     import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
-    import { t } from '../../locale';
     import Csv from '../../utils/csv';
     import ExportCsv from './export-csv';
+    import Locale from '../../mixins/locale';
+
     const prefixCls = 'ivu-table';
 
     export default {
         name: 'Table',
+        mixins: [ Locale ],
         components: { tableHead, tableBody },
         props: {
             data: {
@@ -146,16 +148,10 @@
                 type: Object
             },
             noDataText: {
-                type: String,
+                type: String
-                default () {
-                    return t('i.table.noDataText');
-                }
             },
             noFilteredDataText: {
-                type: String,
+                type: String
-                default () {
-                    return t('i.table.noFilteredDataText');
-                }
             }
         },
         data () {
@@ -178,6 +174,20 @@
             };
         },
         computed: {
+            localeNoDataText () {
+                if (this.noDataText === undefined) {
+                    return this.t('i.table.noDataText');
+                } else {
+                    return this.noDataText;
+                }
+            },
+            localeNoFilteredDataText () {
+                if (this.noFilteredDataText === undefined) {
+                    return this.t('i.table.noFilteredDataText');
+                } else {
+                    return this.noFilteredDataText;
+                }
+            },
             wrapClasses () {
                 return [
                     `${prefixCls}-wrapper`,

src/components/transfer/transfer.vue

@@ -1,55 +1,13 @@
-<!-- <template>
-    <div :class="classes">
-        <List
-            ref="left"
-            :prefix-cls="prefixCls + '-list'"
-            :data="leftData"
-            :render-format="renderFormat"
-            :checked-keys="leftCheckedKeys"
-            @on-checked-keys-change="handleLeftCheckedKeysChange"
-            :valid-keys-count="leftValidKeysCount"
-            :style="listStyle"
-            :title="titles[0]"
-            :filterable="filterable"
-            :filter-placeholder="filterPlaceholder"
-            :filter-method="filterMethod"
-            :not-found-text="notFoundText">
-            <slot></slot>
-        </List>
-        <Operation
-            :prefix-cls="prefixCls"
-            :operations="operations"
-            :left-active="leftValidKeysCount > 0"
-            :right-active="rightValidKeysCount > 0">
-        </Operation>
-        <List
-            ref="right"
-            :prefix-cls="prefixCls + '-list'"
-            :data="rightData"
-            :render-format="renderFormat"
-            :checked-keys="rightCheckedKeys"
-            @on-checked-keys-change="handleRightCheckedKeysChange"
-            :valid-keys-count="rightValidKeysCount"
-            :style="listStyle"
-            :title="titles[1]"
-            :filterable="filterable"
-            :filter-placeholder="filterPlaceholder"
-            :filter-method="filterMethod"
-            :not-found-text="notFoundText">
-            <slot></slot>
-        </List>
-    </div>
-</template> -->
 <script>
     import List from './list.vue';
     import Operation from './operation.vue';
-    import { t } from '../../locale';
+    import Locale from '../../mixins/locale';
     import Emitter from '../../mixins/emitter';
 
     const prefixCls = 'ivu-transfer';
 
     export default {
-        mixins: [ Emitter ],
+        mixins: [ Emitter, Locale ],
         render (createElement) {
 
             function cloneVNode (vnode) {
@@ -82,11 +40,11 @@
                         checkedKeys: this.leftCheckedKeys,
                         validKeysCount: this.leftValidKeysCount,
                         style: this.listStyle,
-                        title: this.titles[0],
+                        title: this.localeTitles[0],
                         filterable: this.filterable,
-                        filterPlaceholder: this.filterPlaceholder,
+                        filterPlaceholder: this.localeFilterPlaceholder,
                         filterMethod: this.filterMethod,
-                        notFoundText: this.notFoundText
+                        notFoundText: this.localeNotFoundText
                     },
                     on: {
                         'on-checked-keys-change': this.handleLeftCheckedKeysChange
@@ -111,11 +69,11 @@
                         checkedKeys: this.rightCheckedKeys,
                         validKeysCount: this.rightValidKeysCount,
                         style: this.listStyle,
-                        title: this.titles[1],
+                        title: this.localeTitles[1],
                         filterable: this.filterable,
-                        filterPlaceholder: this.filterPlaceholder,
+                        filterPlaceholder: this.localeFilterPlaceholder,
                         filterMethod: this.filterMethod,
-                        notFoundText: this.notFoundText
+                        notFoundText: this.localeNotFoundText
                     },
                     on: {
                         'on-checked-keys-change': this.handleRightCheckedKeysChange
@@ -157,10 +115,7 @@
                 }
             },
             titles: {
-                type: Array,
+                type: Array
-                default () {
-                    return [t('i.transfer.titles.source'), t('i.transfer.titles.target')];
-                }
             },
             operations: {
                 type: Array,
@@ -173,10 +128,7 @@
                 default: false
             },
             filterPlaceholder: {
-                type: String,
+                type: String
-                default () {
-                    return t('i.transfer.filterPlaceholder');
-                }
             },
             filterMethod: {
                 type: Function,
@@ -186,10 +138,7 @@
                 }
             },
             notFoundText: {
-                type: String,
+                type: String
-                default () {
-                    return t('i.transfer.notFoundText');
-                }
             }
         },
         data () {
@@ -212,6 +161,27 @@
             },
             rightValidKeysCount () {
                 return this.getValidKeys('right').length;
+            },
+            localeFilterPlaceholder () {
+                if (this.filterPlaceholder === undefined) {
+                    return this.t('i.transfer.filterPlaceholder');
+                } else {
+                    return this.filterPlaceholder;
+                }
+            },
+            localeNotFoundText () {
+                if (this.notFoundText === undefined) {
+                    return this.t('i.transfer.notFoundText');
+                } else {
+                    return this.notFoundText;
+                }
+            },
+            localeTitles () {
+                if (this.titles === undefined) {
+                    return [this.t('i.transfer.titles.source'), this.t('i.transfer.titles.target')];
+                } else {
+                    return this.titles;
+                }
             }
         },
         methods: {

src/components/tree/tree.vue

@@ -8,20 +8,20 @@
             :multiple="multiple"
             :show-checkbox="showCheckbox">
         </Tree-node>
-        <div :class="[prefixCls + '-empty']" v-if="!data.length">{{ emptyText }}</div>
+        <div :class="[prefixCls + '-empty']" v-if="!data.length">{{ localeEmptyText }}</div>
     </div>
 </template>
 <script>
     import TreeNode from './node.vue';
     import { findComponentsDownward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
-    import { t } from '../../locale';
+    import Locale from '../../mixins/locale';
 
     const prefixCls = 'ivu-tree';
 
     export default {
         name: 'Tree',
-        mixins: [ Emitter ],
+        mixins: [ Emitter, Locale ],
         components: { TreeNode },
         props: {
             data: {
@@ -39,10 +39,7 @@
                 default: false
             },
             emptyText: {
-                type: String,
+                type: String
-                default () {
-                    return t('i.tree.emptyText');
-                }
             }
         },
         data () {
@@ -50,6 +47,15 @@
                 prefixCls: prefixCls
             };
         },
+        computed: {
+            localeEmptyText () {
+                if (this.emptyText === undefined) {
+                    return this.t('i.tree.emptyText');
+                } else {
+                    return this.emptyText;
+                }
+            }
+        },
         methods: {
             getSelectedNodes () {
                 const nodes = findComponentsDownward(this, 'TreeNode');