主页 / 问题 / 1036215
Accepted
HamSter
Asked:2020-10-19 02:44:32 +0000 UTC2020-10-19 02:44:32 +0000 UTC

vue 在触摸时拖动调整大小插件允许以下链接

  • 772

有一个带有vue-drag-resize插件的小项目：

码沙盒.io

<VueDragResize class="red" :isActive="true" :isResizable="false" :isDraggable="isDraggable">
  <h3><a href="https://www.google.com/" target="_blank">Hello World!</a></h3>
</VueDragResize>

点击链接有效，但触摸无效！

问题：如何在未激活拖动时允许跟随链接？！

javascript

1 个回答

  1. Best Answer
    <template>
  <div id="app">
    <button v-on:click="isDraggable = !isDraggable">
      <span v-if="isDraggable">Close</span>
      <span v-if="!isDraggable">Open</span>
    </button>

    <VueDragResize   class="red" :isActive="true" :isResizable="false" :isDraggable="isDraggable">
      <h3><a  @touchstart="setTime"  @touchend="goTo" href="https://www.google.com/" target="_blank">Hello World!</a></h3>
    </VueDragResize>
  </div>
</template>

<script>
import VueDragResize from "vue-drag-resize";

export default {
  name: "App",
  components: {
    VueDragResize
  },
  data() {
    return {
      isDraggable: false,
      index: false,
    };
  },

  methods: {
    setTime(){
      this.index = new Date().getTime();
    },
    goTo(e){
      const time = new Date().getTime();
      const b = time - this.index;
      if (b > 200){
        this.index = 0;
        return;
      }
      const href = e.target.href;
      if(href){
       window.open(href)
      }
    }
  }
};
</script>

    为什么没有进行过渡，我很难回答。这很可能与插件的内部实现有关。

    • 1

相关问题