From b57dcdcb29d9a6dfd16f5bb0d90f779fe92807da Mon Sep 17 00:00:00 2001 From: Echo Date: Sat, 25 Sep 2021 21:01:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89=E7=A9=BF?= =?UTF-8?q?=E6=A2=AD=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/transfer/common/use-transfer.ts | 15 +- devui/transfer/src/transfer-base.tsx | 6 +- devui/transfer/src/transfer-operation.tsx | 5 +- devui/transfer/src/transfer.scss | 27 -- devui/transfer/src/transfer.tsx | 32 +- sites/components/transfer/index.md | 548 ++++++++++++++-------- 6 files changed, 393 insertions(+), 240 deletions(-) diff --git a/devui/transfer/common/use-transfer.ts b/devui/transfer/common/use-transfer.ts index 6eaa39f3..42eee67d 100644 --- a/devui/transfer/common/use-transfer.ts +++ b/devui/transfer/common/use-transfer.ts @@ -1,4 +1,4 @@ -import { ExtractPropTypes, PropType } from 'vue' +import { ExtractPropTypes, PropType, SetupContext } from 'vue' import { IItem, ITitles, IModel } from '../types' export const transferProps = { @@ -55,4 +55,17 @@ export const transferProps = { export type TransferProps = ExtractPropTypes; +export const headerSlot = (ctx: SetupContext, name: string): unknown => { + return !ctx.slots[`${name}-header`] ? null : () => ctx.slots[`${name}-header`] && ctx.slots[`${name}-header`]() +} + +export const bodySlot = (ctx: SetupContext, name: string): unknown => { + return !ctx.slots[`${name}-body`] ? null : () => ctx.slots[`${name}-body`] && ctx.slots[`${name}-body`]() +} + +export const opeartionSlot = (ctx: SetupContext): unknown => { + return ctx.slots && ctx.slots.operation && ctx.slots.operation() || null +} + + diff --git a/devui/transfer/src/transfer-base.tsx b/devui/transfer/src/transfer-base.tsx index be6c197a..ac4d4b61 100644 --- a/devui/transfer/src/transfer-base.tsx +++ b/devui/transfer/src/transfer-base.tsx @@ -46,11 +46,11 @@ export default defineComponent({ searchQuery, modelValues } = this - + return (
{ - this.$slots.Header ? this.$slots.Header() : (
+ this.$slots.header ? this.$slots.header() : (
) } { - this.$slots.Body ? this.$slots.Body() :
+ this.$slots.body ? this.$slots.body() :
{search &&
} diff --git a/devui/transfer/src/transfer-operation.tsx b/devui/transfer/src/transfer-operation.tsx index 9718e3ce..7bb73068 100644 --- a/devui/transfer/src/transfer-operation.tsx +++ b/devui/transfer/src/transfer-operation.tsx @@ -10,7 +10,7 @@ export default defineComponent({ props: transferOperationProps, setup(props, ctx) { return () => { - return
+ return ctx.slots.operation && ctx.slots.operation() ||
ctx.emit('updateSourceData')}> @@ -18,8 +18,5 @@ export default defineComponent({
} - }, - data() { - return {} } }) \ No newline at end of file diff --git a/devui/transfer/src/transfer.scss b/devui/transfer/src/transfer.scss index c24d4f81..4088f01c 100644 --- a/devui/transfer/src/transfer.scss +++ b/devui/transfer/src/transfer.scss @@ -1,4 +1,3 @@ -// @import '../../style/theme/color'; @import '../../style/theme/color'; $devui-transfer-border-color: #adb0b8; @@ -63,7 +62,6 @@ $devui-transfer-body-list-item-height: 36px; &-empty { height: 100%; - // width: 100%; display: flex; justify-content: center; align-items: center; @@ -124,29 +122,4 @@ $devui-transfer-body-list-item-height: 36px; } } } - - .custom { - &-body { - &-header, - &-list { - display: flex; - justify-content: space-around; - line-height: $devui-transfer-body-list-item-height; - flex-wrap: wrap; - margin: 0; - } - - &-header { - border-bottom: 1px solid $devui-transfer-border-color; - width: 100%; - } - - &-header > div, - &-list > div { - width: 25%; - display: flex; - justify-content: center; - } - } - } } diff --git a/devui/transfer/src/transfer.tsx b/devui/transfer/src/transfer.tsx index dac3cc92..e05273d0 100644 --- a/devui/transfer/src/transfer.tsx +++ b/devui/transfer/src/transfer.tsx @@ -1,10 +1,10 @@ -import { defineComponent, reactive, watch, ref } from 'vue' +import { defineComponent, reactive, watch, ref, SetupContext } from 'vue' import { TState } from '../types' import DTransferBase from './transfer-base' import DTransferOperation from './transfer-operation' import { initState } from '../common/use-transfer-base' -import { transferProps, TransferProps } from '../common/use-transfer' -import DCheckbox from '../..//checkbox/src/checkbox' +import { transferProps, TransferProps, headerSlot, bodySlot, opeartionSlot } from '../common/use-transfer' +import DCheckbox from '../../checkbox/src/checkbox' import './transfer.scss' export default defineComponent({ @@ -15,7 +15,7 @@ export default defineComponent({ DCheckbox }, props: transferProps, - setup(props: TransferProps) { + setup(props: TransferProps, ctx: SetupContext) { /** data start **/ const leftOptions = reactive(initState(props, 'source')) const rightOptions = reactive(initState(props, 'target')) @@ -80,8 +80,8 @@ export default defineComponent({ target.data = target.data.concat(newData) source.checkedValues = [] target.disabled = !target.disabled - searchFilterData(source) - searchFilterData(target) + searchFilterData(source, target) + searchFilterData(target, source) setOrigin('click') } const changeAllSource = (source: TState, value: boolean): void => { @@ -103,8 +103,11 @@ export default defineComponent({ rightOptions.checkedValues = values setOrigin('change') } - const searchFilterData = (source: TState): void => { + const searchFilterData = (source: TState, target?: TState): void => { source.filterData = source.data.filter(item => item.key.indexOf(source.query) !== -1) + if (target) { + target.allChecked = false + } } const setOrigin = (value: string): void => { origin.value = value @@ -126,11 +129,20 @@ export default defineComponent({ query={leftOptions.query} checkedValues={leftOptions.checkedValues} allCount={leftOptions.data.length} + v-slots={ + { + header: headerSlot(ctx, 'left'), + body: bodySlot(ctx, 'left') + } + } onChangeAllSource={(value) => changeAllSource(leftOptions, value)} onUpdateCheckeds={updateLeftCheckeds} onChangeQuery={(value) => leftOptions.query = value} /> 0 ? false : true} targetDisabled={leftOptions.checkedNum > 0 ? false : true} @@ -138,6 +150,12 @@ export default defineComponent({ onUpdateTargetData={() => { updateFilterData(leftOptions, rightOptions) }} /> - - - - - +:::demo -```html - + - -``` + :isSearch="options.isSearch" + > + + + +``` + +::: + +### 自定义穿梭框 + +:::demo + +```vue + + + ``` -### 参数 +::: + + +### API | **参数** | **类型** | **默认** | **说明** | **跳转 Demo** | | ------------------ | ------------------------------------------------------------ | ------------------------- | ------------------------------------------------------------ | ---------------------------- | @@ -220,5 +371,6 @@ import {defineComponent, reactive} from 'vue' | targetOption | Array | [] | 可选参数，穿梭框目标数据 | [基本用法](#基本用法) | | titles | Array | [] | 可选参数，穿梭框标题 | [基本用法](#基本用法) | | height | string | 320px | 可选参数，穿梭框高度 | [基本用法](#基本用法) | -| isSearch | boolean | true | 可选参数，是否可以搜索 | [基本用法](#基本用法) | +| isSearch | boolean | true | 可选参数，是否可以搜索 | [基本用法](#基本用法) | | disabled | boolean | false | 可选参数 穿梭框禁止使用 | [基本用法](#基本用法) | + -- Gitee