diff --git a/package/component/src/component/page/index.less b/package/component/src/component/page/index.less index d8f25d80..d92b6e96 100644 --- a/package/component/src/component/page/index.less +++ b/package/component/src/component/page/index.less @@ -47,6 +47,33 @@ .layui-laypage a:hover { color: var(--global-primary-color); } +.layui-laypage-a-red:hover{ + color: #ff5722 !important; +} + +.layui-laypage-a-orange:hover{ + color: #ffb800 !important; +} + +.layui-laypage-a-green:hover{ + color: #009688 !important; +} + +.layui-laypage-a-cyan:hover{ + color: #2f4056 !important; +} + +.layui-laypage-a-blue:hover{ + color: #01aaed !important; +} + +.layui-laypage-a-black:hover{ + color: #000 !important; +} + +.layui-laypage-a-gray:hover{ + color: #c2c2c2 !important; +} .layui-laypage em { font-style: normal; diff --git a/package/component/src/component/page/index.vue b/package/component/src/component/page/index.vue index ef11a1dd..23d6a21e 100644 --- a/package/component/src/component/page/index.vue +++ b/package/component/src/component/page/index.vue @@ -119,7 +119,7 @@ watch(currentPage, function () { @@ -134,14 +134,14 @@ watch(currentPage, function () { > {{ index }} - {{ index }} + {{ index }} diff --git a/package/component/src/component/transfer/index.less b/package/component/src/component/transfer/index.less index b48c12ef..681d1efb 100644 --- a/package/component/src/component/transfer/index.less +++ b/package/component/src/component/transfer/index.less @@ -5,6 +5,10 @@ --transfer-box-border-radius: var(--global-border-radius); } +.layui-transfer { + display: flex; +} + .layui-transfer .layui-btn + .layui-btn { margin-left: 0; } @@ -22,6 +26,8 @@ border-width: 1px; width: 200px; height: 360px; + display: flex; + flex-direction: column; border-radius: var(--transfer-box-border-radius); background-color: #fff; } @@ -36,12 +42,14 @@ line-height: 38px; padding: 0 10px; border-bottom-width: 1px; + flex: 0; } .layui-transfer-search { position: relative; padding: 10px; border-bottom-width: 1px; + flex: 0; } .layui-transfer-search .layui-input { @@ -86,6 +94,7 @@ .layui-transfer-data { padding: 5px 0; overflow: auto; + flex: 1; } .layui-transfer-data li { @@ -105,8 +114,15 @@ color: #999; } -.layui-transfer-active, -.layui-transfer-box { - display: inline-block; - vertical-align: middle; +.layui-transfer-active { + display: flex; + align-items: center; + justify-items: center; +} + +.layui-transfer-footer { + flex: 0; + height: 48px; + line-height: 48px; + padding: 0 10px; } diff --git a/package/component/src/component/transfer/index.vue b/package/component/src/component/transfer/index.vue index 16f65c66..585b69da 100644 --- a/package/component/src/component/transfer/index.vue +++ b/package/component/src/component/transfer/index.vue @@ -12,7 +12,6 @@ import LayButton from "../button/index.vue"; import LayCheckbox from "../checkbox/index.vue"; import { computed, Ref, ref, useSlots, watch } from "vue"; import { BooleanOrString, Recordable } from "../../types"; -import { computedAsync } from "@vueuse/core"; export interface LayTransferProps { id?: string; @@ -24,7 +23,7 @@ export interface LayTransferProps { selectedKeys?: Recordable[]; } -const slot = useSlots(); +const slots = useSlots(); const props = withDefaults(defineProps(), { id: "id", @@ -38,17 +37,16 @@ const props = withDefaults(defineProps(), { const leftDataSource: Ref = ref([...props.dataSource]); const rightDataSource: Ref = ref([]); - const _leftDataSource: Ref = ref([...props.dataSource]); const _rightDataSource: Ref = ref([]); - const leftSelectedKeys: Ref = ref([]); const rightSelectedKeys: Ref = ref([]); - const allLeftChecked = ref(false); const allRightChecked = ref(false); +const hasLeftChecked = ref(false); +const hasRightChecked = ref(false); -const allLeftChange = function (checked: any) { +const allLeftChange = (checked: any) => { if (checked) { const ids = leftDataSource.value.map((item: any) => { return item[props.id]; @@ -70,11 +68,16 @@ watch( } else { allLeftChecked.value = false; } + if (leftSelectedKeys.value.length > 0 && leftDataSource.value.length != 0) { + hasLeftChecked.value = true; + } else { + hasLeftChecked.value = false; + } }, { deep: true } ); -const allRightChange = function (checked: any) { +const allRightChange = (checked: any) => { if (checked) { const ids = rightDataSource.value.map((item: any) => { return item[props.id]; @@ -90,17 +93,25 @@ watch( () => { if ( rightDataSource.value.length === rightSelectedKeys.value.length && - rightDataSource.value.length != 0 + rightDataSource.value.length > 0 ) { allRightChecked.value = true; } else { allRightChecked.value = false; } + if ( + rightSelectedKeys.value.length > 0 && + rightDataSource.value.length != 0 + ) { + hasRightChecked.value = true; + } else { + hasRightChecked.value = false; + } }, { deep: true } ); -const add = function () { +const add = () => { if (leftSelectedKeys.value.length === 0) { return; } @@ -123,7 +134,7 @@ const add = function () { leftSelectedKeys.value = []; }; -const remove = function () { +const remove = () => { if (rightSelectedKeys.value.length === 0) { return; } @@ -174,12 +185,6 @@ const boxStyle = computed(() => { height: props.height, }; }); - -const dataStyle = computed(() => { - return { - height: props.showSearch ? "calc(100% - 97px)" : "calc(100% - 38px)", - }; -});