本文实例为大家分享了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>