Commit 7479854b3605fc4fd5ff17d02bb92d9cc59ffdf4
1 parent
228c87cd
update Transfer
Showing
2 changed files
with
13 additions
and
196 deletions
Show diff stats
examples/routers/transfer.vue
| 1 | -<!--<template>--> | ||
| 2 | - <!--<div>--> | ||
| 3 | - <!--<Transfer--> | ||
| 4 | - <!--:data="data1"--> | ||
| 5 | - <!--filterable--> | ||
| 6 | - <!--:target-keys="targetKeys1"--> | ||
| 7 | - <!--:render-format="render1"--> | ||
| 8 | - <!--@on-change="handleChange1"></Transfer>--> | ||
| 9 | - <!--</div>--> | ||
| 10 | -<!--</template>--> | ||
| 11 | -<!--<script>--> | ||
| 12 | - <!--export default {--> | ||
| 13 | - <!--data () {--> | ||
| 14 | - <!--return {--> | ||
| 15 | - <!--data1: this.getMockData(),--> | ||
| 16 | - <!--targetKeys1: this.getTargetKeys()--> | ||
| 17 | - <!--}--> | ||
| 18 | - <!--},--> | ||
| 19 | - <!--methods: {--> | ||
| 20 | - <!--getMockData () {--> | ||
| 21 | - <!--let mockData = [];--> | ||
| 22 | - <!--for (let i = 1; i <= 20; i++) {--> | ||
| 23 | - <!--mockData.push({--> | ||
| 24 | - <!--key: i.toString(),--> | ||
| 25 | - <!--label: '内容' + i,--> | ||
| 26 | - <!--description: '内容' + i + '的描述信息',--> | ||
| 27 | - <!--disabled: Math.random() * 3 < 1--> | ||
| 28 | - <!--});--> | ||
| 29 | - <!--}--> | ||
| 30 | - <!--return mockData;--> | ||
| 31 | - <!--},--> | ||
| 32 | - <!--getTargetKeys () {--> | ||
| 33 | - <!--return this.getMockData()--> | ||
| 34 | - <!--.filter(() => Math.random() * 2 > 1)--> | ||
| 35 | - <!--.map(item => item.key);--> | ||
| 36 | - <!--},--> | ||
| 37 | - <!--render1 (item) {--> | ||
| 38 | - <!--return item.label;--> | ||
| 39 | - <!--},--> | ||
| 40 | - <!--handleChange1 (newTargetKeys, direction, moveKeys) {--> | ||
| 41 | - <!--console.log(newTargetKeys);--> | ||
| 42 | - <!--console.log(direction);--> | ||
| 43 | - <!--console.log(moveKeys);--> | ||
| 44 | - <!--this.targetKeys1 = newTargetKeys;--> | ||
| 45 | - <!--}--> | ||
| 46 | - <!--}--> | ||
| 47 | - <!--}--> | ||
| 48 | -<!--</script>--> | ||
| 49 | - | ||
| 50 | - | ||
| 51 | -<!--<template>--> | ||
| 52 | - <!--<Transfer--> | ||
| 53 | - <!--:data="data3"--> | ||
| 54 | - <!--:target-keys="targetKeys3"--> | ||
| 55 | - <!--:list-style="listStyle"--> | ||
| 56 | - <!--:render-format="render3"--> | ||
| 57 | - <!--:operations="['向左移动','向右移动']"--> | ||
| 58 | - <!--filterable--> | ||
| 59 | - <!--@on-change="handleChange3">--> | ||
| 60 | - <!--<div :style="{float: 'right', margin: '5px'}">--> | ||
| 61 | - <!--<Button type="ghost" size="small" @click.native="reloadMockData">刷新</Button>--> | ||
| 62 | - <!--</div>--> | ||
| 63 | - <!--</Transfer>--> | ||
| 64 | -<!--</template>--> | ||
| 65 | -<!--<script>--> | ||
| 66 | - <!--export default {--> | ||
| 67 | - <!--data () {--> | ||
| 68 | - <!--return {--> | ||
| 69 | - <!--data3: this.getMockData(),--> | ||
| 70 | - <!--targetKeys3: this.getTargetKeys(),--> | ||
| 71 | - <!--listStyle: {--> | ||
| 72 | - <!--width: '250px',--> | ||
| 73 | - <!--height: '300px'--> | ||
| 74 | - <!--}--> | ||
| 75 | - <!--}--> | ||
| 76 | - <!--},--> | ||
| 77 | - <!--methods: {--> | ||
| 78 | - <!--getMockData () {--> | ||
| 79 | - <!--let mockData = [];--> | ||
| 80 | - <!--for (let i = 1; i <= 20; i++) {--> | ||
| 81 | - <!--mockData.push({--> | ||
| 82 | - <!--key: i.toString(),--> | ||
| 83 | - <!--label: '内容' + i,--> | ||
| 84 | - <!--description: '内容' + i + '的描述信息',--> | ||
| 85 | - <!--disabled: Math.random() * 3 < 1--> | ||
| 86 | - <!--});--> | ||
| 87 | - <!--}--> | ||
| 88 | - <!--return mockData;--> | ||
| 89 | - <!--},--> | ||
| 90 | - <!--getTargetKeys () {--> | ||
| 91 | - <!--return this.getMockData()--> | ||
| 92 | - <!--.filter(() => Math.random() * 2 > 1)--> | ||
| 93 | - <!--.map(item => item.key);--> | ||
| 94 | - <!--},--> | ||
| 95 | - <!--handleChange3 (newTargetKeys) {--> | ||
| 96 | - <!--this.targetKeys3 = newTargetKeys;--> | ||
| 97 | - <!--},--> | ||
| 98 | - <!--render3 (item) {--> | ||
| 99 | - <!--return item.label + ' - ' + item.description;--> | ||
| 100 | - <!--},--> | ||
| 101 | - <!--reloadMockData () {--> | ||
| 102 | - <!--this.data3 = this.getMockData();--> | ||
| 103 | - <!--this.targetKeys3 = this.getTargetKeys();--> | ||
| 104 | - <!--}--> | ||
| 105 | - <!--}--> | ||
| 106 | - <!--}--> | ||
| 107 | -<!--</script>--> | ||
| 108 | - | ||
| 109 | -<!--<template>--> | ||
| 110 | - <!--<Transfer--> | ||
| 111 | - <!--:data="data4"--> | ||
| 112 | - <!--:target-keys="targetKeys4"--> | ||
| 113 | - <!--:render-format="render4"--> | ||
| 114 | - <!--@on-change="handleChange4"></Transfer>--> | ||
| 115 | -<!--</template>--> | ||
| 116 | -<!--<script>--> | ||
| 117 | - <!--export default {--> | ||
| 118 | - <!--data () {--> | ||
| 119 | - <!--return {--> | ||
| 120 | - <!--data4: this.getMockData(),--> | ||
| 121 | - <!--targetKeys4: this.getTargetKeys()--> | ||
| 122 | - <!--}--> | ||
| 123 | - <!--},--> | ||
| 124 | - <!--methods: {--> | ||
| 125 | - <!--getMockData () {--> | ||
| 126 | - <!--let mockData = [];--> | ||
| 127 | - <!--for (let i = 1; i <= 20; i++) {--> | ||
| 128 | - <!--mockData.push({--> | ||
| 129 | - <!--key: i.toString(),--> | ||
| 130 | - <!--label: '内容' + i,--> | ||
| 131 | - <!--description: '内容' + i + '的描述信息',--> | ||
| 132 | - <!--disabled: Math.random() * 3 < 1--> | ||
| 133 | - <!--});--> | ||
| 134 | - <!--}--> | ||
| 135 | - <!--return mockData;--> | ||
| 136 | - <!--},--> | ||
| 137 | - <!--getTargetKeys () {--> | ||
| 138 | - <!--return this.getMockData()--> | ||
| 139 | - <!--.filter(() => Math.random() * 2 > 1)--> | ||
| 140 | - <!--.map(item => item.key);--> | ||
| 141 | - <!--},--> | ||
| 142 | - <!--handleChange4 (newTargetKeys) {--> | ||
| 143 | - <!--this.targetKeys4 = newTargetKeys;--> | ||
| 144 | - <!--},--> | ||
| 145 | - <!--render4 (item) {--> | ||
| 146 | - <!--return item.label + ' - ' + item.description;--> | ||
| 147 | - <!--}--> | ||
| 148 | - <!--}--> | ||
| 149 | - <!--}--> | ||
| 150 | -<!--</script>--> | ||
| 151 | - | ||
| 152 | - | ||
| 153 | <template> | 1 | <template> |
| 154 | - <div> | ||
| 155 | - <Transfer | ||
| 156 | - :data="data1" | ||
| 157 | - filterable | ||
| 158 | - :target-keys="targetKeys1" | ||
| 159 | - :render-format="render1" | ||
| 160 | - @on-change="handleChange1"></Transfer> | ||
| 161 | - </div> | 2 | + <Transfer |
| 3 | + :data="data1" | ||
| 4 | + :target-keys="targetKeys1" | ||
| 5 | + :render-format="render1" | ||
| 6 | + @on-change="handleChange1"></Transfer> | ||
| 162 | </template> | 7 | </template> |
| 163 | <script> | 8 | <script> |
| 164 | export default { | 9 | export default { |
| 165 | data () { | 10 | data () { |
| 166 | return { | 11 | return { |
| 167 | - data1: [] || this.getMockData(), | 12 | + data1: this.getMockData(), |
| 168 | targetKeys1: this.getTargetKeys() | 13 | targetKeys1: this.getTargetKeys() |
| 169 | } | 14 | } |
| 170 | }, | 15 | }, |
| 171 | - created(){ | ||
| 172 | - console.log('--created--'); | ||
| 173 | - this.fetch(); | ||
| 174 | - }, | ||
| 175 | methods: { | 16 | methods: { |
| 176 | - fetch() { | ||
| 177 | - const _this = this; | ||
| 178 | - setTimeout(function() { | ||
| 179 | - console.log('--1'); | ||
| 180 | - // _this.data1 = null; | ||
| 181 | -// _this.data1 = _this.getMockData1(); | ||
| 182 | - console.log('-fetch-', _this.data1); | ||
| 183 | - | ||
| 184 | - }, 1500); | ||
| 185 | - }, | ||
| 186 | getMockData () { | 17 | getMockData () { |
| 187 | let mockData = []; | 18 | let mockData = []; |
| 188 | for (let i = 1; i <= 20; i++) { | 19 | for (let i = 1; i <= 20; i++) { |
| @@ -195,18 +26,6 @@ | @@ -195,18 +26,6 @@ | ||
| 195 | } | 26 | } |
| 196 | return mockData; | 27 | return mockData; |
| 197 | }, | 28 | }, |
| 198 | - getMockData1 () { | ||
| 199 | - let mockData = []; | ||
| 200 | - for (let i = 1; i <= 20; i++) { | ||
| 201 | - mockData.push({ | ||
| 202 | - key: i.toString(), | ||
| 203 | - label: '内容11111' + i, | ||
| 204 | - description: '内容11111 ' + i + ' 1111的描述信息', | ||
| 205 | - // disabled: Math.random() * 3 < 1 | ||
| 206 | - }); | ||
| 207 | - } | ||
| 208 | - return mockData; | ||
| 209 | - }, | ||
| 210 | getTargetKeys () { | 29 | getTargetKeys () { |
| 211 | return this.getMockData() | 30 | return this.getMockData() |
| 212 | .filter(() => Math.random() * 2 > 1) | 31 | .filter(() => Math.random() * 2 > 1) |
| @@ -223,4 +42,4 @@ | @@ -223,4 +42,4 @@ | ||
| 223 | } | 42 | } |
| 224 | } | 43 | } |
| 225 | } | 44 | } |
| 226 | -</script> | ||
| 227 | \ No newline at end of file | 45 | \ No newline at end of file |
| 46 | +</script> |
src/components/transfer/transfer.vue
| @@ -9,11 +9,11 @@ | @@ -9,11 +9,11 @@ | ||
| 9 | export default { | 9 | export default { |
| 10 | name: 'Transfer', | 10 | name: 'Transfer', |
| 11 | mixins: [ Emitter, Locale ], | 11 | mixins: [ Emitter, Locale ], |
| 12 | - render (createElement) { | 12 | + render (h) { |
| 13 | 13 | ||
| 14 | function cloneVNode (vnode) { | 14 | function cloneVNode (vnode) { |
| 15 | const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode)); | 15 | const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode)); |
| 16 | - const cloned = createElement(vnode.tag, vnode.data, clonedChildren); | 16 | + const cloned = h(vnode.tag, vnode.data, clonedChildren); |
| 17 | cloned.text = vnode.text; | 17 | cloned.text = vnode.text; |
| 18 | cloned.isComment = vnode.isComment; | 18 | cloned.isComment = vnode.isComment; |
| 19 | cloned.componentOptions = vnode.componentOptions; | 19 | cloned.componentOptions = vnode.componentOptions; |
| @@ -29,10 +29,10 @@ | @@ -29,10 +29,10 @@ | ||
| 29 | const vNodes = this.$slots.default === undefined ? [] : this.$slots.default; | 29 | const vNodes = this.$slots.default === undefined ? [] : this.$slots.default; |
| 30 | const clonedVNodes = this.$slots.default === undefined ? [] : vNodes.map(vnode => cloneVNode(vnode)); | 30 | const clonedVNodes = this.$slots.default === undefined ? [] : vNodes.map(vnode => cloneVNode(vnode)); |
| 31 | 31 | ||
| 32 | - return createElement('div', { | 32 | + return h('div', { |
| 33 | 'class': this.classes | 33 | 'class': this.classes |
| 34 | }, [ | 34 | }, [ |
| 35 | - createElement('List', { | 35 | + h(List, { |
| 36 | ref: 'left', | 36 | ref: 'left', |
| 37 | props: { | 37 | props: { |
| 38 | prefixCls: this.prefixCls + '-list', | 38 | prefixCls: this.prefixCls + '-list', |
| @@ -52,7 +52,7 @@ | @@ -52,7 +52,7 @@ | ||
| 52 | } | 52 | } |
| 53 | }, vNodes), | 53 | }, vNodes), |
| 54 | 54 | ||
| 55 | - createElement('Operation', { | 55 | + h(Operation, { |
| 56 | props: { | 56 | props: { |
| 57 | prefixCls: this.prefixCls, | 57 | prefixCls: this.prefixCls, |
| 58 | operations: this.operations, | 58 | operations: this.operations, |
| @@ -61,7 +61,7 @@ | @@ -61,7 +61,7 @@ | ||
| 61 | } | 61 | } |
| 62 | }), | 62 | }), |
| 63 | 63 | ||
| 64 | - createElement('List', { | 64 | + h(List, { |
| 65 | ref: 'right', | 65 | ref: 'right', |
| 66 | props: { | 66 | props: { |
| 67 | prefixCls: this.prefixCls + '-list', | 67 | prefixCls: this.prefixCls + '-list', |
| @@ -82,8 +82,6 @@ | @@ -82,8 +82,6 @@ | ||
| 82 | }, clonedVNodes) | 82 | }, clonedVNodes) |
| 83 | ]); | 83 | ]); |
| 84 | }, | 84 | }, |
| 85 | - | ||
| 86 | - components: { List, Operation }, | ||
| 87 | props: { | 85 | props: { |
| 88 | data: { | 86 | data: { |
| 89 | type: Array, | 87 | type: Array, |