Commit 7c2ed52c61fa7f1d75ba3bf7e4cefd1f87366b37
1 parent
67f4d8e7
update Checkbox
when use Checkbox single, can hide default slot
Showing
2 changed files
with
38 additions
and
3 deletions
Show diff stats
examples/routers/form.vue
| @@ -12,6 +12,13 @@ | @@ -12,6 +12,13 @@ | ||
| 12 | <Input v-model="formInline.user"></Input> | 12 | <Input v-model="formInline.user"></Input> |
| 13 | </Form-item> | 13 | </Form-item> |
| 14 | <Form-item> | 14 | <Form-item> |
| 15 | + <Transfer | ||
| 16 | + :data="formInline.data1" | ||
| 17 | + :target-keys="formInline.targetKeys1" | ||
| 18 | + :render-format="render1" | ||
| 19 | + @on-change="handleChange1"></Transfer> | ||
| 20 | + </Form-item> | ||
| 21 | + <Form-item> | ||
| 15 | <i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button> | 22 | <i-button type="primary" @click.native="handleSubmit('formInline')">登录</i-button> |
| 16 | </Form-item> | 23 | </Form-item> |
| 17 | </i-form> | 24 | </i-form> |
| @@ -22,6 +29,8 @@ | @@ -22,6 +29,8 @@ | ||
| 22 | data () { | 29 | data () { |
| 23 | return { | 30 | return { |
| 24 | formInline: { | 31 | formInline: { |
| 32 | + data1: this.getMockData(), | ||
| 33 | + targetKeys1: this.getTargetKeys(), | ||
| 25 | date: new Date(), | 34 | date: new Date(), |
| 26 | user: '', | 35 | user: '', |
| 27 | value2: [], | 36 | value2: [], |
| @@ -118,6 +127,32 @@ | @@ -118,6 +127,32 @@ | ||
| 118 | }, | 127 | }, |
| 119 | handleInput (val) { | 128 | handleInput (val) { |
| 120 | console.log(val) | 129 | console.log(val) |
| 130 | + }, | ||
| 131 | + getMockData () { | ||
| 132 | + let mockData = []; | ||
| 133 | + for (let i = 1; i <= 20; i++) { | ||
| 134 | + mockData.push({ | ||
| 135 | + key: i.toString(), | ||
| 136 | + label: '内容' + i, | ||
| 137 | + description: '内容' + i + '的描述信息', | ||
| 138 | + disabled: Math.random() * 3 < 1 | ||
| 139 | + }); | ||
| 140 | + } | ||
| 141 | + return mockData; | ||
| 142 | + }, | ||
| 143 | + getTargetKeys () { | ||
| 144 | + return this.getMockData() | ||
| 145 | + .filter(() => Math.random() * 2 > 1) | ||
| 146 | + .map(item => item.key); | ||
| 147 | + }, | ||
| 148 | + render1 (item) { | ||
| 149 | + return item.label; | ||
| 150 | + }, | ||
| 151 | + handleChange1 (newTargetKeys, direction, moveKeys) { | ||
| 152 | + console.log(newTargetKeys); | ||
| 153 | + console.log(direction); | ||
| 154 | + console.log(moveKeys); | ||
| 155 | + this.formInline.targetKeys1 = newTargetKeys; | ||
| 121 | } | 156 | } |
| 122 | } | 157 | } |
| 123 | } | 158 | } |
src/components/checkbox/checkbox.vue
| @@ -18,7 +18,7 @@ | @@ -18,7 +18,7 @@ | ||
| 18 | :checked="currentValue" | 18 | :checked="currentValue" |
| 19 | @change="change"> | 19 | @change="change"> |
| 20 | </span> | 20 | </span> |
| 21 | - <slot v-if="showSlot"><span ref="slot">{{ label }}</span></slot> | 21 | + <slot><span v-if="showSlot">{{ label }}</span></slot> |
| 22 | </label> | 22 | </label> |
| 23 | </template> | 23 | </template> |
| 24 | <script> | 24 | <script> |
| @@ -89,7 +89,7 @@ | @@ -89,7 +89,7 @@ | ||
| 89 | if (this.parent) this.group = true; | 89 | if (this.parent) this.group = true; |
| 90 | if (!this.group) { | 90 | if (!this.group) { |
| 91 | this.updateModel(); | 91 | this.updateModel(); |
| 92 | - this.showSlot = this.$slots.default === undefined; | 92 | + this.showSlot = this.$slots.default !== undefined; |
| 93 | } | 93 | } |
| 94 | }, | 94 | }, |
| 95 | methods: { | 95 | methods: { |
| @@ -103,7 +103,7 @@ | @@ -103,7 +103,7 @@ | ||
| 103 | this.$emit('input', checked); | 103 | this.$emit('input', checked); |
| 104 | 104 | ||
| 105 | if (this.group) { | 105 | if (this.group) { |
| 106 | - this.parent.change(this.model); | 106 | + this.$parent.change(this.model); |
| 107 | } else { | 107 | } else { |
| 108 | this.$emit('on-change', checked); | 108 | this.$emit('on-change', checked); |
| 109 | this.dispatch('FormItem', 'on-form-change', checked); | 109 | this.dispatch('FormItem', 'on-form-change', checked); |