<template>
? <div>
? ? <div class="top">頂部導(dǎo)航</div>
? ? <div id="left">
? ? ? <div id="menu">
? ? ? ? <span>左側(cè)側(cè)邊欄</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');
? ? //設(shè)置最大/最小寬度
? ? var max_width = 600,
? ? ? min_width = 100;
? ? //記錄鼠標(biāo)相對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;
? ? }
? ? //綁定鼠標(biāo)按下事件
? ? drapLine.onmousedown = function (e) {
? ? ? var e = e || window.event;
? ? ? //阻止默認(rèn)事件
? ? ? 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設(shè)置
? ? ? ? localStorage.setItem('sliderWidth', left.style.width)
? ? ? };
? ? }
? },
? methods: {
? ??
? },
? watch: {
? ??
? },
? data() {
? ? return {
? ? ??
? ? }
? }
}
</script>