代碼

<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>

結果