diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue index 15aa16f..4ff2c82 100644 --- a/src/components/checkbox/checkbox.vue +++ b/src/components/checkbox/checkbox.vue @@ -18,7 +18,7 @@ v-model="checked" @change="change"> </span> - <slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot> + <slot v-if="showSlot"><span v-el:slot style="display:none">{{ value }}</span></slot> </label> </template> <script> @@ -78,6 +78,8 @@ this.updateModel(); if (this.$els.slot && this.$els.slot.innerHTML === '') { this.showSlot = false; + } else { + this.$els.slot.style.display = 'inline'; } } }, diff --git a/src/components/transfer/list.vue b/src/components/transfer/list.vue index 784f3ce..7fa2bde 100644 --- a/src/components/transfer/list.vue +++ b/src/components/transfer/list.vue @@ -1,7 +1,8 @@ <template> <div :class="prefixCls" :style="style"> <div :class="prefixCls + '-header'"> - <Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll">{{ title }}</Checkbox> + <Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox> + <span>{{ title }}</span> <span :class="prefixCls + '-header-count'">{{ count }}</span> </div> <div :class="bodyClasses"> @@ -15,7 +16,10 @@ <li v-for="item in showItems | filterBy filterData" :class="[prefixCls + '-content-item', {[prefixCls + '-content-item-disabled']: item.disabled}]" - @click.prevent="select(item)"><Checkbox :checked="isCheck(item)" :disabled="item.disabled">{{ showLabel(item) }}</Checkbox></li> + @click.prevent="select(item)"> + <Checkbox :checked="isCheck(item)" :disabled="item.disabled"></Checkbox> + <span>{{ showLabel(item) }}</span> + </li> <li :class="prefixCls + '-content-not-found'">{{ notFoundText }}</li> </ul> </div> @@ -82,9 +86,7 @@ index > -1 ? this.checkedKeys.splice(index, 1) : this.checkedKeys.push(item.key); }, updateFilteredData () { - this.showItems = this.data.map(item => { - return item; - }) + this.showItems = this.data; }, toggleSelectAll (status) { this.checkedKeys = status ? diff --git a/src/styles/components/transfer.less b/src/styles/components/transfer.less index c5bf038..62f5429 100644 --- a/src/styles/components/transfer.less +++ b/src/styles/components/transfer.less @@ -12,14 +12,14 @@ font-size: @font-size-small; vertical-align: middle; border: 1px solid @border-color-base; - border-radius: @border-radius-base; + border-radius: @border-radius-base @border-radius-base 0 0; position: relative; padding-top: 35px; &-header { padding: 8px 16px; border-radius: @border-radius-base @border-radius-base 0 0; - background: #fff; + background: @head-bg; color: @text-color; border-bottom: 1px solid @border-color-split; overflow: hidden; @@ -28,6 +28,10 @@ left: 0; width: 100%; + & > span{ + padding-left: 4px; + } + &-count { margin: 0 !important; float: right; @@ -39,7 +43,7 @@ position: relative; &-with-search{ - padding-top: 40px; + padding-top: 34px; } } @@ -52,6 +56,10 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + + & > span{ + padding-left: 4px; + } } &-not-found{ @@ -64,11 +72,11 @@ } } &-body-with-search &-content{ - padding: 0; + padding: 6px 0 0; } &-body-search-wrapper{ - padding: 8px; + padding: 8px 8px 0; position: absolute; top: 0; left: 0; @@ -78,6 +86,15 @@ &-search{ position: relative; } + + &-footer{ + margin: 0 -1px; + border: 1px solid @border-color-base; + border-top: none; + border-radius: 0 0 @border-radius-base @border-radius-base; + + .clearfix(); + } } &-operation { display: inline-block; diff --git a/src/styles/themes/default/custom.less b/src/styles/themes/default/custom.less index 80af761..d2174cd 100644 --- a/src/styles/themes/default/custom.less +++ b/src/styles/themes/default/custom.less @@ -37,6 +37,7 @@ @background-color-base : #f7f7f7; // base @background-color-select-hover: @input-disabled-bg; @tooltip-bg : rgba(70, 76, 91, .9); +@head-bg : #f9fafc; // Shadow @shadow-color : rgba(0, 0, 0, .2); diff --git a/test/routers/radio.vue b/test/routers/radio.vue index 62b6eca..2c3f4d2 100644 --- a/test/routers/radio.vue +++ b/test/routers/radio.vue @@ -1,5 +1,6 @@ <template> <div> + <Checkbox>hello</Checkbox> <Radio-group :model.sync="phone"> <Radio value="apple"> <Icon type="social-apple"></Icon> diff --git a/test/routers/transfer.vue b/test/routers/transfer.vue index a80d29d..5a1454c 100644 --- a/test/routers/transfer.vue +++ b/test/routers/transfer.vue @@ -10,11 +10,16 @@ filterable :target-keys.sync="targetKeys" :operations="['向左移动','向右移动']" - @on-change="change"></Transfer> + :filter-method="filterMethod" + @on-change="change"> + <div :style="{float: 'right', margin: '5px'}"> + <i-button type="ghost" size="small" @click="getMock">刷新</i-button> + </div> + </Transfer> </div> </template> <script> - import { Transfer } from 'iview'; + import { Transfer, iButton } from 'iview'; export default { props: { @@ -38,6 +43,9 @@ filterMethod (data, query) { if (query === '') return true; return data.label === query; + }, + getMock () { + } } } -- libgit2 0.21.4