vue-drag-resize拖拽Input框问题

小桥流水人家丶

已于 2023-05-29 13:58:32 修改

阅读量466

点赞数

文章标签： vue.js 前端 javascript

于 2023-05-29 13:53:38 首次发布

本文链接：https://blog.csdn.net/xu568110526/article/details/130926748

版权

下载：yarn add vue-drag-resize

<template>
  <Vuedragresize
    :w="width"
    :h="height"
    :isActive=true
    :y="top"
    :x="left"
    :parentLimitation="true"
    :parentH="parentH"
    :parentW="parentW"
    @resizing="resize"
    @resizestop="dragResizeStop"
    @dragstop="dragResizeStop"
    @activated="activateEv"
  >
    <Input
      ref="inputVals"
      :autosize="{ minRows: 2, maxRows: 5 }"
      type="textarea"
      v-model="inputValue"
      @on-change="handClick"
  /></Vuedragresize>
</template>
<script>
import Vuedragresize from "vue-drag-resize";
export default {
  components: {
    Vuedragresize,
  },
  data() {
    return {
      option: {
        inputValue: "",
      },
      width: 300,
      height: 300,
      myChart: "",
      top: 0,
      left: 300,
      parentH: 1500,
      parentW: 1300,
    };
  },
  created() {
   
  },
  computed: {},
  methods: {
    resize(newRect) {
      this.width = newRect.width;
      this.height = newRect.height;
    },
    dragResizeStop(newRect) {
      this.$emit("editPositionSize", newRect);
    },

    handClick() {
      this.$emit("inputValue", this.inputValue);
    },

    activateEv() {
      this.$refs["inputVals"].focus();
    },
  },
};
</script>
<style lang="less" scoped></style>