key.vue

<template>
  <i
    :class="type"
    class="van-hairline key"
    @touchstart.stop.prevent="onFocus"
    @touchmove="onBlur"
    @touchend="onBlur"
    @touchcancel="onBlur"
    v-text="text"
  />
</template>

<script>
export default {
  name: 'Key',
  props: {
    text: [String, Number], // eslint-disable-line
    type: {
      type: String,
      default: () => '',
    },
  },
  data () {
    return {
      active: false,
    }
  },
  computed: {

  },
  methods: {

    onFocus (e) {
      e.target.className += ' ' + 'active'
      this.$emit('press', this.text)
    },
    onBlur (e) {
      e.target.classList.remove('active')
      this.active = false
    },
  },
}
</script>