<template>
  <div class="keyboard-example">
    <label for="input-field">Enter text using the virtual keyboard:</label>
    <input id="input-field" v-model="inputValue" @focus="showKeyboard" @blur="hideKeyboardOnBlur" />

    <virtual-keyboard
      v-if="isKeyboardVisible"
      :layout="keyboardLayout"
      @input="handleInput"
      @close="hideKeyboard" />
  </div>
</template>

<script>
import VirtualKeyboard from 'vue-keyboard-virtual-next'; // 替换为实际组件路径

export default {
  components: {
    VirtualKeyboard
  },
  data() {
    return {
      inputValue: '',
      isKeyboardVisible: false,
      keyboardLayout: 'qwerty' // 或根据需要设置其他布局
    };
  },
  methods: {
    showKeyboard() {
      this.isKeyboardVisible = true;
      console.log(1);
    },
    hideKeyboard() {
      this.isKeyboardVisible = false;
      console.log(2);
    },
    hideKeyboardOnBlur() {
      setTimeout(() => {
        if (!document.activeElement.matches('#input-field')) {
          this.hideKeyboard();
        }
      }, 100); // 延迟隐藏，避免快速焦点切换导致键盘闪现
    },
    handleInput(value) {
      this.inputValue = value;
    }
  }
};
</script>

<style scoped>
.keyboard-example {
  /* 添加必要的样式，如布局、间距等 */
}
</style>
