vue实现拖拽滑动分割面板

本文实例为大家分享了vue实现拖拽滑动分割面板的具体代码，供大家参考，具体内容如下

需求背景

左边是列表，右边是详情。 想更大范围的查看详情，所以要拖拽滑块，进行面板的分割

整体思路

  • 在布局上，采用flex布局，单位采用百分比。设置flex：1,让其自动伸缩
  • 滑动滑块，计算滑块在滑动过程中，占整个页面的百分比
  • 将百分比，通过动态样式赋值给列表页的宽度
  • 同时改变滑块的位置(也是百分比形式)
  • 其次就是在vue里对鼠标事件的使用

代码实现

在template里 写事件

@mousedown.prevent="mousedown"

在methods里写方法

/**
     * 按下鼠标
     */
      mousedown() {
        document.addEventListener('mousemove', this.handleMouseMove, false);
        document.addEventListener('mouseup', this.handleMouseUp, false);
    },
    /**
     * 按下滑动器，移动鼠标
     */
    handleMouseMove(e) {
      /**
       * 计算容器总宽度
       * 计算滑块到左边的距离
       * 计算偏移百分比: (滑块距离左边的距离 / 页面宽度) * 100
       * 传递移动百分比和距左边的距离
       */
      const clientRect = this.$refs.mainContent.getBoundingClientRect();
      const offset = e.pageX;
      const panelPercent = (offset / clientRect.width) * 100;
      this.panelPercent = panelPercent;
      this.mainContentWidth = offset;
      this.$refs.imgMove.style.left = panelPercent + '%';
      console.log('拖动中', this.panelPercent);
    },
    /**
     * 松开滑动器
     */
    handleMouseUp () {
      document.removeEventListener('mousemove', this.handleMouseMove, false);
    },

对边界处理

