Слияние кода завершено, страница обновится автоматически
Vue-mb-touch — это проект, связанный с событиями для мобильной версии Vue. Он включает в себя события нажатия (tap) и длительного нажатия (press).
npm install vue-mb-touch
<template>
<div v-touch.press.tap @tap="tap" @press="press">
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import vueMobileTouch from "vue-mb-touch";
Vue.use(vueMobileTouch);
@Component
export default class Home extends Vue {
public tap() {
/** tap */
}
public press(e: Event) {
/** press */
}
public data() {
return {
};
}
}
</script>
Включение режима прокси
<template>
<ul v-touch.proxy @tap="tap($event)" >
<li data-proxy data-index="1"></li>
<li data-proxy data-index="2"></li>
<li data-proxy data-index="3"></li>
</ul>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import vueMobileTouch from "vue-mb-touch";
Vue.use(vueMobileTouch);
@Component
export default class Home extends Vue {
public tap(e: event) {
const currentTarget = e.currentTarget as HTMLElement;
console.log(currentTarget.tagName.toLowerCase()); // li
console.log(JSON.stringify(currentTarget.dataset)); // {proxy: "", index: "1"}
}
public data() {
return {
};
}
}
</script>
При импорте vue-mb-touch можно передать глобальный объект конфигурации. В настоящее время он поддерживает maxDistance и pressTime. MaxDistance используется для определения расстояния, на которое должен переместиться палец на экране, чтобы вызвать событие. По умолчанию оно равно 10. PressTime используется для определения времени, в течение которого палец должен быть прижат к экрану, чтобы вызвать длительное нажатие. По умолчанию это 650 миллисекунд. Вот как это работает:
import Vue from 'vue';
import vueMobileTouch from "vue-mb-touch";
Vue.use(vueMobileTouch, {maxDistance: 10,pressTime: 650});
| Параметр | Описание |
|---|---|
| tap | Включает события tap. По умолчанию они отключены, но если оба tap и press отключены, то они включаются автоматически. |
| press | Включает события press. По умолчанию отключено. |
| stop | Останавливает всплытие событий. По умолчанию не останавливает. |
| prevent | Предотвращает поведение браузера по умолчанию. По умолчанию не предотвращает. |
| passive | Устанавливает пассивный режим прослушивания. Если этот параметр присутствует, предотвращение поведения браузера по умолчанию становится неэффективным. |
| capture | Определяет, является ли слушатель захватывающим. По умолчанию — нет. |
| proxy | Включает режим прокси для событий. По умолчанию отключен. Для включения режима прокси добавьте атрибут data-proxy к целевым элементам. |
Если вы используете v-touch на компонентах Vue, вам нужно добавить параметр native при прослушивании событий.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )