Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to drag the left navigation bar by vue to make it bigger and smaller

2025-04-07 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

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

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report