vue一个超简单的菜单栏伸缩示例

代码

<template><div class="container"><!-- 左侧区域 --><div class="left-side" :style="{ width: leftWidth + 'px' }">左侧内容</div><!-- 右侧区域 --><div class="right-side" :style="{ left: leftWidth + 'px' }"><div class="content"><button @click="toggleLeftWidth">切换左侧宽度</button><p>右侧内容区域，占据剩余空间</p></div></div></div>
</template><script>
export default {data() {return {leftWidth: 200, // 初始宽度200pxisCollapsed: false}},methods: {toggleLeftWidth() {this.isCollapsed = !this.isCollapsed;this.leftWidth = this.isCollapsed ? 64 : 200;}}
}
</script><style lang="less" scoped>
.container {position: relative;width: 100%;height: 100vh;overflow: hidden;.left-side {position: fixed;left: 0;top: 0;height: 100%;background-color: blue;transition: width 0.3s ease;padding: 20px;box-sizing: border-box;}.right-side {position: fixed;top: 0;right: 0;bottom: 0;background-color: red;transition: left 0.3s ease;padding: 20px;box-sizing: border-box;overflow: auto;border-left: 1px solid #ddd;}
}button {padding: 8px 16px;background-color: #42b983;color: white;border: none;border-radius: 4px;cursor: pointer;margin-bottom: 20px;
}button:hover {background-color: #3aa876;
}
</style>

结果