drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
梁灏 2017-03-30 16:05:20 +08:00
parent ed91d9b0c7
commit e5337c810c
8 changed files with 185 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
examples/routers/modal.vue
View file

@ -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);
}
});
}
}
}

25
src/components/modal/confirm.js
View file

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

32
src/components/modal/modal.vue
View file

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

32
src/components/poptip/poptip.vue
View file

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

34
src/components/select/select.vue
View file

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

36
src/components/table/table.vue
View file

@ -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`,

94
src/components/transfer/transfer.vue
View file

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

20
src/components/tree/tree.vue
View file

@ -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');