码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-04-22 16:22:16      阅读:262      评论:0      收藏:0      [点我收藏+]

标签:class   screen   created   move   修改   ons   sed   nts   isp   

先上效果图:

技术图片

如图所示,通过拖动来改变表单的宽度。

但实际上,这边并不是表单的边框,而是一个单独的组件。通过监听鼠标的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 {
  width: 2px;
  cursor: w-resize;
  z-index: 10;
  background: #ccc;
}
</style>

监听事件并this.$emit将值传给父组件,父组件通过传过来的值来动态的修改需要改变宽度的元素。

如效果图所示,写一个有需求组件,并引入handle组件

<div class=‘sss‘>    
  <div  :style="{ width: width + ‘px‘ }" ></div> // 这里是你自己需要改变宽度的组件
  <XHandle class="myxhandle" @widthChange="widthChange" />
</div>
<script>
import XHandle from "@/components/Xhandle";
export default {
  data() {
    return {
      width: 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中 拖动元素边框 改变元素宽度

标签:class   screen   created   move   修改   ons   sed   nts   isp   

原文地址:https://www.cnblogs.com/wangnothings/p/12752382.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!