vue 手机右滑返回

1、安装vue-directive-touch组件
复制代码
npm install vue-directive-touch --save
2、引入组件

在main.js中引入vue-directive-touch

复制代码
import touch from 'vue-directive-touch';
Vue.use(touch);
3、在需要的页面使用
复制代码
<template>
  <div v-touch:right="backBefore">
    
  </div>
</template>
 
<script>
 export default {
        name: "index",
        data(){
           
        },
        methods:{
          backBefore (e,start,end){ 
            // 滑动距离
             if(end.X>start.X && end.X-start.X>30){
                   //要跳转的页面

              }
             
           }
 
        }
</script>
相关推荐
故作春风5 分钟前
手把手实现一个前端 AI 编程助手:从 MCP 思想到 VS Code 插件实战
前端·人工智能
不会算法的小灰13 分钟前
Vue.js 基础教程:从入门到实践
前端·javascript·vue.js
掘金一周16 分钟前
没开玩笑,全框架支持的 dialog 组件,支持响应式| 掘金一周 11.6
前端·人工智能
拉不动的猪29 分钟前
浏览器&Websocket&热更新
前端·javascript·vue.js
那些免费的砖40 分钟前
Reka UI - 一款免费开源的 Vue 无头 UI 组件库,样式定制开发项目的绝佳选择
vue.js·ui·开源
Never_Satisfied1 小时前
在JavaScript中,将包含HTML实体字符的字符串转换为普通字符
开发语言·javascript·html
im_AMBER1 小时前
React 12
前端·javascript·笔记·学习·react.js·前端框架
开开心心就好1 小时前
电脑音质提升:杜比全景声安装详细教程
java·开发语言·前端·数据库·电脑·ruby·1024程序员节
午安~婉1 小时前
HTML CSS八股
前端·css·html
有事没事实验室1 小时前
css变量
前端·css