theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐛(component): splitPanel

Browse Source 
space 修改为像素，其他自适应

ISSUES CLOSED: https://gitee.com/layui/layui-vue/issues/I5FB3S
This commit is contained in:
dingyongya 2022-07-11 18:09:21 +08:00
parent afec6ca6cd
commit 4a877f81f5
12 changed files with 141 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package/component/src/component/splitPanel/index.less
View File

@ -4,7 +4,6 @@
position: relative; position: relative;
.lay-split-panel-item { .lay-split-panel-item {
height: 100%; height: 100%;
flex-grow: 1;
border: 1px #eeeeee solid; border: 1px #eeeeee solid;
} }
.lay-split-panel-item-move { .lay-split-panel-item-move {

30
package/component/src/component/splitPanel/index.vue
View File

@ -1,14 +1,15 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: "laySplitPanel", name: "LaySplitPanel",
}; };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, provide, withDefaults, onMounted } from "vue"; import { ref, watch, provide, withDefaults, onMounted } from "vue";
import "./index.less"; import "./index.less";
import { useMousePressed } from "@vueuse/core";
export interface LayStepProps { interface LayStepProps {
vertical?: boolean; vertical?: boolean;
minSize?: number; minSize?: number;
} }
@ -17,21 +18,20 @@ const props = withDefaults(defineProps<LayStepProps>(), {
vertical: false, vertical: false,
minSize: 50, minSize: 50,
}); });
const target = ref();
const { pressed } = useMousePressed({ target: target });
let domEvent = ref(); let domEvent = ref();
let domStatus = ref(false); let domStatus = ref(pressed);
const target = ref(); let parentVertical = ref();
onMounted(() => { onMounted(() => {
const boxWidth = target.value.offsetWidth; const boxWidth = target.value.offsetWidth;
const boxHeight = target.value.offsetHeight; const boxHeight = target.value.offsetHeight;
window.addEventListener("scroll", (event) => {
console.log(event);
});
target.value.addEventListener( target.value.addEventListener(
"mousemove", "mousemove",
(event: { layerX: any; layerY: any }) => { (event: { layerX: any; layerY: any }) => {
if (domStatus.value) { if (domStatus.value && domEvent.value) {
const prevDom = domEvent.value.target.previousElementSibling; const prevDom = domEvent.value.target.previousElementSibling;
const nextDom = domEvent.value.target.nextElementSibling; const nextDom = domEvent.value.target.nextElementSibling;
if (!props.vertical) { if (!props.vertical) {
@ -50,11 +50,11 @@ onMounted(() => {
) { ) {
return false; return false;
} }
prevDom.style.width = prevDom.style.flexBasis =
((event.layerX - prevDomLeft) / (prevDomWidth + nextDomWidth + 5)) * ((event.layerX - prevDomLeft) / (prevDomWidth + nextDomWidth + 5)) *
otherWidthPercentage + otherWidthPercentage +
"%"; "%";
nextDom.style.width = nextDom.style.flexBasis =
((boxWidth - (event.layerX - prevDomLeft) - otherWidth) / ((boxWidth - (event.layerX - prevDomLeft) - otherWidth) /
(prevDomWidth + nextDomWidth + 5)) * (prevDomWidth + nextDomWidth + 5)) *
otherWidthPercentage + otherWidthPercentage +
@ -76,12 +76,12 @@ onMounted(() => {
) { ) {
return false; return false;
} }
prevDom.style.height = prevDom.style.flexBasis =
((event.layerY - prevDomTop) / ((event.layerY - prevDomTop) /
(prevDomHeight + nextDomHeight + 5)) * (prevDomHeight + nextDomHeight + 5)) *
otherHeightPercentage + otherHeightPercentage +
"%"; "%";
nextDom.style.height = nextDom.style.flexBasis =
((boxHeight - (event.layerY - prevDomTop) - otherHeight) / ((boxHeight - (event.layerY - prevDomTop) - otherHeight) /
(prevDomHeight + nextDomHeight + 5)) * (prevDomHeight + nextDomHeight + 5)) *
otherHeightPercentage + otherHeightPercentage +
@ -92,13 +92,16 @@ onMounted(() => {
); );
}); });
const moveChange = (event: any, status: boolean) => { const moveChange = (event: any, status: boolean, isVertical: boolean) => {
domEvent.value = event; domEvent.value = event;
domStatus.value = status; domStatus.value = status;
parentVertical.value = isVertical;
}; };
const mouseup = () => { const mouseup = () => {
domStatus.value = false; domStatus.value = false;
domEvent.value = null;
parentVertical.value = false;
}; };
// 定义初始化个数数组 // 定义初始化个数数组
@ -116,6 +119,7 @@ watch(steps, () => {
provide("laySplitPanel", { provide("laySplitPanel", {
props, props,
steps, steps,
target,
moveChange, moveChange,
}); });
</script> </script>

44
package/component/src/component/splitPanelItem/index.vue
View File

@ -14,12 +14,11 @@ import {
onBeforeUnmount, onBeforeUnmount,
reactive, reactive,
withDefaults, withDefaults,
watch,
} from "vue"; } from "vue";
import type { ComputedRef } from "vue"; import type { ComputedRef } from "vue";
export interface LayStepItemProps { interface LayStepItemProps {
space?: number; space?: number;
} }
@ -34,11 +33,6 @@ const setIndex = (val: number) => {
index.value = val; index.value = val;
}; };
const mousedown = (event: any) => {
moveStatus.value = true;
parents.moveChange(event, true);
};
const mouseup = (event: any) => { const mouseup = (event: any) => {
moveStatus.value = false; moveStatus.value = false;
}; };
@ -47,6 +41,34 @@ const stepsCount = computed(() => {
return parents.steps.value.length; return parents.steps.value.length;
}); });
const initSpace = (parentSpace: any, key: string) => {
const childList = Array.from(parentElement.value.children);
childList.forEach((item: any, index: number) => {
if (index === 0 || index % 2 === 0) {
item.style.flexBasis = (item[key] / parentSpace) * 100 + "%";
item.style.flexGrow = 0;
}
});
};
const mousedown = (event: any) => {
let parentSpace = 0;
if (!isVertical.value) {
parentSpace = parentElement.value.offsetWidth;
initSpace(parentSpace, "offsetWidth");
} else {
parentSpace = parentElement.value.offsetHeight;
initSpace(parentSpace, "offsetHeight");
}
moveStatus.value = true;
parents.moveChange(event, true, isVertical.value);
};
const parentElement = computed(() => {
return parents.target.value;
});
const isVertical = computed(() => { const isVertical = computed(() => {
return parents.props.vertical; return parents.props.vertical;
}); });
@ -63,9 +85,8 @@ const isStart: ComputedRef<boolean> = computed(() => {
const stepItemState = reactive({ const stepItemState = reactive({
itemId: computed(() => currentInstance?.uid), itemId: computed(() => currentInstance?.uid),
setIndex, setIndex,
width: [], space: props.space,
}); });
parents.steps.value = [...parents.steps.value, stepItemState]; parents.steps.value = [...parents.steps.value, stepItemState];
onMounted(() => {}); onMounted(() => {});
@ -85,16 +106,17 @@ onBeforeUnmount(() => {
v-on="{ mousedown: mousedown, mouseup: mouseup }" v-on="{ mousedown: mousedown, mouseup: mouseup }"
></div> ></div>
<div <div
ref="laySplitPanelItem"
v-if="isVertical" v-if="isVertical"
:class="['lay-split-panel-item']" :class="['lay-split-panel-item']"
:style="{ height: `${space ? space : (100 + space) / stepsCount}%` }" :style="{ flexBasis: `${space}px`, flexGrow: space ? 0 : 1 }"
> >
<slot></slot> <slot></slot>
</div> </div>
<div <div
v-else v-else
:class="['lay-split-panel-item']" :class="['lay-split-panel-item']"
:style="{ width: `${space ? space : (100 + space) / stepsCount}%` }" :style="{ flexBasis: `${space}px`, flexGrow: space ? 0 : 1 }"
> >
<slot></slot> <slot></slot>
</div> </div>

10
package/component/src/component/table/TableRow.vue
View File

@ -128,7 +128,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
if (column.fixed == "left") { if (column.fixed == "left") {
var left = 0; var left = 0;
for (var i = 0; i < columnIndex; i++) { for (var i = 0; i < columnIndex; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "left") { if (props.columns[i].fixed && props.columns[i].fixed == "left") {
left = left + props.columns[i]?.width.replace("px", ""); left = left + props.columns[i]?.width.replace("px", "");
} }
} }
@ -136,7 +136,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
} else { } else {
var right = 0; var right = 0;
for (var i = columnIndex + 1; i < props.columns.length; i++) { for (var i = columnIndex + 1; i < props.columns.length; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "right") { if (props.columns[i].fixed && props.columns[i].fixed == "right") {
right = right + props.columns[i]?.width.replace("px", ""); right = right + props.columns[i]?.width.replace("px", "");
} }
} }
@ -150,7 +150,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
if (column.fixed == "left") { if (column.fixed == "left") {
var left = true; var left = true;
for (var i = columnIndex + 1; i < props.columns.length; i++) { for (var i = columnIndex + 1; i < props.columns.length; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "left") { if (props.columns[i].fixed && props.columns[i].fixed == "left") {
left = false; left = false;
} }
} }
@ -158,14 +158,14 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
} else { } else {
var right = true; var right = true;
for (var i = 0; i < columnIndex; i++) { for (var i = 0; i < columnIndex; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "right") { if (props.columns[i].fixed && props.columns[i].fixed == "right") {
right = false; right = false;
} }
} }
return `layui-table-fixed-right-first`; return `layui-table-fixed-right-first`;
} }
} }
} };
</script> </script>
<template> <template>

16
package/component/src/component/table/index.vue
View File

@ -255,7 +255,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
if (column.fixed == "left") { if (column.fixed == "left") {
var left = 0; var left = 0;
for (var i = 0; i < columnIndex; i++) { for (var i = 0; i < columnIndex; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "left") { if (props.columns[i].fixed && props.columns[i].fixed == "left") {
left = left + props.columns[i]?.width.replace("px", ""); left = left + props.columns[i]?.width.replace("px", "");
} }
} }
@ -263,7 +263,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
} else { } else {
var right = 0; var right = 0;
for (var i = columnIndex + 1; i < props.columns.length; i++) { for (var i = columnIndex + 1; i < props.columns.length; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "right") { if (props.columns[i].fixed && props.columns[i].fixed == "right") {
right = right + props.columns[i]?.width.replace("px", ""); right = right + props.columns[i]?.width.replace("px", "");
} }
} }
@ -277,22 +277,22 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
if (column.fixed == "left") { if (column.fixed == "left") {
var left = true; var left = true;
for (var i = columnIndex + 1; i < props.columns.length; i++) { for (var i = columnIndex + 1; i < props.columns.length; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "left") { if (props.columns[i].fixed && props.columns[i].fixed == "left") {
left = false; left = false;
} }
} }
return left ? `layui-table-fixed-left-last` : ''; return left ? `layui-table-fixed-left-last` : "";
} else { } else {
var right = true; var right = true;
for (var i = 0; i < columnIndex; i++) { for (var i = 0; i < columnIndex; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "right") { if (props.columns[i].fixed && props.columns[i].fixed == "right") {
right = false; right = false;
} }
} }
return right ? `layui-table-fixed-right-first` : ''; return right ? `layui-table-fixed-right-first` : "";
} }
} }
} };
</script> </script>
<template> <template>
@ -379,7 +379,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
class="layui-table-cell" class="layui-table-cell"
:class="[ :class="[
column.fixed ? `layui-table-fixed-${column.fixed}` : '', column.fixed ? `layui-table-fixed-${column.fixed}` : '',
renderFixedClassName(column, columnIndex) renderFixedClassName(column, columnIndex),
]" ]"
:style="[ :style="[
{ {

10
package/component/src/component/transition/index.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<template v-if="enable"> <template v-if="enable">
<LayCollapseTransition v-if="type === 'collapse'"><slot></slot></LayCollapseTransition> <LayCollapseTransition v-if="type === 'collapse'"
><slot></slot
></LayCollapseTransition>
<LayFadeTransition v-if="type === 'fade'"><slot></slot></LayFadeTransition> <LayFadeTransition v-if="type === 'fade'"><slot></slot></LayFadeTransition>
</template> </template>
<template v-else> <template v-else>
@ -22,14 +24,14 @@ import LayFadeTransition from "./transitions/fadeTransition.vue";
export interface LayTransitionProps { export interface LayTransitionProps {
type?: string; type?: string;
enable?: boolean; enable?: boolean;
time?:string|number; time?: string | number;
} }
const props = withDefaults(defineProps<LayTransitionProps>(), { const props = withDefaults(defineProps<LayTransitionProps>(), {
type: "collapse", type: "collapse",
enable: true, enable: true,
time:0.3 time: 0.3,
}); });
provide('time',props.time) provide("time", props.time);
</script> </script>

4
package/component/src/component/transition/transitions/collapseTransition.vue
View File

@ -18,9 +18,9 @@ export default {
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { inject } from 'vue'; import { inject } from "vue";
const time=inject('time') const time = inject("time");
const elTransition = `${time}s height ease-in-out, ${time}s padding-top ease-in-out, ${time}s padding-bottom ease-in-out`; const elTransition = `${time}s height ease-in-out, ${time}s padding-top ease-in-out, ${time}s padding-bottom ease-in-out`;
const beforeEnter = (el: any) => { const beforeEnter = (el: any) => {

6
package/component/src/component/transition/transitions/fadeTransition.vue
View File

@ -4,10 +4,10 @@
</transition> </transition>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { inject,ref } from 'vue'; import { inject, ref } from "vue";
const time=inject('time') const time = inject("time");
const transition=ref(`opacity ${time}s ease`); const transition = ref(`opacity ${time}s ease`);
</script> </script>
<style> <style>
.fade-enter-from, .fade-enter-from,

48
package/component/src/component/tree/TreeNode.vue
View File

@ -65,9 +65,7 @@ const nodeIconType = (node: TreeData): string => {
return ""; return "";
} }
if (node.children.length !== 0) { if (node.children.length !== 0) {
return !node.isLeaf return !node.isLeaf ? "layui-icon-addition" : "layui-icon-subtraction";
? "layui-icon-addition"
: "layui-icon-subtraction";
} }
return "layui-icon-file"; return "layui-icon-file";
}; };
@ -90,39 +88,40 @@ function handleTitleClick(node: TreeData) {
} }
emit("node-click", node); emit("node-click", node);
} }
function handleRowClick(node:TreeData){ function handleRowClick(node: TreeData) {
if(!props.showLine){ if (!props.showLine) {
handleTitleClick(node); handleTitleClick(node);
} }
} }
//判断是否半选 //判断是否半选
const isChildAllSelected=computed(()=>{ const isChildAllSelected = computed(() => {
function _isChildAllSelected(node:TreeData):boolean{ function _isChildAllSelected(node: TreeData): boolean {
if(!props.showCheckbox){ if (!props.showCheckbox) {
return false; return false;
} }
let childSelectNum=0; let childSelectNum = 0;
let res=false;// true为半选 false为全选 let res = false; // true为半选 false为全选
for (const item of node.children) { for (const item of node.children) {
if(item.isChecked) childSelectNum++; if (item.isChecked) childSelectNum++;
} }
if(childSelectNum>0) node.isChecked=true;//此处的处理与 checkedKeys 有关联 if (childSelectNum > 0) node.isChecked = true; //此处的处理与 checkedKeys 有关联
if(childSelectNum==node.children.length){//继续递归向下判断 if (childSelectNum == node.children.length) {
//继续递归向下判断
for (const item of node.children) { for (const item of node.children) {
res=_isChildAllSelected(item) res = _isChildAllSelected(item);
if(res) break; if (res) break;
} }
}else{ } else {
res=true; res = true;
} }
return res; return res;
} }
return function(node:TreeData):boolean{ return function (node: TreeData): boolean {
let res=_isChildAllSelected(node) let res = _isChildAllSelected(node);
return res; return res;
} };
}) });
</script> </script>
<template> <template>
@ -143,7 +142,10 @@ const isChildAllSelected=computed(()=>{
{ 'layui-tree-iconClick': true }, { 'layui-tree-iconClick': true },
]" ]"
> >
<lay-icon :type="nodeIconType(node)" @click.stop="handleIconClick(node)" /> <lay-icon
:type="nodeIconType(node)"
@click.stop="handleIconClick(node)"
/>
</span> </span>
<lay-checkbox <lay-checkbox
v-if="showCheckbox" v-if="showCheckbox"
@ -156,7 +158,7 @@ const isChildAllSelected=computed(()=>{
handleChange(checked, node); handleChange(checked, node);
} }
" "
:isIndeterminate='isChildAllSelected(node)' :isIndeterminate="isChildAllSelected(node)"
/> />
<span <span
:class="{ :class="{

30
package/component/src/component/tree/index.vue
View File

@ -6,7 +6,7 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
import TreeNode from "./TreeNode.vue"; import TreeNode from "./TreeNode.vue";
import { computed, useSlots, watch,ref } from "vue"; import { computed, useSlots, watch, ref } from "vue";
import { useTree } from "./useTree"; import { useTree } from "./useTree";
import { TreeData } from "./tree"; import { TreeData } from "./tree";
import { StringFn, StringOrNumber, KeysType, EditType } from "./tree.type"; import { StringFn, StringOrNumber, KeysType, EditType } from "./tree.type";
@ -43,7 +43,9 @@ interface TreeEmits {
} }
const props = withDefaults(defineProps<TreeProps>(), { const props = withDefaults(defineProps<TreeProps>(), {
checkedKeys:()=>{ return [] }, checkedKeys: () => {
return [];
},
showCheckbox: false, showCheckbox: false,
edit: false, edit: false,
collapseTransition: true, collapseTransition: true,
@ -71,26 +73,26 @@ const className = computed(() => {
}; };
}); });
let tree=ref(); let tree = ref();
let nodeList=ref(); let nodeList = ref();
const loadNodeList=()=>{ const loadNodeList = () => {
let { tree:_tree, nodeList:_nodeList }=useTree(props, emit); let { tree: _tree, nodeList: _nodeList } = useTree(props, emit);
tree.value=_tree tree.value = _tree;
nodeList.value=_nodeList.value nodeList.value = _nodeList.value;
} };
watch( watch(
() => props.data, () => props.data,
() => { () => {
loadNodeList(); loadNodeList();
}, },
{ deep: true,immediate:true} { deep: true, immediate: true }
) );
watch( watch(
() => props.checkedKeys, () => props.checkedKeys,
() => { () => {
loadNodeList() loadNodeList();
}, }
) );
function handleClick(node: TreeData) { function handleClick(node: TreeData) {
const originNode = tree.value.getOriginData(node.id); const originNode = tree.value.getOriginData(node.id);

14
package/component/src/component/tree/tree.ts
View File

@ -106,7 +106,7 @@ class Tree {
children: nodeChildren ? nodeChildren : [], children: nodeChildren ? nodeChildren : [],
parentKey: parentKey, parentKey: parentKey,
isRoot: parentKey === "", isRoot: parentKey === "",
isDisabled:false, isDisabled: false,
isChecked: false, isChecked: false,
isLeaf: false, isLeaf: false,
hasNextSibling: hasNextSibling, hasNextSibling: hasNextSibling,
@ -114,14 +114,12 @@ class Tree {
}); });
node.isDisabled = nodeDisabled; node.isDisabled = nodeDisabled;
if(parentNode && parentNode.isChecked){ if (parentNode && parentNode.isChecked) {
node.isChecked=true; node.isChecked = true;
}else{ } else {
node.isChecked=checkedKeys.includes(nodeKey); node.isChecked = checkedKeys.includes(nodeKey);
} }
node.isLeaf = parentNode node.isLeaf = parentNode ? parentNode.isLeaf : expandKeys.includes(nodeKey);
? parentNode.isLeaf
: expandKeys.includes(nodeKey);
node.isLeaf = nodeIsLeaf; node.isLeaf = nodeIsLeaf;
if (!nodeMap.has(nodeKey)) { if (!nodeMap.has(nodeKey)) {

27
package/document-component/src/document/zh-CN/components/splitPanel.md
View File

@ -25,6 +25,16 @@
<script> <script>
</script> </script>
<style>
.lay-split-panel-item{
display: flex;
font-size: 16px;
font-weight: bold;
justify-content: center;
align-items: center;
}
</style>
::: :::
::: title 自定义比例 ::: title 自定义比例
@ -36,9 +46,9 @@
<template> <template>
<div> <div>
<lay-split-panel style="height: 300px"> <lay-split-panel style="height: 300px">
<lay-split-panel-item :space="30">1</lay-split-panel-item> <lay-split-panel-item :space="200">1</lay-split-panel-item>
<lay-split-panel-item :space="20">2</lay-split-panel-item> <lay-split-panel-item>2</lay-split-panel-item>
<lay-split-panel-item :space="50">3</lay-split-panel-item> <lay-split-panel-item :space="200">3</lay-split-panel-item>
</lay-split-panel> </lay-split-panel>
</div> </div>
</template> </template>
@ -78,13 +88,14 @@
<template> <template>
<div> <div>
<lay-split-panel style="height: 600px;"> <lay-split-panel style="height: 600px;">
<lay-split-panel-item :space="60"> <lay-split-panel-item :space="300">
<lay-split-panel :vertical="true" style="height: 600px; width: 100%"> <lay-split-panel :vertical="true" style="height: 600px; width: 100%">
<lay-split-panel-item :space="40">1</lay-split-panel-item> <lay-split-panel-item :space="200">1</lay-split-panel-item>
<lay-split-panel-item :space="40">2</lay-split-panel-item> <lay-split-panel-item>2</lay-split-panel-item>
</lay-split-panel> </lay-split-panel>
</lay-split-panel-item> </lay-split-panel-item>
<lay-split-panel-item :space="40">2</lay-split-panel-item> <lay-split-panel-item>2</lay-split-panel-item>
<lay-split-panel-item>2</lay-split-panel-item>
</lay-split-panel> </lay-split-panel>
</div> </div>
</template> </template>
@ -112,7 +123,7 @@
| 属性 | 描述 | 类型 |可选值 | 默认值| | 属性 | 描述 | 类型 |可选值 | 默认值|
| ----- | ---- | ------ | ---| ---| | ----- | ---- | ------ | ---| ---|
| space | 默认每个站多大比例（`%`）, 设置一个，<br/> 其他的都需要设置，合计为（`100` ） | number | - | 按照个数平分 | | space | 默认每个占 `px` , 其他的自动平分 | number | - | 按照个数平分 |
::: :::
::: contributor splitPanel ::: contributor splitPanel