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

2022年3月30日11:57:27
评论

本文实例为大家分享了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项目如何实现打包并且发布 实用技巧

Vue项目如何实现打包并且发布

如何将Vue项目打包并发布?我这边是测试发布到本地,不过步骤是一样的,步骤如下: 1、安装部署Nginx服务器。(类似Tomcat服务器) 说明:Nginx (engine x) 是一个高性能的HTT...
vue给单独组建的body添加类名 技术教程

vue给单独组建的body添加类名

近期项目需要实现在后台管理添加一个大屏统计页面,大屏弹窗用到elementui的 对话框、选择器等ui插件,因为默认的elementui的样式与大屏样式格格不入,所以我需要强制修改他的样式,那么我就想...
vue实现tab切换的放大镜效果 技术教程

vue实现tab切换的放大镜效果

本文实例为大家分享了vue实现tab切换的放大镜效果的具体代码,供大家参考,具体内容如下 废话不多说先看效果图 1.我这里并没有加遮罩层,如有需要请自行加上 2.图片建议使用4k高清图片,不然放大后模...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: