vue如何实现拖动左侧导航栏变大变小
导读：本文共1250.5字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 具体内容如下<template><div><divclass="top">顶部导航</div><divid="left"><divid="menu"><span>左侧侧边栏</span></... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。具体内容如下
<template><div><divclass="top">顶部导航</div><divid="left"><divid="menu"><span>左侧侧边栏</span></div><divid="drap-line"></div></div><divid="right">右边的div</div></div></template>
<styletype="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>exportdefault{mounted(){//获取domvardrapLine=document.getElementById('drap-line');varleft=document.getElementById('left');varright=document.getElementById('right');//设置最大/最小宽度varmax_width=600,min_width=100;//记录鼠标相对left盒子x轴位置varmouse_x=0;varhistory_width=localStorage.getItem('sliderWidth');if(history_width){left.style.width=history_width;right.style.left=history_width;}//绑定鼠标按下事件drapLine.onmousedown=function(e){vare=e||window.event;//阻止默认事件e.preventDefault();mouse_x=e.clientX-left.offsetWidth;document.onmousemove=function(e){vare=e||window.event;varleft_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> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
vue如何实现拖动左侧导航栏变大变小的详细内容，希望对您有所帮助，信息来源于网络。