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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue实现导航栏菜单

    本文实例为大家分享了Vue实现导航栏菜单的具体代码,供大家参考,具体内容如下 这里是刚学习vue的时候,没有用vue的任何UI组件库写的导航栏菜单. menu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航栏左</title> <link rel="stylesheet" href="css/

  • vue使用ElementUI时导航栏默认展开功能的实现

    本文主要参考: http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了.可以在上边的网站上看到. 现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容. 具体操作是这样的: <script src="//unpkg.com/vue/dist/vue.js"></script> <scr

  • VUE 实现滚动监听 导航栏置顶的方法

    HTML 非重点的代码,比如样式啥的,我就不放上来了,一笔带过 简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解 <div :style="{ paddingBottom: paddingBottom}"> <header>资源信息</header> <div> <!-- 公司信息 浏览量 --> </div> <div id="fixedBar" :class=&quo

  • vue elementUI使用tabs与导航栏联动

    不使用tabs标签页时,点击导航菜单,router-view映射相应的组件即可显示页面.但我们想在点击导航栏时在tabs中映射相应的组件,这就需要使用tabs组件 在slider.vue中点击路由后,把当前选择的路由@select使用bus传出去 <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color=

  • vue2.0 elementUI制作面包屑导航栏

    Main.js var routeList = []; router.beforeEach((to, from, next) => { var index = -1; for(var i = 0; i < routeList.length; i++) { if(routeList[i].name == to.name) { index = i; break; } } if (index !== -1) { //如果存在路由列表,则把之后的路由都删掉 routeList.splice(index

  • Vue实现导航栏点击当前标签变色功能

    本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码,供大家参考,具体内容如下 1.效果 2.所有代码 <template> <div class="now-time"> <div class="timebox"> <a href="#" rel="external nofollow" v-for="(item,index) in nowTime" v

  • vue实现导航栏效果(选中状态刷新不消失)

    Vue导航栏 用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题.也可以选择自适应屏幕.看一下效果,底部的图标全是UI给的选中和未选中样式的图片,根据公司要求,你也可能会用fontsize去写.(全部代码黏贴到本文的最后面了) 1.首先把这些小图片放到src/assets路径下面(自动base64编码) 2.在data()里边定义一个选中对应的变量isSelect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未

  • vue设置导航栏、侧边栏为公共页面的例子

    首先,项目结构如下: 想要让导航栏.侧边栏变为公共页面,则要在App.vue页面中加入.假设已经有了Header.vue和Left.vue,这里就不贴出来了,App.vue代码如下: <template> <div id="app"> <!-- 其他页 --> <el-container > <el-header> <!-- 导航栏 --> <header-nav></header-nav>

  • vue实现nav导航栏的方法

    每一个网页项目都少不了导航栏,通过原始的方法基本上都是可以写出来的.但是要写出代码量少,冗余度低的代码就要动脑子思考一下了. 最近写了一个百度地图的项目,要求底部有一个导航栏.具体如下图: 首先,拿到了底部导航栏的所有图标图片,图片都有两种.灰色的代表未选中,选中的用带样色的图片替换. 先看一下,组件中 html结构:通过vue提供的v-for方法,进行遍历显示footNav这个数组.数组里边存放着{title:"银行",url:" ",url1:" &q

  • vue router仿天猫底部导航栏功能

    首先把天猫的导航贴出来,里面包括精选.品牌.会员.购物车.我五个导航及对应的图标. 分析: 1.图标的获取 进入阿里巴巴矢量图标库,网址  http://www.iconfont.cn. 点击官方图标库,选择天猫图标库,选中放入购物车. 点击添加至项目,点击创建新项目按钮,创建tianmao项目,点击确定. 此时会有查看在线链接和下载至本地两种方式,我选择第一种,因为后期如果要添加小图标的话,只需要重新生成在线链接,然后更新link即可 复制链接到index.html的link标签内,具体为 <

随机推荐