sh-view 1.7.6 → 2.0.0

package/packages/components/global-components/sh-split/index.vue

@@ -1,142 +1,334 @@
-<template>
-	<div class="sh-split heightall">
-		<div v-if="loading" class="layout-loader">
-			<div class="loadbox">
-				<div class="loading" :class="`loading${loadingType < 0 || loadingType > 23 ? 2 : loadingType}`"></div>
-				<div v-if="loadingText" class="loadtext">{{ loadingText }}</div>
-			</div>
-		</div>
-		<Split v-model="verticalValue" mode="vertical">
-			<template #top><slot name="head"></slot></template>
-			<template #bottom>
-				<Split v-model="value" :mode="mode" :min="min" :max="max" @on-move-start="onMoveStart" @on-moving="onMoveing" @on-move-end="onMoveEnd">
-					<template #top><slot name="top"></slot></template>
-					<template #bottom><slot name="bottom"></slot></template>
-					<template #left><slot name="left"></slot></template>
-					<template #right
-						><div class="split-right"><slot name="right"></slot></div
-					></template>
-					<template v-if="disabled" #trigger>
-						<Divider class="m-0 heightall" :type="dividerMode">{{ dividerText }}</Divider>
-					</template>
-				</Split>
-			</template>
-			<template v-if="verticalDisabled" #trigger>
-				<Divider v-show="$slots.head" class="m-0" type="horizontal"></Divider>
-			</template>
-		</Split>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'ShSplit',
-	components: {},
-	props: {
-		split: {
-			type: [Number, String],
-			default: 0.2
-		},
-		mode: {
-			type: String,
-			default: 'horizontal'
-		},
-		min: {
-			type: [Number, String],
-			default: 0
-		},
-		max: {
-			type: [Number, String],
-			default: 0.6
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		dividerText: {
-			type: String,
-			default: ''
-		},
-		loading: {
-			type: Boolean
-		},
-		loadingText: {
-			type: String,
-			default: ''
-		},
-		loadingType: {
-			type: String,
-			default: '2'
-		},
-		verticalSplit: {
-			type: [Number, String],
-			default: '50px'
-		},
-		verticalDisabled: {
-			type: Boolean,
-			default: true
-		}
-	},
-	emits: ['move-start', 'moveing', 'move-end', 'update:modelValue'],
-	data() {
-		return {
-			value: this.split,
-			verticalValue: this.$slots.head ? this.verticalSplit : 0,
-			modeArr: ['horizontal', 'vertical']
-		}
-	},
-	computed: {
-		dividerMode() {
-			return this.modeArr.filter(item => item !== this.mode)
-		}
-	},
-	watch: {},
-	created() {},
-	mounted() {},
-	beforeUnmount() {},
-	methods: {
-		// 拖拽开始
-		onMoveStart() {
-			this.$emit('move-start', this.value)
-		},
-		// 拖拽
-		onMoveing() {
-			this.$emit('moveing', this.value)
-		},
-		// 拖拽结束
-		onMoveEnd() {
-			this.$emit('update:modelValue', this.value)
-			this.$emit('move-end', this.value)
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-split {
-	position: relative;
-	.layout-loader {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(0, 0, 0, 0.4);
-		transition: opacity 0.65s;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-wrap: wrap;
-		font-size: 15px;
-		color: #fff;
-		z-index: 100;
-	}
-	.split-right {
-		position: absolute;
-		right: 0;
-		left: 5px;
-		top: 0;
-		bottom: 0;
-	}
-}
-</style>
+<template>
+	<div ref="splitWrap" v-resize="computeOffset" class="sh-split" :class="{ 'no-select': isMoving }">
+		<sh-loading v-if="loading" loading :content="loadingText" class="layout-loader"></sh-loading>
+		<div v-if="isHorizontal" :class="`${prefix}-horizontal`">
+			<div :style="{ right: `${anotherOffset}%` }" class="left-pane" :class="paneClasses">
+				<slot name="left" />
+			</div>
+			<div :class="`${prefix}-trigger-con`" :style="{ left: `${offset}%` }" @mousedown="handleMousedown">
+				<slot name="trigger">
+					<trigger mode="vertical" />
+				</slot>
+			</div>
+			<div :style="{ left: `${offset}%` }" class="right-pane" :class="paneClasses">
+				<slot name="right" />
+			</div>
+		</div>
+		<div v-else :class="`${prefix}-vertical`">
+			<div :style="{ bottom: `${anotherOffset}%` }" class="top-pane" :class="paneClasses">
+				<slot name="top" />
+			</div>
+			<div :class="`${prefix}-trigger-con`" :style="{ top: `${offset}%` }" @mousedown="handleMousedown">
+				<slot name="trigger">
+					<trigger mode="horizontal" />
+				</slot>
+			</div>
+			<div :style="{ top: `${offset}%` }" class="bottom-pane" :class="paneClasses">
+				<slot name="bottom" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import trigger from './components/trigger.vue'
+export default {
+	name: 'ShSplit',
+	components: {
+		trigger
+	},
+	props: {
+		modelValue: {
+			type: [Number, String],
+			default: 0.2
+		},
+		mode: {
+			type: String,
+			default: 'horizontal' // horizontal, vertical
+		},
+		min: {
+			type: [Number, String],
+			default: 0
+		},
+		max: {
+			type: [Number, String],
+			default: 0.6
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		dividerText: {
+			type: String,
+			default: ''
+		},
+		loading: {
+			type: Boolean
+		},
+		loadingText: {
+			type: String,
+			default: ''
+		},
+		loadingType: {
+			type: String,
+			default: '2'
+		}
+	},
+	emits: ['update:modelValue', 'move-start', 'moveing', 'move-end'],
+	data() {
+		return {
+			offset: 0,
+			oldOffset: 0,
+			isMoving: false,
+			computedMin: 0,
+			computedMax: 0,
+			currentValue: this.modelValue
+		}
+	},
+	computed: {
+		prefix() {
+			return 'sh-split'
+		},
+		paneClasses() {
+			return [
+				`${this.prefix}-pane`,
+				{
+					[`${this.prefix}-pane-moving`]: this.isMoving
+				}
+			]
+		},
+		isHorizontal() {
+			return this.mode === 'horizontal'
+		},
+		anotherOffset() {
+			return 100 - this.offset
+		},
+		valueIsPx() {
+			return typeof this.modelValue === 'string'
+		},
+		offsetSize() {
+			return this.isHorizontal ? 'offsetWidth' : 'offsetHeight'
+		}
+	},
+	watch: {
+		modelValue(val) {
+			this.resetOffset(val)
+		}
+	},
+	created() {},
+	mounted() {},
+	beforeUnmount() {},
+	methods: {
+		px2percent(numerator, denominator) {
+			return parseFloat(numerator) / parseFloat(denominator)
+		},
+		getComputedThresholdValue(type) {
+			let size = this.$refs.splitWrap[this.offsetSize]
+			if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type]
+			else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type]
+		},
+		getMin(value1, value2) {
+			if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
+			else return Math.min(value1, value2)
+		},
+		getMax(value1, value2) {
+			if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
+			else return Math.max(value1, value2)
+		},
+		getAnotherOffset(value) {
+			let res = 0
+			if (this.valueIsPx) res = `${this.$refs.splitWrap[this.offsetSize] - parseFloat(value)}px`
+			else res = 1 - value
+			return res
+		},
+		handleMove(e) {
+			let pageOffset = this.isHorizontal ? e.pageX : e.pageY
+			let offset = pageOffset - this.initOffset
+			let outerWidth = this.$refs.splitWrap[this.offsetSize]
+			let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : this.px2percent(outerWidth * this.oldOffset + offset, outerWidth)
+			let anotherValue = this.getAnotherOffset(value)
+			if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin)
+			if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax))
+			e.atMin = this.currentValue === this.computedMin
+			e.atMax = this.valueIsPx ? this.getAnotherOffset(this.currentValue) === this.computedMax : this.getAnotherOffset(this.currentValue).toFixed(5) === this.computedMax.toFixed(5)
+			this.emitValue(value)
+			this.$emit('moveing', e)
+		},
+		handleUp() {
+			this.isMoving = false
+			this.$vUtils.offListener(document, 'mousemove', this.handleMove)
+			this.$vUtils.offListener(document, 'mouseup', this.handleUp)
+			this.$emit('move-end')
+		},
+		handleMousedown(e) {
+			this.initOffset = this.isHorizontal ? e.pageX : e.pageY
+			this.oldOffset = this.currentValue
+			this.isMoving = true
+			this.$vUtils.onListener(document, 'mousemove', this.handleMove)
+			this.$vUtils.onListener(document, 'mouseup', this.handleUp)
+			this.$emit('move-start')
+		},
+		computeOffset() {
+			this.computedMin = this.getComputedThresholdValue('min')
+			this.computedMax = this.getComputedThresholdValue('max')
+			this.offset = ((this.valueIsPx ? this.px2percent(this.currentValue, this.$refs.splitWrap[this.offsetSize]) : this.currentValue) * 10000) / 100
+			return this.$nextTick()
+		},
+		resetOffset(val) {
+			if (val !== this.currentValue) {
+				this.currentValue = val
+				this.computeOffset()
+			}
+		},
+		emitValue(value) {
+			this.resetOffset(value)
+			this.$emit('update:modelValue', value)
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+$box-shadow: var(--box-shadow);
+$trigger-bar-background: rgba(23, 35, 61, 0.25);
+$trigger-background: #f8f8f9;
+$trigger-width: 6px;
+$trigger-bar-width: 4px;
+$trigger-bar-offset: ($trigger-width - $trigger-bar-width) / 2;
+$trigger-bar-interval: 3px;
+$trigger-bar-weight: 1px;
+$trigger-bar-con-height: ($trigger-bar-weight + $trigger-bar-interval) * 8;
+
+.sh-split {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.layout-loader {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.4);
+		transition: opacity 0.65s;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		font-size: 15px;
+		color: #fff;
+		z-index: 100;
+	}
+	&-pane {
+		position: absolute;
+		overflow: auto;
+		&.left-pane,
+		&.right-pane {
+			top: 0;
+			bottom: 0;
+		}
+		&.left-pane {
+			left: 0;
+			margin-right: $trigger-bar-width;
+		}
+		&.right-pane {
+			right: 0;
+			margin-left: $trigger-bar-width;
+		}
+		&.top-pane,
+		&.bottom-pane {
+			left: 0;
+			right: 0;
+		}
+		&.top-pane {
+			top: 0;
+			margin-bottom: $trigger-bar-width;
+		}
+		&.bottom-pane {
+			bottom: 0;
+			margin-top: $trigger-bar-width;
+		}
+		&-moving {
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+		}
+	}
+	&-trigger {
+		border: 1px solid var(--vxe-border-radius);
+		&-con {
+			position: absolute;
+			transform: translate(-50%, -50%);
+			z-index: 10;
+		}
+		&-bar-con {
+			position: absolute;
+			overflow: hidden;
+			&.vertical {
+				left: $trigger-bar-offset;
+				top: 50%;
+				height: $trigger-bar-con-height;
+				transform: translate(0, -50%);
+			}
+			&.horizontal {
+				left: 50%;
+				top: $trigger-bar-offset;
+				width: $trigger-bar-con-height;
+				transform: translate(-50%, 0);
+			}
+		}
+		&-vertical {
+			width: $trigger-width;
+			height: 100%;
+			background: $trigger-background;
+			border-top: none;
+			border-bottom: none;
+			cursor: col-resize;
+			.sh-split-trigger-bar {
+				width: $trigger-bar-width;
+				height: 1px;
+				background: $trigger-bar-background;
+				float: left;
+				margin-top: $trigger-bar-interval;
+			}
+		}
+		&-horizontal {
+			height: $trigger-width;
+			width: 100%;
+			background: $trigger-background;
+			border-left: none;
+			border-right: none;
+			cursor: row-resize;
+			.sh-split-trigger-bar {
+				height: $trigger-bar-width;
+				width: 1px;
+				background: $trigger-bar-background;
+				float: left;
+				margin-right: $trigger-bar-interval;
+			}
+		}
+	}
+	&-horizontal {
+		> .sh-split-trigger-con {
+			top: 50%;
+			height: 100%;
+			width: $trigger-width;
+		}
+	}
+	&-vertical {
+		> .sh-split-trigger-con {
+			left: 50%;
+			height: $trigger-width;
+			width: 100%;
+		}
+	}
+	.no-select {
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
+}
+</style>