Shulou(Shulou.com)06/01 Report--

This article is about how vue can make the left navigation bar bigger and smaller. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

specific contents are as follows

顶部导航 左侧侧边栏 右边的div * {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;}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

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 settings localStorage.setItem('sliderWidth', left.style.width) }; } }, methods: { }, watch: { }, data() { return { Thank you all for reading! About "vue how to realize drag left navigation bar bigger and smaller" this article is shared here, I hope the above content can have some help for everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.