add Transfer component
add Transfer component
This commit is contained in:
梁灏
parent
306e3f74e8
commit
77f7bb9533
15 changed files with 519 additions and 6 deletions
BIN
assets/iview.png
BIN
assets/iview.png
Binary file not shown.
|
Before Width: | Height: | Size: 157 KiB After Width: | Height: | Size: 159 KiB |
|
|
@ -71,7 +71,7 @@
|
|||
}
|
||||
},
|
||||
ready () {
|
||||
this.showSlot = this.$els.slot.innerHTML !== '';
|
||||
this.showSlot = this.$els.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
2
src/components/transfer/index.js
Normal file
2
src/components/transfer/index.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import Transfer from './transfer.vue';
|
||||
export default Transfer;
|
||||
108
src/components/transfer/list.vue
Normal file
108
src/components/transfer/list.vue
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<div :class="prefixCls" :style="style">
|
||||
<div :class="prefixCls + '-header'">
|
||||
<Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll">{{ title }}</Checkbox>
|
||||
<span :class="prefixCls + '-header-count'">{{ count }}</span>
|
||||
</div>
|
||||
<div :class="bodyClasses">
|
||||
<div :class="prefixCls + '-body-search-wrapper'" v-if="filterable">
|
||||
<Search
|
||||
:prefix-cls="prefixCls + '-search'"
|
||||
:query.sync="query"
|
||||
:placeholder="filterPlaceholder"></Search>
|
||||
</div>
|
||||
<ul :class="prefixCls + '-content'" v-if="showItems.length">
|
||||
<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>
|
||||
</ul>
|
||||
<div :class="prefixCls + '-body-not-found'" v-else>{{ notFoundText }}</div>
|
||||
</div>
|
||||
<div :class="prefixCls + '-footer'">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Search from './search.vue';
|
||||
import Checkbox from '../checkbox/checkbox.vue';
|
||||
|
||||
export default {
|
||||
components: { Search, Checkbox },
|
||||
// filters: { filterData: this.filterData },
|
||||
props: {
|
||||
prefixCls: String,
|
||||
data: Array,
|
||||
renderFormat: Function,
|
||||
checkedKeys: Array,
|
||||
style: Object,
|
||||
title: [String, Number],
|
||||
filterable: Boolean,
|
||||
filterPlaceholder: String,
|
||||
filterMethod: Function,
|
||||
notFoundText: String,
|
||||
validKeysCount: Number
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showItems: [],
|
||||
query: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bodyClasses () {
|
||||
return [
|
||||
`${this.prefixCls}-body`,
|
||||
{
|
||||
[`${this.prefixCls}-body-with-search`]: this.filterable
|
||||
}
|
||||
]
|
||||
},
|
||||
count () {
|
||||
const validKeysCount = this.validKeysCount;
|
||||
return (validKeysCount > 0 ? `${validKeysCount}/` : '') + `${this.data.length}条`;
|
||||
},
|
||||
checkedAll () {
|
||||
return this.data.filter(data => !data.disabled).length === this.validKeysCount && this.validKeysCount !== 0;
|
||||
},
|
||||
checkedAllDisabled () {
|
||||
return this.data.filter(data => !data.disabled).length <= 0;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLabel (item) {
|
||||
return this.renderFormat(item);
|
||||
},
|
||||
isCheck (item) {
|
||||
return this.checkedKeys.some(key => key === item.key);
|
||||
},
|
||||
select (item) {
|
||||
if (item.disabled) return;
|
||||
const index = this.checkedKeys.indexOf(item.key);
|
||||
index > -1 ? this.checkedKeys.splice(index, 1) : this.checkedKeys.push(item.key);
|
||||
},
|
||||
updateFilteredData () {
|
||||
this.showItems = this.data.map(item => {
|
||||
return item;
|
||||
})
|
||||
},
|
||||
toggleSelectAll (status) {
|
||||
this.checkedKeys = 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);
|
||||
},
|
||||
filterData (value) {
|
||||
return this.filterMethod(value, this.query);
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.updateFilteredData();
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
this.updateFilteredData();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
31
src/components/transfer/operation.vue
Normal file
31
src/components/transfer/operation.vue
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div :class="prefixCls + '-operation'">
|
||||
<i-button type="primary" size="small" :disabled="!rightActive" @click="moveToLeft">
|
||||
<Icon type="ios-arrow-left"></Icon> {{ operations[0] }}
|
||||
</i-button>
|
||||
<i-button type="primary" size="small" :disabled="!leftActive" @click="moveToRight">
|
||||
{{ operations[1] }} <Icon type="ios-arrow-right"></Icon>
|
||||
</i-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iButton from '../button/button.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
prefixCls: String,
|
||||
operations: Array,
|
||||
leftActive: Boolean,
|
||||
rightActive: Boolean
|
||||
},
|
||||
methods: {
|
||||
moveToLeft () {
|
||||
this.$parent.moveTo('left');
|
||||
},
|
||||
moveToRight () {
|
||||
this.$parent.moveTo('right');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
32
src/components/transfer/search.vue
Normal file
32
src/components/transfer/search.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div :class="prefixCls">
|
||||
<i-input
|
||||
:value.sync="query"
|
||||
size="small"
|
||||
:icon="icon"
|
||||
:placeholder="placeholder"
|
||||
@on-click="handleClick"></i-input>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iInput from '../input/input.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
prefixCls: String,
|
||||
placeholder: String,
|
||||
query: String
|
||||
},
|
||||
computed: {
|
||||
icon () {
|
||||
return this.query === '' ? 'ios-search' : 'ios-close';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.query === '') return;
|
||||
this.query = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
186
src/components/transfer/transfer.vue
Normal file
186
src/components/transfer/transfer.vue
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<List
|
||||
v-ref:left
|
||||
:prefix-cls="prefixCls + '-list'"
|
||||
:data="leftData"
|
||||
:render-format="renderFormat"
|
||||
:checked-keys.sync="leftCheckedKeys"
|
||||
:valid-keys-count.sync="leftValidKeysCount"
|
||||
:style="listStyle"
|
||||
:title="titles[0]"
|
||||
:filterable="filterable"
|
||||
:filter-placeholder="filterPlaceholder"
|
||||
:filter-method="filterMethod"
|
||||
:not-found-text="notFoundText">
|
||||
<slot></slot>
|
||||
</List><Operation
|
||||
:prefix-cls="prefixCls"
|
||||
:operations="operations"
|
||||
:left-active="leftValidKeysCount > 0"
|
||||
:right-active="rightValidKeysCount > 0"></Operation><List
|
||||
v-ref:right
|
||||
:prefix-cls="prefixCls + '-list'"
|
||||
:data="rightData"
|
||||
:render-format="renderFormat"
|
||||
:checked-keys.sync="rightCheckedKeys"
|
||||
:valid-keys-count.sync="rightValidKeysCount"
|
||||
:style="listStyle"
|
||||
:title="titles[1]"
|
||||
:filterable="filterable"
|
||||
:filter-placeholder="filterPlaceholder"
|
||||
:filter-method="filterMethod"
|
||||
:not-found-text="notFoundText">
|
||||
<slot></slot>
|
||||
</List>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import List from './list.vue';
|
||||
import Operation from './operation.vue';
|
||||
|
||||
const prefixCls = 'ivu-transfer';
|
||||
|
||||
export default {
|
||||
components: { List, Operation },
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
renderFormat: {
|
||||
type: Function,
|
||||
default (item) {
|
||||
return item.label || item.key;
|
||||
}
|
||||
},
|
||||
targetKeys: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
selectedKeys: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
listStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
titles: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['源列表', '目的列表']
|
||||
}
|
||||
},
|
||||
operations: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
filterable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filterPlaceholder: {
|
||||
type: String,
|
||||
default: '请输入搜索内容'
|
||||
},
|
||||
filterMethod: {
|
||||
type: Function,
|
||||
default (data, query) {
|
||||
const type = ('label' in data) ? 'label' : 'key';
|
||||
return data[type].indexOf(query) > -1;
|
||||
}
|
||||
},
|
||||
notFoundText: {
|
||||
type: String,
|
||||
default: '列表为空'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
leftData: [],
|
||||
rightData: [],
|
||||
leftCheckedKeys: [],
|
||||
rightCheckedKeys: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`
|
||||
]
|
||||
},
|
||||
leftValidKeysCount () {
|
||||
return this.getValidKeys('left').length;
|
||||
},
|
||||
rightValidKeysCount () {
|
||||
return this.getValidKeys('right').length;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getValidKeys (direction) {
|
||||
return this[`${direction}Data`].filter(data => !data.disabled && this[`${direction}CheckedKeys`].indexOf(data.key) > -1).map(data => data.key);
|
||||
},
|
||||
splitData (init = false) {
|
||||
this.leftData = [...this.data];
|
||||
this.rightData = [];
|
||||
if (this.targetKeys.length > 0) {
|
||||
this.targetKeys.forEach((targetKey) => {
|
||||
this.rightData.push(
|
||||
this.leftData.filter((data, index) => {
|
||||
if (data.key === targetKey) {
|
||||
this.leftData.splice(index, 1);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})[0]);
|
||||
});
|
||||
}
|
||||
if (init) {
|
||||
this.splitSelectedKey();
|
||||
}
|
||||
},
|
||||
splitSelectedKey () {
|
||||
const selectedKeys = this.selectedKeys;
|
||||
if (selectedKeys.length > 0) {
|
||||
this.leftCheckedKeys = this.leftData
|
||||
.filter(data => selectedKeys.indexOf(data.key) > -1)
|
||||
.map(data => data.key);
|
||||
this.rightCheckedKeys = this.rightData
|
||||
.filter(data => selectedKeys.indexOf(data.key) > -1)
|
||||
.map(data => data.key);
|
||||
}
|
||||
},
|
||||
moveTo (direction) {
|
||||
const targetKeys = this.targetKeys;
|
||||
const opposite = direction === 'left' ? 'right' : 'left';
|
||||
const moveKeys = this.getValidKeys(opposite);
|
||||
const newTargetKeys = direction === 'right' ?
|
||||
moveKeys.concat(targetKeys) :
|
||||
targetKeys.filter(targetKey => !moveKeys.some(checkedKey => targetKey === checkedKey));
|
||||
|
||||
this.$refs[opposite].toggleSelectAll(false);
|
||||
this.$emit('on-change', newTargetKeys, direction, moveKeys);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
targetKeys () {
|
||||
this.splitData(false);
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.splitData(true);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -27,6 +27,7 @@ import Switch from './components/switch';
|
|||
import Tag from './components/tag';
|
||||
import Timeline from './components/timeline';
|
||||
import Tooltip from './components/tooltip';
|
||||
import Transfer from './components/transfer';
|
||||
import { Row, Col } from './components/layout';
|
||||
import { Select, Option, OptionGroup } from './components/select';
|
||||
|
||||
|
|
@ -71,7 +72,8 @@ const iview = {
|
|||
Tag,
|
||||
Timeline,
|
||||
TimelineItem: Timeline.Item,
|
||||
Tooltip
|
||||
Tooltip,
|
||||
Transfer
|
||||
};
|
||||
|
||||
const install = function (Vue) {
|
||||
|
|
|
|||
|
|
@ -27,3 +27,4 @@
|
|||
@import "input";
|
||||
@import "slider";
|
||||
@import "cascader";
|
||||
@import "transfer";
|
||||
|
|
@ -19,6 +19,10 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
&-icon + &{
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
&-wrapper-large &-icon{
|
||||
font-size: 18px;
|
||||
height: @input-height-large;
|
||||
|
|
@ -29,10 +33,10 @@
|
|||
font-size: 14px;
|
||||
height: @input-height-small;
|
||||
line-height: @input-height-small;
|
||||
}
|
||||
|
||||
&-icon + &{
|
||||
padding-right: 32px;
|
||||
+ .@{input-prefix-cls} {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
89
src/styles/components/transfer.less
Normal file
89
src/styles/components/transfer.less
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
@transfer-prefix-cls: ~"@{css-prefix}transfer";
|
||||
@transfer-item-prefix-cls: ~"@{css-prefix}transfer-list-content-item";
|
||||
|
||||
.@{transfer-prefix-cls} {
|
||||
position: relative;
|
||||
line-height: @line-height-base;
|
||||
|
||||
&-list{
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
height: 210px;
|
||||
font-size: @font-size-small;
|
||||
vertical-align: middle;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
position: relative;
|
||||
padding-top: 35px;
|
||||
|
||||
&-header {
|
||||
padding: 8px 16px;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
background: #fff;
|
||||
color: @text-color;
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
&-count {
|
||||
margin: 0 !important;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&-body{
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&-with-search{
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content{
|
||||
height: 100%;
|
||||
padding: 4px 0;
|
||||
overflow: auto;
|
||||
|
||||
&-item{
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
&-body-with-search &-content{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-body-search-wrapper{
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&-search{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
&-operation {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
margin: 0 16px;
|
||||
vertical-align: middle;
|
||||
|
||||
.@{btn-prefix-cls} {
|
||||
display: block;
|
||||
min-width: @btn-circle-size-small;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-item(@transfer-prefix-cls, @transfer-item-prefix-cls);
|
||||
|
|
@ -11,6 +11,10 @@
|
|||
line-height: 1;
|
||||
position: relative;
|
||||
|
||||
&-disabled{
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
border-color: #bcbcbc;
|
||||
|
|
@ -56,6 +60,10 @@
|
|||
z-index: 1;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
|
||||
&[disabled]{
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -141,6 +149,9 @@
|
|||
& + & {
|
||||
margin-left: 8px;
|
||||
}
|
||||
&-disabled{
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-wrapper + span,
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ li + li {
|
|||
<li><a v-link="'/tag'">Tag</a></li>
|
||||
<li><a v-link="'/input'">Input</a></li>
|
||||
<li><a v-link="'/cascader'">Cascader</a></li>
|
||||
<li><a v-link="'/transfer'">Transfer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -97,6 +97,11 @@ router.map({
|
|||
component: function (resolve) {
|
||||
require(['./routers/cascader.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/transfer': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/transfer.vue'], resolve);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
41
test/routers/transfer.vue
Normal file
41
test/routers/transfer.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<style>
|
||||
body{
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div style="margin: 50px;">
|
||||
<Transfer
|
||||
:data="data"
|
||||
filterable
|
||||
:target-keys.sync="targetKeys"
|
||||
:selected-keys="selectedKeys"
|
||||
:operations="['向左移动','向右移动']"
|
||||
@on-change="change"></Transfer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Transfer } from 'iview';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [{"key":"0","label":"content1","description":"description of content1","disabled":true},{"key":"1","label":"content2","description":"description of content2","disabled": false},{"key":"2","label":"content3","description":"description of content3","disabled":false},{"key":"3","label":"content4","description":"description of content4","disabled":false},{"key":"4","label":"content5","description":"description of content5","disabled":true},{"key":"5","label":"content6","description":"description of content6","disabled":false},{"key":"6","label":"content7","description":"description of content7","disabled":false},{"key":"7","label":"content8","description":"description of content8","disabled":false},{"key":"8","label":"content9","description":"description of content9","disabled":true},{"key":"9","label":"content10","description":"description of content10","disabled":false},{"key":"10","label":"content11","description":"description of content11","disabled":false},{"key":"11","label":"content12","description":"description of content12","disabled":false},{"key":"12","label":"content13","description":"description of content13","disabled":true},{"key":"13","label":"content14","description":"description of content14","disabled":false},{"key":"14","label":"content15","description":"description of content15","disabled":false},{"key":"15","label":"content16","description":"description of content16","disabled":false},{"key":"16","label":"content17","description":"description of content17","disabled":false},{"key":"17","label":"content18","description":"description of content18","disabled":true},{"key":"18","label":"content19","description":"description of content19","disabled":false},{"key":"19","label":"content20","description":"description of content20","disabled":false}],
|
||||
targetKeys: ['1','2','3','5','8'],
|
||||
selectedKeys: ['0','1','4', '5','6','9']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
change (newTargetKeys, direction, moveKeys) {
|
||||
// console.log(newTargetKeys)
|
||||
this.targetKeys = newTargetKeys;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue