From e5337c810c3a25c0b448d7a6dcbff97d2a1faeae Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Thu, 30 Mar 2017 16:05:20 +0800
Subject: [PATCH] fixed some components bug that can not translate when using vue-i18n
---
examples/routers/modal.vue | 65 +++++++++++++++++++++++++++++++++++------------------------------
src/components/modal/confirm.js | 25 ++++++++++++++++++++-----
src/components/modal/modal.vue | 32 +++++++++++++++++++++-----------
src/components/poptip/poptip.vue | 32 ++++++++++++++++++++------------
src/components/select/select.vue | 34 +++++++++++++++++++++-------------
src/components/table/table.vue | 36 +++++++++++++++++++++++-------------
src/components/transfer/transfer.vue | 94 ++++++++++++++++++++++++++++++++--------------------------------------------------------------
src/components/tree/tree.vue | 20 +++++++++++++-------
8 files changed, 185 insertions(+), 153 deletions(-)
diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index c583fad..335473d 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,40 +1,45 @@
<template>
<div>
- <i-button @click.native="modal2 = true">自定义页头和页脚</i-button>
- <Modal v-model="modal2" width="360">
- <p slot="header" style="color:#f60;text-align:center">
- <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>
+ <Button @click="confirm">标准</Button>
+ <Button @click="custom">自定义按钮文字</Button>
+ <Button @click="async">异步关闭</Button>
</div>
</template>
<script>
export default {
- data () {
- return {
- modal2: false,
- modal_loading: false,
- modal3: false,
- modal4: false,
- modal5: false
- }
- },
methods: {
- del () {
- this.modal_loading = true;
- setTimeout(() => {
- this.modal_loading = false;
- this.modal2 = false;
- this.$Message.success('删除成功');
- }, 2000);
+ confirm () {
+ this.$Modal.confirm({
+ title: '确认对话框标题',
+ content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
+ onOk: () => {
+ this.$Message.info('点击了确定');
+ },
+ 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);
+ }
+ });
}
}
}
diff --git a/src/components/modal/confirm.js b/src/components/modal/confirm.js
index 52cfaff..04ccb5c 100644
--- a/src/components/modal/confirm.js
+++ b/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="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</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">{{ 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'),
- cancelText: t('i.modal.cancelText'),
+ okText: undefined,
+ 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: {
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index f33067f..05ff0da 100644
--- a/src/components/modal/modal.vue
+++ b/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="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</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">{{ 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,
- default () {
- return t('i.modal.okText');
- }
+ type: String
},
cancelText: {
- type: String,
- default () {
- return t('i.modal.cancelText');
- }
+ type: String
},
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: {
diff --git a/src/components/poptip/poptip.vue b/src/components/poptip/poptip.vue
index 509003e..077dc4e 100644
--- a/src/components/poptip/poptip.vue
+++ b/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="primary" size="small" @click.native="ok">{{ okText }}</i-button>
+ <i-button type="text" size="small" @click.native="cancel">{{ localeCancelText }}</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,
- default () {
- return t('i.poptip.okText');
- }
+ type: String
},
cancelText: {
- type: String,
- default () {
- return t('i.poptip.cancelText');
- }
+ type: String
}
},
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: {
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index f7b81ca..f84ab94 100644
--- a/src/components/select/select.vue
+++ b/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,
- default () {
- return t('i.select.placeholder');
- }
+ type: String
},
filterable: {
type: Boolean,
@@ -87,10 +84,7 @@
default: false
},
notFoundText: {
- type: String,
- default () {
- return t('i.select.noMatch');
- }
+ type: String
}
},
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: {
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 4ff579a..9358390 100644
--- a/src/components/table/table.vue
+++ b/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="noFilteredDataText" v-else></span>
+ <span v-html="localeNoDataText" v-if="!data || data.length === 0"></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,
- default () {
- return t('i.table.noDataText');
- }
+ type: String
},
noFilteredDataText: {
- type: String,
- default () {
- return t('i.table.noFilteredDataText');
- }
+ type: String
}
},
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`,
diff --git a/src/components/transfer/transfer.vue b/src/components/transfer/transfer.vue
index 2235ebf..4f32b76 100644
--- a/src/components/transfer/transfer.vue
+++ b/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,
- default () {
- return [t('i.transfer.titles.source'), t('i.transfer.titles.target')];
- }
+ type: Array
},
operations: {
type: Array,
@@ -173,10 +128,7 @@
default: false
},
filterPlaceholder: {
- type: String,
- default () {
- return t('i.transfer.filterPlaceholder');
- }
+ type: String
},
filterMethod: {
type: Function,
@@ -186,10 +138,7 @@
}
},
notFoundText: {
- type: String,
- default () {
- return t('i.transfer.notFoundText');
- }
+ type: String
}
},
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: {
diff --git a/src/components/tree/tree.vue b/src/components/tree/tree.vue
index 20694c7..5274880 100644
--- a/src/components/tree/tree.vue
+++ b/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,
- default () {
- return t('i.tree.emptyText');
- }
+ type: String
}
},
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');
--
libgit2 0.21.4