<script setup lang="ts">
import { ref, version as vueVersion } from 'vue'
import { version as epVersion } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'

const msgup = ref('')
const msgdown = ref('')
const msgpress = ref('')
const value1 = ref('')
function keyup(ev){
  msgup.value = ev.type
}
function keydown(ev){
  msgdown.value = ev.type
}
function keypress(ev){
  msgpress.value = ev.type
}
</script>

<template>
  <h1>{{ msgup }}</h1>
  <h1>{{ msgdown }}</h1>
  <h1>{{ msgpress }}</h1>
    <el-time-picker v-model="value1" @keyup="keyup($event)" @keydown="keydown($event)"
     @keypress="keypress($event)"
     placeholder="Arbitrary time" />

  <p>
    <el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>
    Element Plus {{ epVersion }} + Vue {{ vueVersion }}
  </p>
</template>