Touch Pan Directive

Vue 指令
Touch Swipe 滑动
Vue 指令
Touch Repeat 重复点击
Vue 指令
Touch Hold 长按

类星体提供了功能齐全的 Vue 指令，可以完全取代像Hammerjs这样的库:v-touch-pan, v-touch-swipe, v-touch-hold，甚至v-touch-repeat。

这些指令不仅可以处理鼠标事件，还可以处理触摸事件，所以您可以用它们在您的 App 中完成一些很酷的事情。

下面我们将讲述v-touch-pan指令

TouchPan API

TouchPan API
类型
Function | undefined
说明
拖动操作的处理函数（使用 undefined 来禁用）

用法

在下面的示例区域中，点击后往一个方向平移，然后查看页面的变化。在有触摸功能的设备上，上下平移时，页面滚动会被禁用。

TIP

如果您的内容带有图片，您可能需要给它们添加draggable="false"属性，否则浏览器的原生事件可能会起副作用。

<template>
  <div class="q-pa-md row justify-center">
    <q-card
      v-touch-pan.prevent.mouse="handlePan"
      class="custom-area cursor-pointer bg-primary text-white shadow-2 relative-position row flex-center"
    >
      <div v-if="info" class="custom-info">
        <pre>{{ info }}</pre>
      </div>
      <div v-else class="text-center">
        <q-icon name="arrow_upward" />
        <div class="row items-center">
          <q-icon name="arrow_back" />
          <div>Pan in any direction</div>
          <q-icon name="arrow_forward" />
        </div>
        <q-icon name="arrow_downward" />
      </div>

      <div v-show="panning" class="touch-signal">
        <q-icon name="touch_app" />
      </div>
    </q-card>
  </div>
</template>
Pan in any direction

平移可以运行于鼠标和触摸事件。也可以指定平移的方向。例如只捕获水平方向的平移。

注意，在有触摸功能的设备上，滚动不会被自动阻止，因为我们只是水平平移。

<template>
  <div class="q-pa-md row justify-center">
    <q-card
      v-touch-pan.horizontal.prevent.mouse="handlePan"
      class="custom-area cursor-pointer bg-primary text-white shadow-2 relative-position row flex-center"
    >
      <div v-if="info" class="custom-info">
        <pre>{{ info }}</pre>
      </div>
      <div v-else class="row items-center">
        <q-icon name="arrow_back" />
        <div>Pan to left or right only</div>
        <q-icon name="arrow_forward" />
      </div>

      <div v-show="panning" class="touch-signal">
        <q-icon name="touch_app" />
      </div>
    </q-card>
  </div>
</template>
Pan to left or right only

下面的示例只捕获垂直方向的平移，页面滚动会被禁用，但是您希望的话，也可以选择不禁用。

<template>
  <div class="q-pa-md row justify-center">
    <q-card
      v-touch-pan.vertical.prevent.mouse="handlePan"
      class="custom-area cursor-pointer bg-primary text-white shadow-2 relative-position row flex-center"
    >
      <div v-if="info" class="custom-info">
        <pre>{{ info }}</pre>
      </div>
      <div v-else class="text-center">
        <q-icon name="arrow_upward" />
        <div>
          Pan to up or down only
        </div>
        <q-icon name="arrow_downward" />
      </div>

      <div v-show="panning" class="touch-signal">
        <q-icon name="touch_app" />
      </div>
    </q-card>
  </div>
</template>
Pan to up or down only
下面的示例演示如何使用`up`, `down`, `left`, `right`这四个修饰符来捕获自定义方向的平移。

页面滚动会被自动禁用，但是您希望的话，也可以选择不禁用。

<template>
  <div class="q-pa-md row justify-center">
    <q-card
      v-touch-pan.up.right.prevent.mouse="handlePan"
      class="custom-area cursor-pointer bg-primary text-white shadow-2 relative-position row flex-center"
    >
      <div v-if="info" class="custom-info">
        <pre>{{ info }}</pre>
      </div>
      <div v-else class="text-center">
        <q-icon name="arrow_upward" />
        <div class="row items-center">
          <div>Pan to up or to right</div>
          <q-icon name="arrow_forward" />
        </div>
      </div>

      <div v-show="panning" class="touch-signal">
        <q-icon name="touch_app" />
      </div>
    </q-card>
  </div>
</template>
Pan to up or to right

处理鼠标事件

当您想处理鼠标事件时，使用mouse修饰符：

<!--
  指令也会被鼠标操作触发
-->
<div v-touch-pan.mouse="userHasPanned">...</div>

禁用页面滚动 (在有触摸功能的设备上)

默认情况请下，这个指令不会阻止页面的滚动，但是您希望阻止页面滚动的话，使用 prevent修饰符。

<div v-touch-pan.prevent="userHasPanned">...</div>

Inhibiting TouchPan

您可以通过阻止内部元素touchstart/mousedown事件的冒泡行为来抑制 TouchPan 事件：

<div v-touch-pan.mouse="userHasHold">
  <!-- ...content -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      TouchPan 事件不会应用到这里， 因为我们
      在 touchstart 和 mousedown 事件上
      调用了 stopPropagation()
    -->
  </div>
  <!-- ...content -->
</div>

然而，若您使用capture 或者 mouseCapture修饰符，则事件会先到达 TouchPan 指令，然后才是内部元素，所以 TouchPan 事件仍然会被触发。

FAB 示例

下面是一个使用 QFab 的优秀示例，您可以拖拽它穿出屏幕。

<template>
  <div class="q-pa-md">
    <q-layout view="lhh LpR lff" container style="height: 500px" class="shadow-2 rounded-borders">
      <q-page-container>
        <q-page padding>
          <p v-for="n in 15" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?
          </p>

          <q-page-sticky position="bottom-right" :offset="fabPos">
            <q-fab
              icon="add"
              direction="up"
              color="accent"
              :disable="draggingFab"
              v-touch-pan.prevent.mouse="moveFab"
            >
              <q-fab-action @click="onClick" color="primary" icon="person_add" :disable="draggingFab" />
              <q-fab-action @click="onClick" color="primary" icon="mail" :disable="draggingFab" />
            </q-fab>
          </q-page-sticky>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</template>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?

注意热更新相关

由于性能的原因，不是所有的修饰符都是 reactive 的，有一些需要刷新页面才能更新，请在 API 卡片中检查的哪些修饰符不具备 reactive

查看更多？
Vue 指令
Touch Hold 长按
Vue 指令
Touch Repeat 重复点击
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。