Vue 绑定使用 touchstart touchmove touchend[通俗易懂]

Vue 绑定使用 touchstart touchmove touchend[通俗易懂]Vue简单绑定touchstarttouchmovetouchend

大家好,又见面了,我是你们的朋友全栈君。

今天要做一个页面div长按后触发事件,简单学习后实现如下:
先看代码:

<template>
  <div>

    <div class="test" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()">试一试呀!</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        
    }
  },
    methods:{
        gtouchstart(){
            window.console.log('1,按下啦啦啦啦啦')
            
        },
        gtouchmove(){
            window.console.log('2,按下并且在移动呢')
        },
        gtouchend(){
            window.console.log('3,松开啦啦啦啦啦')
        }
    }
}
</script>
<style scoped>
    .test{
        width: 100%;
        height: 50px;;
        text-align: center;
        background-color: red;
        line-height: 50px;
        font-size: 50px;
    }
 
</style>

看结果:
在这里插入图片描述
鼠标在红色区域内按下会输出1,

在这里插入图片描述
按下鼠标不松开然后移动会输出2,
在这里插入图片描述
松开后就会输出3,

根据自己的情况在三个函数里写入相应的功能。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150773.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • vue cil安装axios

    vue cil安装axiosVuecil安装axios1、安装axioscnpminstallaxios如果没有安装cnpm的可能安装不成功,这里列出安装cnpm,使用淘宝镜像。npminstall-gcnpm–registry=https://registry.npm.taobao.org2、使用方法2.1、首先在main.js配importaxiosfrom”axiosVue.prototype.$axios=axios好了就可以在项目中使用axios了。…

    2022年10月31日
  • mysql面试题总结[通俗易懂]

    mysql面试题总结[通俗易懂]1.主键超键候选键外键   超键(superkey):在关系中能唯一标识元组的属性集称为关系模式的超键    候选键(candidatekey):不含有多余属性的超键称为候选键    主键(primarykey):用户选作元组标识的一个候选键程序主键    外键(foreignkey):如果关系模式R1中的某属性集不是R1的主键,而是另一个

  • 终于,我感受到了IDEA的强大[通俗易懂]

    Java开发者千千万,开发者用的开发工具目前主流却只有2种:eclipse和IDEA,我入行以来一直用的eclipse,听过IDEA很好很强大,但是也只是处于听说的阶段,基本没用过,自然没怎么体会过。

  • 直流无刷电机如何驱动(直流无刷电机驱动电路)

    根据BLDC厂家提供的表格通过控制六个MOS来驱动直流无刷电机旋转。

  • [I.MX6UL] U-Boot移植(六) 网络驱动修改 LAN8720A

    [I.MX6UL] U-Boot移植(六) 网络驱动修改 LAN8720AI.MX6UL/ULL内部有个以太网MAC外设,也就是ENET,需要外接一个PHY芯片来实现网络通信功能,也就是内部MAC+外部PHY芯片的方案。I.MX6UL/ULL有两个网络接口ENET1和ENET2,I.MX6U-ALPHA开发板提供了这两个网络接口,其中ENET1和ENET2都使用LAN8720A作为PHY芯片。NXP官方的I.MX6ULLEVK开发板使用KSZ8081这颗PHY芯片,LAN8720A相比KSZ8081具有体积小、.

  • pycharm如何创建flask项目_适合flask的前端框架

    pycharm如何创建flask项目_适合flask的前端框架在网上看了很多办法,大都是用用命令行来实现,而且对Windows用户很不友好。其实只要在settings中选择projectinterpreter,再在右边点击+,再搜索flask选择第一个进行install就可以了,pycharm还会帮你装上所需要的其他插件第一篇博客,大家觉得有用的话给个赞可好你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号