Vue3,在pc端点击数字键盘以外的部分，收起键盘

在Vue3中，你可以通过监听窗口的`blur`事件并结合`v-model`和自定义组件来实现这样的功能。首先，创建一个包含数字的输入框组件，并添加一个外部点击处理函数。当焦点从数字键盘上移开（即失去焦点`blur`），可以隐藏键盘。

以下是一个简单的示例：

<template>
  <div @click="toggleKeyboard">
    <input v-model.number type="tel" ref="numberInput" />
    <custom-keyboard :visible="showKeyboard"></custom-keyboard>
  </div>
</template>

<script>
import CustomKeyboard from './CustomKeyboard.vue';

export default {
  components: {
    CustomKeyboard,
  },
  data() {
    return {
      showKeyboard: false,
    };
  },
  methods: {
    toggleKeyboard(e) {
      if (e.target !== this.$refs.numberInput && !this.$refs.numberInput.contains(e.target)) {
        this.showKeyboard = false;
      }
    },
  },
};
</script>

在这个例子中，`CustomKeyboard`是一个自定义组件，它会在`showKeyboard`为`true`时显示。`toggleKeyboard`方法检查触发事件的目标是否为输入框本身或者其内部，如果不是，则将`showKeyboard`设置为`false`，从而收起键盘。