这篇文章给大家分享的是有关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如何实现拖动左侧导航栏变大变小”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
