拖动元素边缘改变宽度
最近有个需求,需要可以手动拖动侧边栏菜单,改变其宽度。如下:
要完成这个功能,我们需要了解以下前端知识:
- 鼠标按下、抬起事件(mousedown、mouseup)
- 鼠标移动事件(mousemove)
- 鼠标按下时在屏幕上的位置 clientX
- 鼠标hover到元素上鼠标样式
- 为了使调整过程比较顺滑,需要用到css transition
好,差不多了,开整。
添加页面元素
<template>
<div class="m_wrapper">
<div class="left">
<div class="side_bar">
Side Menu
<div class="handle"></div>
</div>
</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos error illum laboriosam laudantium natus quaerat tempora voluptatibus! Beatae dolor doloribus ex facere, iste iure maiores perferendis perspiciatis qui vel. Eligendi?</div>
</div>
</template>
添加元素样式
<style scoped>
.m_wrapper {
display: flex;
padding: 10px;
user-select: none;
}
.m_wrapper .side_bar {
width: 250px;
height: 300px;
background-color: rgba(13, 202, 240, 0.32);
position: relative;
transition: width linear 100ms;
box-sizing: border-box;
}
.m_wrapper .right {
margin-left: 10px;
border: 1px solid #ccc;
}
.handle {
height: 100%;
width: 2px;
position: absolute;
right: -1px;
top: 0;
transition: all linear 200ms;
}
.handle:hover {
background-color: #4578FF;
cursor: col-resize;
}
</style>
添加鼠标移动逻辑
<script>
export default {
name: "MouseMove",
mounted() {
let th = this
// 通过鼠标按下事件来监听鼠标移动事件
document.addEventListener('mousedown', function (e) {
th.x = e.clientX
document.addEventListener('mousemove', th.move)
})
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', th.move)
})
this.target = document.querySelector('.side_bar')
},
data() {
return {
target: '',
x: '',
}
},
methods: {
move(e) {
if (e.clientX - this.target.offsetLeft> 400) {
this.target.style.width = '400px'
} else if (e.clientX - this.target.offsetLeft<200) {
this.target.style.width = '200px'
} else {
this.target.style.width = e.clientX - this.target.offsetLeft + 'px'
}
},
}
}
</script>
web开发总结
不积跬步无以至千里
推荐阅读
onMounted is called when there is no active component 已解决
If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
来了老弟阅读 149
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json
谭光志赞 34阅读 20.7k评论 9
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 21阅读 2.2k评论 3
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...
XboxYan赞 23阅读 1.6k评论 1
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 2k
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。
csRyan赞 26阅读 3.3k评论 1
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...
wuwhs赞 17阅读 2.4k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。