乘风原创程序

  • vue实现拖动左侧导航栏变大变小
  • 2022/3/30 9:03:16
  • 本文实例为大家分享了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>