<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>