vue实现div多选全选功能_使用TypeScript给Vue 3.0写一个指令实现组件拖拽

最近在用vue3重构后台的一个功能。一个弹窗组件,弹出一个表单。然后点击提交。

早上运维突然跑过来问我,为啥弹窗挡住了下边的表格的数据,我添加的时候,都没法对照表格来看了。你必须给我解决一下。

我参考了一下几大Vue的ui组件库。发现element iview antv。好像都没这个功能。为啥运维需要这个功能??

但是没办法,只能整一个就是了。

做之前本来想直接做到dialog这个组件中。但是又担心后面其他的组件会用到。于是决定把拖拽功能做到指令中。

55a13a74c0861421d5b7c497b7a5c8cd.png

整个功能点如图。鼠标在拖拽区域拖动,整个对话框在浏览器可视范围内移动。

Drag指令主要实现思路

  1. 在指令挂载的时候,监听当前html节点的鼠标点击事件

  2. 然后在点击当前html节点的时候,判断是否点击在drag-target这个class所在的子节点上。如果是,那么触发document鼠标移动事件。然后计算出鼠标移动距离,对应修改弹出框的left值和top值。并记录下当前按下的位置x和y

    let x = e.clientX;let y = e.clientY;
  3. 如何限制拖动的节点只能在屏幕内移动,不能移动出屏幕呢?

    drag指令完整代码

    import { App } from 'vue';export default {    install(Vue: App<Element>) {        Vue.directive('drag', {            mounted(el: HTMLElement, bind) {                el.onmousedown = (e) => {                    let elLeft = el.offsetLeft;                    let elTop = el.offsetTop;                    let dom = <HTMLElement>e.target;                    if (dom.classList.contains('drag-target')) {                        let x = e.clientX;                        let y = e.clientY;                        document.onmousemove = (move: MouseEvent) => {                            let bodyW = document.body.clientWidth;                            let bodyH = document.body.clientHeight;                            let left = elLeft - (x - move.clientX);                            if (left < 0) {                                left = 0;                            }                            if (left > bodyW - el.offsetWidth) {                                left = bodyW - el.offsetWidth;                            }                            el.style.left = left + 'px'                            let top = elTop - (y - move.clientY);                            if (top < 0) {                                top = 0;                            }                            if (top > bodyH - el.offsetHeight) {                                top = bodyH - el.offsetHeight                            }                            el.style.top = top + 'px'                            document.onmouseup = (up: MouseEvent) => {                                document.onmousemove = null;                                document.onmouseup = null                            }                            if (window.getSelection()) {                                window.getSelection()?.removeAllRanges()                            }                        }                    }                }            },            unmounted(el, bind) {                el.onmousedown = null;            }        })    }}

    使用

    import DragDirective from './DragDirective'createApp(App).use(DragDirective).mount('#app')

    注册指令到Vue App上,然后在需要移动的html节点上加上 v-drag ,并在触发拖拽的子节点的class上,加上drag-target

    <div          class="f-dialog"          v-if="show"          v-drag          ref="dialog"          :style="{ left: data.left + 'px' }"        >          <div class="f-dialog-header drag-target">            <slot name="header">              <span>{{ title }}span>            slot>            <f-icon              icon="icon-close"              class="f-modal-close"              @click="close(false)"            >f-icon>          div>          <div class="f-dialog-content">            <slot>slot>          div>          <div class="f-dialog-footer">            <slot name="footer">              <button @click="close(true)">确定button>              <button @click="close(false)">取消button>            slot>          div>        div>

    效果图

    45dd73b816689f1a2285d32aa809d9e1.gif

    1. 限制left不能小于0,在定位为position: fixed 的时候,left如果小于0,那么html节点的左侧肯定已经在显示区域外了。那么我们不能让left小于0

      let bodyW = document.body.clientWidth;let bodyH = document.body.clientHeight;let left = elLeft - (x - move.clientX);if (left < 0) {    left = 0;}
    2. 限制left不能大于可视区域的宽度减去当前html节点的宽度,如果left大于这个宽度,那么当前html节点肯定右侧已经处于显示区域的右侧外边了

      if (left > bodyW - el.offsetWidth) {    left = bodyW - el.offsetWidth;}
    3. 上下拖拽位置限制和左右拖拽限制思路是一样,只要保证top的值大于0且小于屏幕可视范围的高度减去当前html节点的高度,那么拖动就无法拖出屏幕了。

      let top = elTop - (y - move.clientY);if (top < 0) {      top = 0;}if (top > bodyH - el.offsetHeight) {      top = bodyH - el.offsetHeight}

更多干货,以及本文的示例代码, 欢迎关注我的公众号: 青城同学 回复 拖拽代码 获取下载地址当然也可以扫码

cc99ae36e5aeeb384df12d3966aaffc8.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于vue实现拖拽宽度的菜单,可以使用vuedraggable插件和vue-resizable插件。 vuedraggable插件可以实现拖拽排序的功能,而vue-resizable插件可以实现拖拽改变元素大小的功能。 以下是一个简单的实现示例: 1. 安装vuedraggable和vue-resizable插件 ``` npm install vuedraggable vue-resizable ``` 2. 在组件中引入插件并初始化 ``` <template> <div class="menu"> <vue-draggable v-model="menuItems"> <div v-for="(item, index) in menuItems" :key="index" class="menu-item"> <vue-resizable :resizable="true" :on-resize-stop="resize" :max-width="200" :min-width="100"> {{ item }} </vue-resizable> </div> </vue-draggable> </div> </template> <script> import draggable from 'vuedraggable' import resizable from 'vue-resizable' export default { components: { 'vue-draggable': draggable, 'vue-resizable': resizable }, data () { return { menuItems: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'] } }, methods: { resize (event) { console.log(event) } } } </script> ``` 在上面的代码中,使用vuedraggable组件来包裹菜单项,使用vue-resizable组件来包裹每个菜单项,并设置了最大和最小宽度,并在on-resize-stop事件中调用了resize方法。 3. 样式设置 为了使菜单项可拖拽和可改变大小,需要为其设置一些基本样式: ``` .menu { display: flex; flex-wrap: wrap; justify-content: flex-start; } .menu-item { display: flex; align-items: center; justify-content: center; margin: 10px; padding: 10px; background-color: #ccc; border: 1px solid #000; cursor: move; } ``` 在上面的样式中,设置了菜单项为flex布局,并设置了一些基本样式,如背景色、边框等。 这样就可以实现一个简单的可拖拽和可改变大小的菜单了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值