Skip to content

Latest commit

 

History

History
212 lines (171 loc) · 8.72 KB

README.md

File metadata and controls

212 lines (171 loc) · 8.72 KB
Raw

mytouch 自定义指令

基于Vue2的touch操作, 需要掌握Vue的指令操作, 暂未测试 PC 端效果. 依赖Babel(因为 ES6...), Vue( (:з」∠) ) Sorry for my poor English, English document will be displayed after a time.

引入操作

  • 安装cyj-vue-touch
# install mytouch
npm install cyj-vue-touch
  • 调用
import 'cyj-vue-touch'

指令操作书写

// 在标签中书写
v-mytouch:Action.modifiers="fun"
// 默认调用函数时传入event参数,
// 其中event参数增加键值对 catagory: Action
v-mytouch:Args="argument"
  • Action不区分大小写

常用指令

Action 说明 函数参数
tap 轻触事件 event
doubleclick 双击事件事件 event
press 长按事件 event
swipe 滑动事件 event, 滑动角度
swipeLeft 左滑事件事件 event, 滑动角度
zoomIn 放大事件 event, 双指形成角度

点击事件指令

Action 说明 catagory 值 函数参数
tap 轻触事件, 是click0的语法糖 'tap' event
doubleclick 双击事件, 是click1的语法糖 'doubleclick' event
click0 在连按 0 下后单击, 即轻触事件 'tap' event
click1 在连按 1 下后单击, 即双击事件 'doubleclick' event
click n (n>1)在连按 n 下后单击, 即多击事件 'click' + n event
n 即click n 即click n event

长按事件指令

Action 说明 catagory 值 函数参数
press 长按事件, 是press0的语法糖 'press' event
press0 在连按 0 下后长按, 即长按事件 'press' event
press n (n>0)在连按 n 下后长按 'press' + n event

移动事件指令

Action 说明 catagory 值 函数参数
move 本质即touchmove事件, 会持续触发, 是move0的语法糖 'move' event, x偏移量, y偏移量, x初始位置, y初始位置
moven (n>0)在连按 n 下后, 移动会持续触发 'move' + n event, x偏移量, y偏移量, x初始位置, y初始位置

滑动事件指令

Action 说明 catagory 值 函数参数
swipe 滑动事件 'swipe' event 滑动角度
swipedegn 向 n° 方向滑动事件 'swipedeg' + n event 滑动角度
swipen 连续点击 n 次后的滑动事件 'swipe' + n event 滑动角度
swipen1degn2 连续点击 n1 次后的向 n2° 滑动事件 'swipe' + n1 + 'deg' + n2 event 滑动角度
swipen1Left swipen1deg180的语法糖 'swipe' + n1 + 'deg180' event 滑动角度
swipen1Up swipen1deg270的语法糖 'swipe' + n1 + 'deg270' event 滑动角度
swipen1Right swipen1deg0的语法糖 'swipe' + n1 + 'deg0' event 滑动角度
swipen1Down swipen1deg90的语法糖 'swipe' + n1 + 'deg90' event 滑动角度
  • 滑动角度: 以横向向右(x 轴)为初始边, 纵向下(负 y 轴)为 90° 边(即屏幕坐标系), swipe 中的取值为[0,360)
  • swipe后紧跟两个参数, 因此用deg作为区分, 例如 swipe4deg90 表示在连续点击 4 次后触发向上滑动时触发的事件

放缩事件指令

Action 说明 catagory 值 函数参数
zoomIn 双指远离事件, 即放大事件 'zoomin' event 双指形成角度
zoomOut 双指接近事件, 即缩小事件 'zoomout' event 双指形成角度
zoomMove 双指放缩事件, 会持续触发 'zoomMove' event 双指所形成角度 双指之间的距离 双指之间的距离的初始值
  • 滑动角度: 以横向向右(x 轴)为初始边, 纵向下(负 y 轴)为 90° 边(即屏幕坐标系), zoom 中的取值为[-90,90)
modifiers 说明
prevent 阻止浏览器默认行为, 一般需要设置用来阻止click事件
  • 暂未添加更多, 如有需要可以增加......

指令参数列表

Args 说明 数据类型 默认值 单位 取值
delay 区分轻触和长按的时间间隔 Number 400 ms /
maxDistance 区分是否属于同一位置的最大偏移量 Number 10 px /
minSwipeDistance Swipe!区分是否触发滑动的最小距离 Number 50 px /
minSwipeSpeed Swipe!区分是否触发滑动的最小平均速度 Number 0 px/100ms /
maxSwipeDeg Swipe!区分是否触发具体角度的swipe事件的容差角度 Number 20 deg /
minZoomDistance Zoom!区分是否触发的zoom事件的最小变化距离 Number 60 px /
manZoomDeg Zoom!区分是否触发的zoom事件的最大角度容差 Number 20 deg /
  • Args不区分大小写
  • maxswipedeg是指上或下浮动的范围, 例如swipe90deg在默认的取值范围是70-110

Demo1

<!-- html/template 绑定轻触事件 -->
<div v-mytouch:tap.prevent="handleTap" />
<!-- 以下是语法糖 -->
<div v-mytouch:click0.prevent="handleTap" />
<div v-mytouch:0.prevent="handleTap" />
// 引入
import 'cyj-vue-touch'
// VueScript
export default {
  // ...
  methods: {
    handleTap(e) {
      console.log(e.catagory) // 应该输出 'tap'
    }
  }
}

Demo2

  • 实现图片的展示功能
<!-- CSS已省略 -->
    <div id="app">
        <!-- 允许轻触或放大操作进行展示, 图片较小, 因此就减小zoom触发距离 -->
        <img src="./assets/logo.png" v-mytouch:tap="showImg" v-mytouch:zoomIn="showImg" v-mytouch:minZoomDistance="20">
        <!-- 允许轻触隐藏, 长按保存图片, 双击放大缩小 -->
        <div id="imgBox" v-show="show" v-mytouch:tap="hideImg" v-mytouch:press="saveImg" v-mytouch:1="changeScale" v-mytouch:zoomMove="moves" v-mytouch:minZoomDistance="0">
            <img src="./assets/logo.png" :style="imgStyle">
        </div>
    </div>
// 引入
import 'cyj-vue-touch'
// VueScript
export default {
  // ...
  methods: {
    showImg() {
      this.show = true
    },
    hideImg() {
      this.show = false
      this.scale = 1
    },
    saveImg() {
      confirm('是否保存图片')
    },
    changeScale() {
      if (this.scale != 1) this.scale = 1
      else this.scale = 2
    },
    moves(e, angel, dis, dispre) {
      let b = dis / dispre
      b = Math.max(Math.min(b, 2.5), 0.5)
      this.scale = b
    }
  },
  data() {
    return {
      show: false,
      scale: 1
    }
  },
  computed: {
    imgStyle() {
      return { transform: 'translate(-50%,-50%) scale(' + this.scale + ')' }
    }
  }
}

更新说明

  • 1.0.0

    基础版本, 实现了轻触 长按 多击 多击后长按 功能

  • 1.0.2

    增加了移动 滑动

作者说明

作者: cyj | LoveofRedMoon 本人小白, Bug 还请多多指教 Email: 2932802684@qq.com