vue.js如何实现可拖拽菜单

 5233

vue.js实现可拖拽菜单的方法:【import "@/assets/second.css";export default {name: "HelloWorld",directives: {move(el, bindings) {...】。


vue.js如何实现可拖拽菜单


在给出正式的实现代码之前,我们要先来了解一点相关知识点。


知识点一:

vue中的自定义指令 directive

  1. // 注册一个全局自定义指令 `v-focus`
  2. Vue.directive('focus', {
  3.   // 当被绑定的元素插入到 DOM 中时……
  4.   inserted: function (el) {
  5.     // 聚焦元素
  6.     el.focus()
  7.   }
  8. })
  9.  
  10. // 注册局部自定义指令
  11.  
  12. directives: {
  13.   focus: {
  14.     // 指令的定义
  15.     inserted: function (el) {
  16.       el.focus()
  17.     }
  18.   }
  19. }
  20. // 在此我们用的是局部

知识点二:js

  1. onmousedown             :鼠标按下事件
  2. clientX                 :时鼠标指针相对于浏览器页面(或客户区)的水平坐标
  3. document.getElementById :通过id获取节点
  4. offsetWidth             :获取的是盒子最终的宽
  5. onmousemove             :鼠标移动事件 
  6. onmouseup               :鼠标释放事件

效果图:


vue.js如何实现可拖拽菜单


vue.js如何实现可拖拽菜单


页面代码:

  1. <template>
  2.   <el-container>
  3.     <el-main>
  4.       <div class="myBox">
  5.         <div id="silderLeft">
  6.           <div class="menuList">侧栏菜单区</div>
  7.           <div class="moveBtn" v-move></div>
  8.         </div>
  9.         <div class="silderRight">右边自适应大小,黄色的为拖拽的按钮</div>
  10.       </div>
  11.     </el-main>
  12.   </el-container>
  13. </template>
  14.  
  15. <script>
  16. import "@/assets/second.css";
  17. export default {
  18.   name: "HelloWorld",
  19.   directives: {
  20.     move(el, bindings) {
  21.       el.onmousedown = function(e) {
  22.         var init = e.clientX;
  23.         var parent = document.getElementById("silderLeft");
  24.         var initWidth = parent.offsetWidth;
  25.         document.onmousemove = function(e) {
  26.           var end = e.clientX;
  27.           var newWidth = end - init + initWidth;
  28.           parent.style.width = newWidth + "px";
  29.         };
  30.         document.onmouseup = function() {
  31.           document.onmousemove = document.onmouseup = null;
  32.         };
  33.       };
  34.     }
  35.   },
  36.   data() {
  37.     return {
  38.       msg: "我是第二页"
  39.     };
  40.   },
  41.   methods: {},
  42.   mounted() {},
  43.   created() {},
  44.   updated() {}
  45. };
  46. </script>
  47.  
  48. <!-- Add "scoped" attribute to limit CSS to this component only -->
  49. <style scoped>
  50. </style>

样式代码:

  1. .myBox{
  2.     width: 100%;;
  3.     height: 700px;
  4.     border: 1px solid red;
  5.     display: flex;
  6. }
  7. #silderLeft{
  8.     width: 250px;
  9.     height: 100%;    
  10.     background-color: #999;
  11.     position: relative;
  12.     /* overflow-y: auto; */
  13. }
  14. /* 拖动条 */
  15. .moveBtn{
  16.     height: 100%;
  17.     width: 10px;
  18.     /* opacity: 0; */
  19.     position: absolute;
  20.     right: 0px;
  21.     top: 0;
  22.     cursor: col-resize;
  23.     background-color: yellow;
  24. }
  25. .menuList{
  26.     background-color: yellowgreen;
  27.     /* height: 120%; */
  28. }
  29. .silderRight{
  30.     height: 100%;
  31.     background-color: sandybrown;
  32.     flex: 1;
  33. }

可以修改自定义命令,设置一个最小拖拽宽度

  1. directives: {
  2.   move(el, bindings) {
  3.     el.onmousedown = function(e) {
  4.       var init = e.clientX;
  5.       console.log('init',init);
  6.       var parent = document.getElementById("sidebar");
  7.       var initWidth = parent.offsetWidth;
  8.       document.onmousemove = function(e) {
  9.         var end = e.clientX;
  10.         // end - init表示鼠标移动的距离
  11.         // end为鼠标移动的宽度,可用于设置最小宽度
  12.         if(end > 250){
  13.           var newWidth = end - init + initWidth;
  14.           parent.style.width = newWidth + "px";
  15.         }else{
  16.           end = 250;
  17.           // 最小宽度242
  18.           parent.style.width = 242 + "px";
  19.         }
  20.       };
  21.       document.onmouseup = function() {
  22.         document.onmousemove = document.onmouseup = null;
  23.       };
  24.     };
  25.   }
  26. }



TAG标签:
本文网址:https://www.zztuku.com/detail-9572.html
站长图库 - vue.js如何实现可拖拽菜单
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