可伸缩区域

最新推荐文章于 2023-02-20 18:08:33 发布

北寻北爱

最新推荐文章于 2023-02-20 18:08:33 发布

阅读量45

点赞数

分类专栏： vue CSS 文章标签：前端

本文链接：https://blog.csdn.net/qq_43415562/article/details/125933869

版权

vue 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

可拖拽条

实现效果

在这里插入图片描述

实现代码

<style lang="scss" scope>
.aside {
	width: 18%;
	min-width: 260px;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	flex-grow: 0;
	position: relative;
	background-color: #fff;
	height: 100%;
	padding: 0;
}
.spliter {
	position: absolute;
	right: -6px;
	top: 0;
	height: 100%;
	cursor: col-resize;
	transition: all ease .2s;
	background-color: #f6f6f6;
	&:before {
		width: 6px;
		height: 9px;
		background-image: url('../drag-tips.svg');
		background-size: contain;
		background-repeat: no-repeat;
		content: '';
		position: absolute;
		top: 50%;
		margin-top: -5px;
	}
	&:hover {
		background-color: #eee;
	}
}
.content-wrap {
	flex: 1;
	padding-left: 6px;
}
<style>
<template>
	<div ref="aside" class="aside">可伸缩内容区</div>
	<div
		class="spliter"
		@dblclick="onDoubleBlindSlide"
		@mousedown="onBindSlide"
	/>
	<div ref="content-wrap" class="content-wrap">右侧内容区</div>
</template>
<script>
export default {
	methods: {
		onDoubleBlindSlide (e){
			const asideDOM = this.$refs['aside']
			cosnt width = '18%'
			asideDOM.style.flexBasis = width
		},
		onBindSlide (e) {
			cosnt pageX = e.clientX
			const contentDOM = this.$refs['content-wrap']
			contentDOM.style.userSelect = 'none'
			const asideDOM = this.$refs['aside']
			const width = asideDOM.offsetWidth
			document.onmousemove = mouseMoveEvent => {
				const result = width + (mouseMoveEvent .clientX - pageX)
				if (result < 100 || result > 1000) return
				asideDOM.style.flexBasis = `${result}px`
			}
			document.onmouseup = () => {
				contentDOM.style.userSelect = 'inherit'
				document.onmousemove = null
				document.onmouseup = null
			}
		}
	}
}
</script>