这篇文章给大家分享的是有关vue如何实现拖动左侧导航栏变大变小的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
具体内容如下
计算
安全
数据库
网络和加速
企业服务
<template>
<div>
<div class="top">顶部导航</div>
<div id="left">
<div id="menu">
<span>左侧侧边栏</span>
</div>
<div id="drap-line"></div>
</div>
<div id="right">
右边的div
</div>
</div>
</template><style type="text/css">
* {margin: 0;padding: 0;}
html,body {height: 100%;text-align: center;}
body {position: relative;}
.top {width: 100%;height: 88px;background-color: #ccc;}
#left {position: absolute;top: 88px;right: 0;bottom: 0;left: 0;width: 220px;}
#menu {width: 100%;height: 100%;background-color: red;}
#drap-line {position: absolute;top: 0;right: 0;width: 4px;height: 100%;background-color: #999;cursor: e-resize;}
#right {position: absolute;top: 88px;right: 0;bottom: 0;left: 220px;}
</style>
<script>
export default {
mounted() {
//获取dom
var drapLine = document.getElementById('drap-line');
var left = document.getElementById('left');
var right = document.getElementById('right');
//设置最大/最小宽度
var max_width = 600,
min_width = 100;
//记录鼠标相对left盒子x轴位置
var mouse_x = 0;
var history_width = localStorage.getItem('sliderWidth');
if (history_width) {
left.style.width = history_width;
right.style.left = history_width;
}
//绑定鼠标按下事件
drapLine.onmousedown = function (e) {
var e = e || window.event;
//阻止默认事件
e.preventDefault();
mouse_x = e.clientX - left.offsetWidth;
document.onmousemove = function (e) {
var e = e || window.event;
var left_width = e.clientX - mouse_x;
left_width = left_width < min_width ? min_width : left_width;
left_width = left_width > max_width ? max_width : left_width;
left.style.width = left_width + 'px';
right.style.left = left_width + 'px';
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
//localStorage设置
localStorage.setItem('sliderWidth', left.style.width)
};
}
},
methods: {
},
watch: {
},
data() {
return {
}
}
}
</script>感谢各位的阅读！关于“vue如何实现拖动左侧导航栏变大变小”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
