vue如何实现拖动左侧导航栏变大变小

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