vue-drag-resize与输入框/文本框冲突问题怎么解决

发布时间:2023-04-25 15:52:11 作者:iii
来源:亿速云 阅读:173

这篇“vue-drag-resize与输入框/文本框冲突问题怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue-drag-resize与输入框/文本框冲突问题怎么解决”文章吧。

vue-drag-resize与输入框/文本框冲突

拖拽是前端使用较为频繁的功能了,当我们使用vue-drag-resize插件进行拖拽功能实现时,发现它和输入框或文本框有冲突,输入框/文本框无法输入。

今天主要说怎么去解决该问题。

在测试过程中,发现出现该问题的原因是输入框的焦点事件和拖拽的点击事件冲突了。

找到原因我们就能去解决。

vue-drag-resize插件文档中提供的解决办法

<vue-drag-resize @activated="activateEv(index)" />

activateEv(index) {
    console.log('activateEv' + index);
    this.$refs['drag-input'].focus();
}

插件提供的方法确实可以解决该问题,但是在之后的开发中发现,这针对单个输入框或文本框确实有效,但是**如果一个弹窗内存在多个输入框/文本框时,只有最后一个输入框/文本框有效**,说明问题还是没有得到解决。

解决多输入框/文本框冲突

思路

其实我们看插件提供的方法,就是给输入框/文本框主动的设置焦点事件。那如果我们点击哪个输入框/文本框时才给哪个设置焦点事件不就可以解决问题吗。

针对这个思路,我们进行代码调整。

<detailmove @clicked="clickHandle">

clickHandle(e){
    e.target.focus()
}

clicked是插件自带的点击事件,当我们点击时,获取当前点击的dom元素,然后设置焦点事件。这样就可以解决了。

当然我们针对的是输入框和文本框,那我们可以加判断去区分。

<detailmove @clicked="clickHandle">

clickHandle(e){
   if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
        e.target.focus()
   } 
}

这样问题就解决了

vue-drag-resize拖拽组件的简单使用

vue3 

npm i -s vue-drag-resize@next
 
//局部使用
<template>
  <div class="home">
    <VueDragResize
      class="list"
      :isActive="true"
      :w="width"
      :h="height"
         :x="left"
      :y="top"
      :parentLimitation="parentLimitation"
      :aspectRatio="aspectRatio"
      v-on:resizing="resize"
      v-on:dragging="resize"
    >
      <p>{{ top }} х {{ left }}</p>
      <p>{{ width }} х {{ height }}</p>
    </VueDragResize>
  </div>
</template>
 
<script>
// @ is an alias to /src
import VueDragResize from "vue-drag-resize";
export default {
  components: {
    VueDragResize,
  },
  name: "HomeView",
  data() {
    return {
      parentLimitation: true, //true不能超过父组件 fallse可以超过父组件
      aspectRatio: true, //false不限制宽高比例 true限制宽高比例等比缩放
      width: 100,
      height: 100,
      top: 0,
      left: 0,
    };
  },
  methods: {
    resize(newRect) {
      console.log(newRect);
      this.width = newRect.width;
      this.height = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 1920px;
  height: 1080px;
  position: relative;
  top: 0;
  left: 0;
  .list {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>

vue2

npm i -s vue-drag-resize
//局部使用
<template>
  <div class="home">
    <VueDragResize
      class="list"
      :isActive="true"
      :w="width"
      :h="height"
         :x="left"
      :y="top"
      :parentLimitation="parentLimitation"
      :aspectRatio="aspectRatio"
      v-on:resizing="resize"
      v-on:dragging="resize"
    >
      <p>{{ top }} х {{ left }}</p>
      <p>{{ width }} х {{ height }}</p>
    </VueDragResize>
  </div>
</template>
 
<script>
// @ is an alias to /src
import VueDragResize from "vue-drag-resize";
export default {
  components: {
    VueDragResize,
  },
  name: "HomeView",
  data() {
    return {
      parentLimitation: true, //true不能超过父组件 fallse可以超过父组件
      aspectRatio: true, //false不限制宽高比例 true限制宽高比例等比缩放
      width: 100,
      height: 100,
      top: 0,
      left: 0,
    };
  },
  methods: {
    resize(newRect) {
      console.log(newRect);
      this.width = newRect.width;
      this.height = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 1920px;
  height: 1080px;
  position: relative;
  top: 0;
  left: 0;
  .list {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>

以上就是关于“vue-drag-resize与输入框/文本框冲突问题怎么解决”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. MySQL的基本配置
  2. mysql如何创建存储过程

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue-drag-resize vue

上一篇:vue中怎么使用window.open()参数

下一篇:vue运行报错Error:Cannot find module '@vue/cli-plugin-babel'怎么解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》