vue3中使用 codemirror 6

在最近的一个项目中想要做一个sql在线编辑的编辑器,由于项目中vue已经升级的到了vue3,使用codemirror 5总是会发生各种错误.索性就直接使用codemirror 6.codemirror 6使用TypeScript编写,与vue3的 结合相当融洽.接下来看一下具体的实现过程

codemirror.vue

store.vue

const state = {
  //mysql自动补全提示内容,key为表名,数组内为列名
  MYSQLContent: {
    apom: ['user', 'app_user', 'app_user_user'],
  },
};
const mutations = {
  setMysqlTableContent(state,data) {
    state.MYSQLContent = { ...state.MYSQLContent, ...data };
  },
};
export default {
  state,
  mutations,
};

index.vue

最后看一下效果

image.png