vue 左侧栏拖拽右侧宽度不变；出现滚动条

最新推荐文章于 2024-08-27 15:16:52 发布

原创

最新推荐文章于 2024-08-27 15:16:52 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

demo地址:点击下载

其中封装了自定义指令及公共组件的左侧菜单,菜单效果为双击,可搜索子节点

用户需求,左侧菜单为一次加载出来;可以搜索树控件下所有的子菜单内容

1.左侧菜单可以自由拉宽缩小;右侧内容不变,本人用到的方法是右侧div中嵌入router-view才能做到不缩放

1.左侧菜单默认为200的宽;拉条为15的宽当小于200的时候右侧动态设置宽度,不让右侧空出来

```views
views
├─ AboutView.vue
└─ HomeView.vue

```
---

```components
components
└─ TreeCode
├─ index copy.vue
├─ index.json
└─ index.vue

```
---

```drag-move
drag-move
├─ index.js
└─ index.scss

```
---

上代码

router文件


import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    redirect: '/AboutView',
    children: [
      {
        path: 'AboutView',
        name: 'AboutView',
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

HomeView.vue文件

<!--
 * @Author: your name
 * @Date: 2022-04-22 22:14:46
 * @LastEditTime: 2022-04-23 14:05:33
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \my-project\src\views\HomeView.vue
-->
<template>
  <div class='only-container'>
    <div class='only-left-sidebar'>
      左侧栏
      <tree-code style="width: 100%;height:380px" type="comCode" @node-click="nodeClick" />
    </div>
    <div class='only-resize' title='收缩侧边栏' v-drag-move='{setWidth:setWidth}'>⋮</d