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

support Transfer

Browse source 
support Transfer
This commit is contained in:
梁灏 2017-03-07 15:06:38 +08:00
parent 191068ac0c
commit 5b19b5f55f
8 changed files with 198 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/app.vue
View file

@ -46,6 +46,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
<li><router-link to="/select">Select</router-link></li>
<li><router-link to="/backtop">Backtop</router-link></li>
<li><router-link to="/page">Page</router-link></li>
<li><router-link to="/transfer">Transfer</router-link></li>
</ul>
</nav>
<router-view></router-view>

4
examples/main.js
View file

@ -148,6 +148,10 @@ const router = new VueRouter({
{
path: '/page',
component: require('./routers/page.vue')
},
{
path: '/transfer',
component: require('./routers/transfer.vue')
}
]
});

129
examples/routers/transfer.vue
View file

@ -1,18 +1,77 @@
<!--<template>-->
<!--<div>-->
<!--<Transfer-->
<!--:data="data1"-->
<!--filterable-->
<!--:target-keys="targetKeys1"-->
<!--:render-format="render1"-->
<!--@on-change="handleChange1"></Transfer>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--data1: this.getMockData(),-->
<!--targetKeys1: this.getTargetKeys()-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--getMockData () {-->
<!--let mockData = [];-->
<!--for (let i = 1; i <= 20; i++) {-->
<!--mockData.push({-->
<!--key: i.toString(),-->
<!--label: '内容' + i,-->
<!--description: '内容' + i + '的描述信息',-->
<!--disabled: Math.random() * 3 < 1-->
<!--});-->
<!--}-->
<!--return mockData;-->
<!--},-->
<!--getTargetKeys () {-->
<!--return this.getMockData()-->
<!--.filter(() => Math.random() * 2 > 1)-->
<!--.map(item => item.key);-->
<!--},-->
<!--render1 (item) {-->
<!--return item.label;-->
<!--},-->
<!--handleChange1 (newTargetKeys, direction, moveKeys) {-->
<!--console.log(newTargetKeys);-->
<!--console.log(direction);-->
<!--console.log(moveKeys);-->
<!--this.targetKeys1 = newTargetKeys;-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<Transfer
:data="data2"
:target-keys="targetKeys2"
:data="data3"
:target-keys="targetKeys3"
:list-style="listStyle"
:render-format="render3"
:operations="['向左移动','向右移动']"
filterable
:render-format="rf"
:filter-method="filterMethod"
@on-change="handleChange2"></Transfer>
@on-change="handleChange3">
<div :style="{float: 'right', margin: '5px'}">
<Button type="ghost" size="small" @click.native="reloadMockData">刷新</Button>
</div>
</Transfer>
</template>
<script>
export default {
data () {
return {
data2: this.getMockData(),
targetKeys2: this.getTargetKeys()
data3: this.getMockData(),
targetKeys3: this.getTargetKeys(),
listStyle: {
width: '250px',
height: '300px'
}
}
},
methods: {
@ -33,15 +92,59 @@
.filter(() => Math.random() * 2 > 1)
.map(item => item.key);
},
handleChange2 (newTargetKeys) {
this.targetKeys2 = newTargetKeys;
handleChange3 (newTargetKeys) {
this.targetKeys3 = newTargetKeys;
},
filterMethod (data, query) {
return data.label.indexOf(query) > -1;
render3 (item) {
return item.label + ' - ' + item.description;
},
rf (data) {
return '<i class="ivu-icon ivu-icon-alert"></i>' + data.label;
reloadMockData () {
this.data3 = this.getMockData();
this.targetKeys3 = this.getTargetKeys();
}
}
}
</script>
<!--<template>-->
<!--<Transfer-->
<!--:data="data4"-->
<!--:target-keys="targetKeys4"-->
<!--:render-format="render4"-->
<!--@on-change="handleChange4"></Transfer>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--data4: this.getMockData(),-->
<!--targetKeys4: this.getTargetKeys()-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--getMockData () {-->
<!--let mockData = [];-->
<!--for (let i = 1; i <= 20; i++) {-->
<!--mockData.push({-->
<!--key: i.toString(),-->
<!--label: '内容' + i,-->
<!--description: '内容' + i + '的描述信息',-->
<!--disabled: Math.random() * 3 < 1-->
<!--});-->
<!--}-->
<!--return mockData;-->
<!--},-->
<!--getTargetKeys () {-->
<!--return this.getMockData()-->
<!--.filter(() => Math.random() * 2 > 1)-->
<!--.map(item => item.key);-->
<!--},-->
<!--handleChange4 (newTargetKeys) {-->
<!--this.targetKeys4 = newTargetKeys;-->
<!--},-->
<!--render4 (item) {-->
<!--return item.label + ' - ' + item.description;-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->

43
src/components/transfer/list.vue
View file

@ -1,7 +1,7 @@
<template>
<div :class="classes" :style="style">
<div :class="prefixCls + '-header'">
<Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
<Checkbox :value="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
<span>{{ title }}</span>
<span :class="prefixCls + '-header-count'">{{ count }}</span>
</div>
@ -9,21 +9,23 @@
<div :class="prefixCls + '-body-search-wrapper'" v-if="filterable">
<Search
:prefix-cls="prefixCls + '-search'"
:query.sync="query"
:query="query"
@on-query-clear="handleQueryClear"
@on-query-change="handleQueryChange"
:placeholder="filterPlaceholder"></Search>
</div>
<ul :class="prefixCls + '-content'">
<li
v-for="item in showItems | filterBy filterData"
v-for="item in filterData"
:class="itemClasses(item)"
@click.prevent="select(item)">
<Checkbox :checked="isCheck(item)" :disabled="item.disabled"></Checkbox>
<span>{{{ showLabel(item) }}}</span>
<Checkbox :value="isCheck(item)" :disabled="item.disabled"></Checkbox>
<span v-html="showLabel(item)"></span>
</li>
<li :class="prefixCls + '-content-not-found'">{{ notFoundText }}</li>
</ul>
</div>
<div :class="prefixCls + '-footer'" v-if="showFooter" v-el:footer><slot></slot></div>
<div :class="prefixCls + '-footer'" v-if="showFooter"><slot></slot></div>
</div>
</template>
<script>
@ -31,6 +33,7 @@
import Checkbox from '../checkbox/checkbox.vue';
export default {
name: 'TransferList',
components: { Search, Checkbox },
props: {
prefixCls: String,
@ -52,6 +55,11 @@
showFooter: true
};
},
watch: {
data () {
this.updateFilteredData();
}
},
computed: {
classes () {
return [
@ -79,6 +87,9 @@
},
checkedAllDisabled () {
return this.data.filter(data => !data.disabled).length <= 0;
},
filterData () {
return this.showItems.filter(item => this.filterMethod(item, this.query));
}
},
methods: {
@ -105,25 +116,23 @@
this.showItems = this.data;
},
toggleSelectAll (status) {
this.checkedKeys = status ?
const keys = status ?
this.data.filter(data => !data.disabled || this.checkedKeys.indexOf(data.key) > -1).map(data => data.key) :
this.data.filter(data => data.disabled && this.checkedKeys.indexOf(data.key) > -1).map(data => data.key);
this.$emit('on-checked-keys-change', keys);
},
filterData (value) {
return this.filterMethod(value, this.query);
handleQueryClear () {
this.query = '';
},
handleQueryChange (val) {
this.query = val;
}
},
created () {
this.updateFilteredData();
},
compiled () {
this.showFooter = this.$els.footer.innerHTML !== '';
},
watch: {
data () {
this.updateFilteredData();
}
mounted () {
this.showFooter = this.$slots.default !== undefined;
}
};
</script>

5
src/components/transfer/operation.vue
View file

@ -1,9 +1,9 @@
<template>
<div :class="prefixCls + '-operation'">
<i-button type="primary" size="small" :disabled="!rightActive" @click="moveToLeft">
<i-button type="primary" size="small" :disabled="!rightActive" @click.native="moveToLeft">
<Icon type="ios-arrow-left"></Icon> {{ operations[0] }}
</i-button>
<i-button type="primary" size="small" :disabled="!leftActive" @click="moveToRight">
<i-button type="primary" size="small" :disabled="!leftActive" @click.native="moveToRight">
{{ operations[1] }} <Icon type="ios-arrow-right"></Icon>
</i-button>
</div>
@ -13,6 +13,7 @@
import Icon from '../icon/icon.vue';
export default {
name: 'Operation',
components: { iButton, Icon },
props: {
prefixCls: String,

38
src/components/transfer/search.vue
View file

@ -1,7 +1,7 @@
<template>
<div :class="prefixCls">
<i-input
:value.sync="query"
v-model="currentQuery"
size="small"
:icon="icon"
:placeholder="placeholder"
@ -12,12 +12,26 @@
import iInput from '../input/input.vue';
export default {
name: 'Search',
components: { iInput },
props: {
prefixCls: String,
placeholder: String,
query: String
},
data () {
return {
currentQuery: this.query
};
},
watch: {
query (val) {
this.currentQuery = val;
},
currentQuery (val) {
this.$emit('on-query-change', val);
}
},
computed: {
icon () {
return this.query === '' ? 'ios-search' : 'ios-close';
@ -25,17 +39,19 @@
},
methods: {
handleClick () {
if (this.query === '') return;
this.query = '';
}
},
events: {
'on-form-blur' () {
return false;
},
'on-form-change' () {
return false;
if (this.currentQuery === '') return;
this.currentQuery = '';
this.$emit('on-query-clear');
}
}
// todo 事件
// events: {
// 'on-form-blur' () {
// return false;
// },
// 'on-form-change' () {
// return false;
// }
// }
};
</script>

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

@ -1,12 +1,13 @@
<template>
<div :class="classes">
<List
v-ref:left
ref="left"
:prefix-cls="prefixCls + '-list'"
:data="leftData"
:render-format="renderFormat"
:checked-keys.sync="leftCheckedKeys"
:valid-keys-count.sync="leftValidKeysCount"
:checked-keys="leftCheckedKeys"
@on-checked-keys-change="handleLeftCheckedKeysChange"
:valid-keys-count="leftValidKeysCount"
:style="listStyle"
:title="titles[0]"
:filterable="filterable"
@ -19,19 +20,20 @@
:operations="operations"
:left-active="leftValidKeysCount > 0"
:right-active="rightValidKeysCount > 0"></Operation><List
v-ref:right
ref="right"
:prefix-cls="prefixCls + '-list'"
:data="rightData"
:render-format="renderFormat"
:checked-keys.sync="rightCheckedKeys"
:valid-keys-count.sync="rightValidKeysCount"
: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>
<slot name="right"></slot>
</List>
</div>
</template>
@ -177,7 +179,14 @@
this.$refs[opposite].toggleSelectAll(false);
this.$emit('on-change', newTargetKeys, direction, moveKeys);
this.$dispatch('on-form-change', newTargetKeys, direction, moveKeys);
// todo 事件
// this.$dispatch('on-form-change', newTargetKeys, direction, moveKeys);
},
handleLeftCheckedKeysChange (keys) {
this.leftCheckedKeys = keys;
},
handleRightCheckedKeysChange (keys) {
this.rightCheckedKeys = keys;
}
},
watch: {

4
src/index.js
View file

@ -39,7 +39,7 @@ import Tag from './components/tag';
import Timeline from './components/timeline';
// import TimePicker from './components/time-picker';
import Tooltip from './components/tooltip';
// import Transfer from './components/transfer';
import Transfer from './components/transfer';
import Tree from './components/tree';
import Upload from './components/upload';
import { Row, Col } from './components/grid';
@ -107,7 +107,7 @@ const iview = {
TimelineItem: Timeline.Item,
// TimePicker,
Tooltip,
// Transfer,
Transfer,
Tree,
Upload
};