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

This article mainly introduces how to implement the draggable menu in vue.js. It is very detailed and has a certain reference value. Friends who are interested must read it!

Vue.js implements draggable menus: [import "@ / assets/second.css"; export default {name: "HelloWorld", directives: {move (el, bindings) {...].

The operating environment of this paper: windows10 system, vue.js 2.9, thinkpad T480 computer.

Before giving the formal implementation code, we need to know a little bit about it.

Knowledge point 1:

Custom directive directive in vue

/ / register a global custom directive `v-focus`Vue.directive ('focus', {/ / when the bound element is inserted into the DOM. Inserted: function (el) {/ / focus element el.focus ()}) / / registers the local custom instruction directives: {focus: {/ / the definition of the instruction inserted: function (el) {el.focus ()}} / / We use local here

Point 2: js

Onmousedown: the horizontal coordinate of the mouse pointer relative to the browser page (or client area) when the mouse is pressed clientX: get the node offsetWidth through id: get the final width onmousemove of the box Mouse movement event onmouseup: mouse release event

Effect picture:

Page code:

Adaptive size on the right side of the sidebar menu area, yellow is the drag button import "@ / assets/second.css"; export default {name: "HelloWorld", directives: {move (el, bindings) {el.onmousedown = function (e) {var init = e.clientX; var parent = document.getElementById ("silderLeft"); var initWidth = parent.offsetWidth _ document.onmousemove = function (e) {var end = e.clientX; var newWidth = end-init + initWidth; parent.style.width = newWidth + "px";}; _ document.onmouseup = function () {_ document.onmousemove = _ document.onmouseup = null;};} }}, data () {return {msg: "I am the second page"};}, methods: {}, mounted () {}, created () {}, updated () {}}

Style Code:

.myBox {width: 100% position; height: 700px; border: 1px solid red; display: flex;} # silderLeft {width: 250px; height: 100%; background-color: # 999; position: relative; / * overflow-y: auto; * /} / * drag bar * / .moveBtn {height: 100%; width: 10px; / * opacity: 0; * / position: absolute; right: 0px Top: 0; cursor: col-resize; background-color: yellow;} .menuList {background-color: yellowgreen; / * height: 120%; * /} .silderRight {height: 100%; background-color: sandybrown; flex: 1;}

You can modify the custom command to set a minimum drag width

Directives: {move (el, bindings) {el.onmousedown = function (e) {var init = e.clientX; console.log ('init',init); var parent = document.getElementById ("sidebar"); var initWidth = parent.offsetWidth; _ document.onmousemove = function (e) {var end = e.clientX / / end-init indicates the distance of mouse movement / / end is the width of mouse movement and can be used to set the minimum width if (end > 250mm) {var newWidth = end-init + initWidth; parent.style.width = newWidth + "px";} else {end = 250 / / minimum width parent.style.width = 242 + "px";}}; _ document.onmouseup = function () {_ document.onmousemove = _ document.onmouseup = null;} above is all the content of the article "how to implement the draggable menu in vue.js". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.