cyj-vue-touch v1.0.3

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不区分大小写

常用指令

点击事件指令

长按事件指令

移动事件指令

滑动事件指令

• 滑动角度: 以横向向右(x 轴)为初始边, 纵向下(负 y 轴)为 90° 边(即屏幕坐标系), swipe 中的取值为[0,360)
• swipe后紧跟两个参数, 因此用deg作为区分, 例如 swipe4deg90 表示在连续点击 4 次后触发向上滑动时触发的事件

放缩事件指令

• 滑动角度: 以横向向右(x 轴)为初始边, 纵向下(负 y 轴)为 90° 边(即屏幕坐标系), zoom 中的取值为[-90,90)

• 暂未添加更多, 如有需要可以增加......

指令参数列表

• 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