美文网首页
拖动元素边框 改变元素宽度

拖动元素边框 改变元素宽度

作者: Gaochengxin | 来源:发表于2022-09-06 18:22 被阅读0次
  • vue中 拖动元素边框 改变元素宽度

    先上效果图:

1837051-20200422151530576-1464241975[1].gif

如图所示,通过拖动来改变表单的宽度。
但实际上,这边并不是表单的边框,而是一个单独的组件。通过监听鼠标的down,move以及up事件。我们可以单独的写个组件handle.vue。

<template>
  <div class="x-handle" @mousedown="mouseDown"></div>
</template>

<script>
export default {
  name: "XHandle",
  data() {
    return {
      lastX: ""
    };
  },

  created() {
    document.addEventListener("mouseup", this.mouseUp);
  },

  destroyed() {
    document.removeEventListener("mouseup", this.mouseUp);
  },

  methods: {
    mouseDown(event) {
      document.addEventListener("mousemove", this.mouseMove);
      this.lastX = event.screenX;
    },
    mouseMove(event) {
      this.$emit("widthChange", this.lastX - event.screenX);
      this.lastX = event.screenX;
      console.log(this.lastX, "...", event.screenX);
    },
    mouseUp() {
      this.lastX = "";
      document.removeEventListener("mousemove", this.mouseMove);
    }
  }
};
</script>
<style lang="less">
.x-handle {
   2px;
  cursor: w-resize;
  z-index: 10;
  background: #ccc;
}
</style>

监听事件并this.$emit将值传给父组件,父组件通过传过来的值来动态的修改需要改变宽度的元素。
如效果图所示,写一个有需求组件,并引入handle组件

<div class='sss'>    
  <div  :style="{  width + 'px' }" ></div> // 这里是你自己需要改变宽度的组件
  <XHandle class="myxhandle" @widthChange="widthChange" />
</div>
</pre>

<script>
import XHandle from "@/components/Xhandle";
export default {
  data() {
    return {
       700,
    };
  },
  components: {
    XHandle
  },

  methods: {
    widthChange(movement) {
      console.log(movement, "~~~");
      this.width -= movement;
      if (this.width < 300) {
        this.width = 300;
      }
      if (this.width > 700) {
        this.width = 700;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.sss {
  display: flex;
}
</style>

这里将需要改变宽度的元素给一个双向绑定的值,然后通过子组件传来的值修改。再将两个元素弹性布局,相当于hanle组件就会

贴着我们需要拖动的元素,看上去是再拖动我们要改变宽度的元素,其实是在拖动我们的handle。

相关文章

  • 拖动元素边框 改变元素宽度

    vue中 拖动元素边框 改变元素宽度先上效果图: 如图所示,通过拖动来改变表单的宽度。但实际上,这边并不是表单的边...

  • jS中关于各种宽高

    offsetWidth;//元素的宽度(包括元素宽度、内边距和边框,不包括外边距)clientWidth;//元素...

  • 盒子模型

    最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高...

  • electron无边框窗口

    无边框窗口拖动 可通过组合实现精确元素区域拖动和不可拖动

  • 开发过程中的一些总结

    1.元素宽度高度能不写就不写,注意默认宽度,块级元素宽度默认父元素宽度(绝对定位和固定定位中默认为元素的宽度 边框...

  • JS中的offsetWidth、offsetHeight、cli

    offsetWidth//返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距) offsetHeight//...

  • 元素位置,尺寸参数

    offsetWidth: 返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距) offsetHeight: ...

  • javascript中offsetWidth、clientWid

    offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距) offsetHeight ...

  • javascript中offsetWidth、clientWid

    offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距) offsetH...

  • 10.css盒子模型-边框常用写法及简写

    为元素设置边框要为一个元素设置边框必须指定三个样式 border-width:边框的宽度border-color:...

网友评论

      本文标题:拖动元素边框 改变元素宽度

      本文链接:https://www.haomeiwen.com/subject/oetwnrtx.html