support Transfer

2017-03-07 15:06:38 +08:00 · 2017-03-07 15:06:38 +08:00 · 5b19b5f55f
commit 5b19b5f55f
parent 191068ac0c
8 changed files with 198 additions and 55 deletions
--- a/examples/app.vue
+++ b/examples/app.vue
@ -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>
--- a/examples/main.js
+++ b/examples/main.js
@ -148,6 +148,10 @@ const router = new VueRouter({
        {
            path: '/page',
            component: require('./routers/page.vue')
+        },
+        {
+            path: '/transfer',
+            component: require('./routers/transfer.vue')
        }
    ]
 });
--- a/examples/routers/transfer.vue
+++ b/examples/routers/transfer.vue
@ -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: {
@ -30,18 +89,62 @@
            },
            getTargetKeys () {
                return this.getMockData()
-                        .filter(() => Math.random() * 2 > 1)
-                        .map(item => item.key);
+                    .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>-->
--- a/src/components/transfer/list.vue
+++ b/src/components/transfer/list.vue
@ -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>
--- a/src/components/transfer/operation.vue
+++ b/src/components/transfer/operation.vue
@ -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,
--- a/src/components/transfer/search.vue
+++ b/src/components/transfer/search.vue
@ -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>
--- a/src/components/transfer/transfer.vue
+++ b/src/components/transfer/transfer.vue
@ -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: {
--- a/src/index.js
+++ b/src/index.js
@ -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
 };