if (this.panelPercent < this.min) {
        this.panelPercent = this.min
      }
      if (this.panelPercent > this.max) {
        this.panelPercent = this.max
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现拖拽式分割布局

    Vue实现拖拽式分割布局

    本文实例为大家分享了Vue实现拖拽式分割布局的具体代码,供大家参考,具体内容如下 示例展示 代码 特地写了一个demo代码,可以直接复制下来运行 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width

  • vue 输入电话号码自动按3-4-4分割功能的实现代码

    输入框绑定 <input class="inputBox" type="phone" placeholder=" 请输入手机号" maxlength="13" v-model="phoneNum"/> 监听事件,每次号码发生改变时触发 大体的逻辑是:先比较号码变化前后的长度,判断是输入还是删除,如果是输入的话,利用正则表达式改变号码格式. watch: { phoneNum (newValue,

  • vue3 可拖动的左右面板分割组件实现

    vue3 可拖动的左右面板分割组件实现

    目录 分解组件 左侧面板 右侧面板 入参分解 props slots 具体实现 如何拖动呢? 事件监听 宽度处理 优化 bug git地址 最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,本文就整理一下,分享给大家,具体如下: 效果图 分解组件 整体使用flex布局 左侧面板 面板的具体内容通过slot具名插槽传入. title通过prop传入 可拖动,为了保证内容样式不会被拖动所破坏,对面板的宽度设定最大值/最小值 右侧面板 右侧面板宽度随着左侧面板的宽度变化而

  • Vue实现数字输入框中分割手机号码的示例

    需求 在移动端弹出系统数字键盘,输入手机号码的时候,使用344形式分割. 分析: 首先,如果要在移动端弹出数字键盘,并且还可以有空格,那么就要使用type="phone"的input框 如果要实现输入的时候增加空格,删除的时候减少空格,那么就要使用watch 手机号码为11位,加上两个空格,最多13位,因此要限定长度 代码实现 <body> <div id="app"> <!-- 类型为phone,最大长度为13 --> <

  • vue实现分割验证码效果

    vue实现分割验证码效果

    本文实例为大家分享了vue实现分割验证码效果的具体代码,供大家参考,具体内容如下 注:该代码存在问题,因为我maxlength =4 ,input 的宽度跟屏幕同宽,所以当我input 里面的length == 4 的时候,我的光标会超出屏幕,所以我在length == 4 的时候做了一个把光标放到第三个的处理,这种虽用户体验不好,也解了length==4的时候整个布局乱了的燃眉之急 上UI 图 上代码: vue <template>   <div>     <v-main

  • vuex Module将 store 分割成模块的操作

    由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每个模块拥有自己的 state.mutation.action.getter.甚至是嵌套子模块--从上至下进行同样方式的分割: const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, gette

  • vue代码分割的实现(codesplit)

    在vue单页应用中,若不做任何处理,所有vue文件会打包为一个文件,这个文件非常的大,造成网页在首次进入时比较缓慢.做了代码分割后,会将代码分离到不同的bundle中,然后进行按需加载这些文件,能够提高页面首次进入的速度,网站性能也能够得到提升. 一.未分割时浏览器加载js的情况 可以看到,只有一个app.js,大小为595kb,若在实际的大型项目中,这个大小会更大 二.做了代码分割后浏览器加载js情况 发现多了一个js文件,且app.js大小也变小了,下面看看点击到其他页面时加载情况 点到其他

  • vue实现拖拽滑动分割面板

    本文实例为大家分享了vue实现拖拽滑动分割面板的具体代码,供大家参考,具体内容如下 需求背景 左边是列表,右边是详情. 想更大范围的查看详情,所以要拖拽滑块,进行面板的分割 整体思路 在布局上,采用flex布局,单位采用百分比.设置flex:1,让其自动伸缩 滑动滑块,计算滑块在滑动过程中,占整个页面的百分比 将百分比,通过动态样式赋值给列表页的宽度 同时改变滑块的位置(也是百分比形式) 其次就是在vue里对鼠标事件的使用 代码实现 在template里 写事件 @mousedown.preve

  • vue使用Split封装通用拖拽滑动分隔面板组件

    vue使用Split封装通用拖拽滑动分隔面板组件

    前言 手动封装一个类似Iview中的Split组件,可将一片区域,分割为可以拖拽调整宽度或高度的两部分区域,最终效果如下: 开始 基础布局 在vue工程中创建SplitPane组件,引入页面使用. <template> <div class="page"> <SplitPane /> </div> </template> <script> import SplitPane from './components/sp

  • vue实现拖拽的简单案例 不超出可视区域

    本文实例为大家分享了vue实现拖拽x效果的具体代码,供大家参考,具体内容如下 实现拖拽之前,先了解几个小常识: 这两种获取鼠标坐标的方法,区别在于基于的对象不同: pageX和pageY获取的是鼠标指针距离文档(HTML)的左上角距离,不会随着滚动条滚动而改变: clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离,会随着滚动条滚动而改变: 1.clientX : 是用来获取鼠标点击的位置距离 当前窗口 左边的距离 2.clientY: 是用来获取鼠标点

  • Vue 可拖拽组件Vue Smooth DnD的使用详解

    Vue 可拖拽组件Vue Smooth DnD的使用详解

    目录 简介和 Demo 展示 API: Container 属性 生命周期 回调 事件 API: Draggable 实战 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vue 可拖拽组件.安利一下~ Vue Smooth DnD 是一个快速.轻量级的拖放.可排序的 Vue.js 库,封装了 smooth-dnd 库. Vue Smooth DnD 主要包含了两个组件,Container 和 Draggable,Container 包含可拖动的元素或组件,它的每一个子元

  • jquery实现鼠标拖拽滑动效果来选择数字的方法

    本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • Java实现的可选择及拖拽图片的面板功能【基于swing组件】

    Java实现的可选择及拖拽图片的面板功能【基于swing组件】

    本文实例讲述了Java实现的可选择及拖拽图片的面板功能.分享给大家供大家参考,具体如下: 今天在论坛上看到帖子希望能在 Swing 中实现像拖地图一样拖拽图片.这里是一个最简单的实现,提供了一个基本思路. import javax.swing.*; import javax.swing.filechooser.FileNameExtensionFilter; import java.awt.*; import java.awt.event.MouseEvent; import java.awt.

  • 基于Vue实现拖拽功能

    基于Vue实现拖拽功能

    本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下 效果图: HTML代码: <div id="box"> 位置 <br>x:{{val.x}} <br>y:{{val.y}} <div v-drag="greet" id="drag" :style="style"> //注意这里要通过指令绑定函数将当前元素的位置数据传出来 </div> &l

  • Vue.Draggable拖拽功能的配置使用方法

    本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下 使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from 'vuedraggable' 注册组件 components:{ draggable } vue的template代码如 <draggable v-model="itemlis" //开始移动方法 :move=

  • 基于Vue实现拖拽效果

    效果图 demo1.gif 分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可以继续实现我们的拖拽效果 clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 offsetY

随机推荐