vue.js实现可拖拽菜单的方法：【import @/assets/second.css;export default {name: helloworld,directives: {move(el, bindings) {...】。
本文操作环境：windows10系统、vue.js 2.9、thinkpad t480电脑。
在给出正式的实现代码之前，我们要先来了解一点相关知识点。
知识点一：
vue中的自定义指令 directive
// 注册一个全局自定义指令 `v-focus`vue.directive('focus', { // 当被绑定的元素插入到 dom 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})// 注册局部自定义指令directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }}// 在此我们用的是局部
知识点二：js
onmousedown ：鼠标按下事件 clientx ：时鼠标指针相对于浏览器页面(或客户区)的水平坐标 document.getelementbyid ：通过id获取节点 offsetwidth ：获取的是盒子最终的宽 onmousemove ：鼠标移动事件 onmouseup ：鼠标释放事件
效果图：
页面代码：
<template> <el-container> <el-main> <div class="mybox"> <div id="silderleft"> <div class="menulist">侧栏菜单区</div> <div class="movebtn" v-move></div> </div> <div class="silderright">右边自适应大小,黄色的为拖拽的按钮</div> </div> </el-main> </el-container></template><script>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: "我是第二页" }; }, methods: {}, mounted() {}, created() {}, updated() {}};</script><!-- add "scoped" attribute to limit css to this component only --><style scoped></style>
样式代码：
.mybox{ width: 100%;; height: 700px; border: 1px solid red; display: flex;}#silderleft{ width: 250px; height: 100%; background-color: #999; position: relative; /* overflow-y: auto; */}/* 拖动条 */.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;}
可以修改自定义命令,设置一个最小拖拽宽度
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表示鼠标移动的距离 // end为鼠标移动的宽度,可用于设置最小宽度 if(end > 250){ var newwidth = end - init + initwidth; parent.style.width = newwidth + "px"; }else{ end = 250; // 最小宽度242 parent.style.width = 242 + "px"; } }; document.onmouseup = function() { document.onmousemove = document.onmouseup = null; }; }; } }
推荐学习：php培训
以上就是vue.js如何实现可拖拽菜单的详细内容。