JSFiddle - React, Tailwind, and code Playground

by Joun Qin

HTML

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/v-touch/dist/v-touch.min.js"></script>
<div id="app"></div>

CSS

.container {
  marigin: 0;
  padding: 10px;
}

.my-btn {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  border: none;
  background-color: #337ab7;
  ;
  color: white;
}

.my-btn:hover {
  background-color: #285f8f;
}

JavaScript

new Vue({
  el: '#app',
  template: `<div class="container">
  tap: {{ tapNum }},<br>
  dblTap: {{ dblTapNum }},<br>
  mltTap: {{ mltTapNum }}, lastMltTapped: {{ lastMltTapped }}<br>
  press: {{ pressNum }},<br>
	pressing: {{ pressingNum }},<br>
  swipeLeft: {{ swipeLeftNum }},<br>
  swipeRight: {{ swipeRightNum }},<br>
  swipeUp: {{ swipeUpNum }},<br>
  swipeDown: {{ swipeDownNum }}
  <br>
  <div v-touch="touch" @dblclick="dblclickOuter">
    <button class="my-btn" @tap="click">{{ msg }}</button>
    <div @dblclick="dblclick">
      <button class="my-btn">Just Another Button</button>
    </div>
  </div>
  <br>
  <br>
  <button class="btn btn-default" @click="toggle('x')">toggle x ({{ x }})</button>
  <button class="btn btn-default" @click="toggle('y')">toggle y ({{ y }})</button>
</div>`,
  data() {
      return {
        msg: 'try to touch, move, swipe, press me!',
        x: false,
        y: false,
        tapNum: 0,
        dblTapNum: 0,
        mltTapNum: 0,
        lastMltTapped: 0,
        pressNum: 0,
				pressingNum: 0,
        swipeLeftNum: 0,
        swipeRightNum: 0,
        swipeUpNum: 0,
        swipeDownNum: 0
      }
    },
    computed: {
      touch() {
        return {
          x: this.x,
          y: this.y,
          methods: true
        }
      }
    },
    methods: {
      toggle(prop) {
        this[prop] = !this[prop]
      },
      tap(e) {
        this.tapNum++
      },
      dblTap() {
        this.dblTapNum++
      },
      mltTap({tapped}) {
        this.mltTapNum++
        this.lastMltTapped = tapped
      },
      press() {
        this.pressNum++
      },
			pressing() {
				this.pressingNum++
			},
      swipeLeft() {
        this.swipeLeftNum++
      },
      swipeRight() {
        this.swipeRightNum++
      },
      swipeUp() {
        this.swipeUpNum++
      },
      swipeDown() {
        this.swipeDownNum++
      },
      click() {
        console.log('clicked the first button')
      },
      dblclick() {
       ...