Vue集成simple-keyboard报TypeError: Cannot call a class as a function错误如何解决

你导入的simple-keyboard是原生JavaScript版本的核心库，本身是ES Class，并不是针对Vue框架封装的组件，你直接将其注册为Vue组件使用时，Vue的组件渲染逻辑会尝试以函数形式调用它生成VNode，就触发了Cannot call a class as a function的报错。

方案1：使用Vue适配版本的simple-keyboard（推荐） #

首先安装对应Vue版本的封装库：

• 若使用Vue2，执行安装命令：

npm install vue-simple-keyboard --save

• 若使用Vue3，执行安装命令：

npm install @simple-keyboard/vue3 --save

修改代码中的导入逻辑即可，原有组件注册、模板使用逻辑无需调整：

// Vue2导入
import Keyboard from 'vue-simple-keyboard'
// 导入配套样式
import 'simple-keyboard/build/css/index.css'

// Vue3导入
import Keyboard from '@simple-keyboard/vue3'
import 'simple-keyboard/build/css/index.css'

额外代码修正：你现有代码存在两处语法错误，需要同步修改：

1. data配置需要返回对象，且模板中用到的showOnScreenKeyboard变量需要提前声明
2. data和methods配置之间缺少逗号分隔

// 修正后的data配置
data() {
  return {
    input: '',
    showOnScreenKeyboard: false
  }
}, // 这里的逗号不能漏
methods: {
  // 原有方法逻辑
}

方案2：手动初始化原生simple-keyboard #

如果不想使用封装版本，可以把模板中的组件调用换成普通DOM容器，在生命周期中手动实例化：

<template>
  <div>
    <CModal id="on-screen-keyboard"
        :show.sync="showOnScreenKeyboard">
      <!-- 替换为普通DOM容器 -->
      <div class="keyboard-container"></div>
    </CModal>
  </div>
</template>

<script>
import Keyboard from 'simple-keyboard';
import 'simple-keyboard/build/css/index.css'

export default {
  data() {
    return {
      input: '',
      showOnScreenKeyboard: false,
      keyboardInstance: null
    }
  },
  mounted() {
    // 可根据需求监听模态框显示事件后再初始化
    this.keyboardInstance = new Keyboard('.keyboard-container', {
      onChange: input => this.onChange(input),
      onKeyPress: button => this.onKeyPress(button),
      input: this.input
    })
  },
  beforeDestroy() {
    // 销毁实例避免内存泄漏
    this.keyboardInstance?.destroy()
  },
  methods: {
    onChange(input) {
      this.input = input;
    },
    onKeyPress(button) {
      console.log("button", button);
    },
    onInputChange(input) {
      this.input = input.target.value;
      // 同步输入内容到键盘实例
      this.keyboardInstance?.setInput(this.input)
    },
  }
}
</script>

内容的提问来源于stack exchange，提问作者André Reichelt