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 | 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 | 7 | </template> |
| 163 | 8 | <script> |
| 164 | 9 | export default { |
| 165 | 10 | data () { |
| 166 | 11 | return { |
| 167 | - data1: [] || this.getMockData(), | |
| 12 | + data1: this.getMockData(), | |
| 168 | 13 | targetKeys1: this.getTargetKeys() |
| 169 | 14 | } |
| 170 | 15 | }, |
| 171 | - created(){ | |
| 172 | - console.log('--created--'); | |
| 173 | - this.fetch(); | |
| 174 | - }, | |
| 175 | 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 | 17 | getMockData () { |
| 187 | 18 | let mockData = []; |
| 188 | 19 | for (let i = 1; i <= 20; i++) { |
| ... | ... | @@ -195,18 +26,6 @@ |
| 195 | 26 | } |
| 196 | 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 | 29 | getTargetKeys () { |
| 211 | 30 | return this.getMockData() |
| 212 | 31 | .filter(() => Math.random() * 2 > 1) |
| ... | ... | @@ -223,4 +42,4 @@ |
| 223 | 42 | } |
| 224 | 43 | } |
| 225 | 44 | } |
| 226 | -</script> | |
| 227 | 45 | \ No newline at end of file |
| 46 | +</script> | ... | ... |
src/components/transfer/transfer.vue
| ... | ... | @@ -9,11 +9,11 @@ |
| 9 | 9 | export default { |
| 10 | 10 | name: 'Transfer', |
| 11 | 11 | mixins: [ Emitter, Locale ], |
| 12 | - render (createElement) { | |
| 12 | + render (h) { | |
| 13 | 13 | |
| 14 | 14 | function cloneVNode (vnode) { |
| 15 | 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 | 17 | cloned.text = vnode.text; |
| 18 | 18 | cloned.isComment = vnode.isComment; |
| 19 | 19 | cloned.componentOptions = vnode.componentOptions; |
| ... | ... | @@ -29,10 +29,10 @@ |
| 29 | 29 | const vNodes = this.$slots.default === undefined ? [] : this.$slots.default; |
| 30 | 30 | const clonedVNodes = this.$slots.default === undefined ? [] : vNodes.map(vnode => cloneVNode(vnode)); |
| 31 | 31 | |
| 32 | - return createElement('div', { | |
| 32 | + return h('div', { | |
| 33 | 33 | 'class': this.classes |
| 34 | 34 | }, [ |
| 35 | - createElement('List', { | |
| 35 | + h(List, { | |
| 36 | 36 | ref: 'left', |
| 37 | 37 | props: { |
| 38 | 38 | prefixCls: this.prefixCls + '-list', |
| ... | ... | @@ -52,7 +52,7 @@ |
| 52 | 52 | } |
| 53 | 53 | }, vNodes), |
| 54 | 54 | |
| 55 | - createElement('Operation', { | |
| 55 | + h(Operation, { | |
| 56 | 56 | props: { |
| 57 | 57 | prefixCls: this.prefixCls, |
| 58 | 58 | operations: this.operations, |
| ... | ... | @@ -61,7 +61,7 @@ |
| 61 | 61 | } |
| 62 | 62 | }), |
| 63 | 63 | |
| 64 | - createElement('List', { | |
| 64 | + h(List, { | |
| 65 | 65 | ref: 'right', |
| 66 | 66 | props: { |
| 67 | 67 | prefixCls: this.prefixCls + '-list', |
| ... | ... | @@ -82,8 +82,6 @@ |
| 82 | 82 | }, clonedVNodes) |
| 83 | 83 | ]); |
| 84 | 84 | }, |
| 85 | - | |
| 86 | - components: { List, Operation }, | |
| 87 | 85 | props: { |
| 88 | 86 | data: { |
| 89 | 87 | type: Array, | ... | ... |