rennzhang / codemirror-editor-vue3

CodeMirror component for Vue3
https://rennzhang.github.io/codemirror-editor-vue3
MIT License
195 stars 39 forks source link

鼠标滚轮快捷键绑定 #56

Closed wqiucheng closed 4 months ago

wqiucheng commented 4 months ago

作者您好,感谢上次您帮我解答问题,我的网页demo基本完成(见下图),最后有几个问题还是想向您请教哈,谢谢 image 1.我的智能补全和Ctrl-Space绑定不上去,换别的快捷键就可以,我这里临时换成了End,这是什么原因造成的

const cmOptions: EditorConfiguration = reactive({
  mode: "text/x-sql",
  theme: "default",
  readOnly: false,
  lineNumbers: true,
  lineWiseCopyCut: true,
  styleActiveLine: false,
  gutters: ["CodeMirror-lint-markers"],
  lint: true,
  indentWithTabs: true,
  smartIndent: true,
  hintOptions: {
    completeSingle: false
  },
  fullScreen: false,
  extraKeys: {
    "Ctrl-I": () => {
      importSQL();
    },
    "Ctrl-F": () => {
      formatSQL();
    },
    "Ctrl-Enter": () => {
      runSQL();
    },
    "Ctrl-Delete": () => {
      clearSQL();
    },
    "End": "autocomplete",
    "F11": (cm: Editor) => {
      cm.setOption("fullScreen", !cm.getOption("fullScreen"));
    },
    "Esc": (cm: Editor) => {
      if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
    },
  },
  matchBrackets: true,
  lineWrapping: true
});

2.另外字体大小修改我目前临时使用的是element-plus的el-input-number做的,我想让ctrl+鼠标滚轮滑动和字体大小修改做一个快捷键绑定(类似VSCode),但是滚轮滑动的快捷键应该怎么去写?

        <el-input-number v-model="codeSize" :min="15" :max="40" :step="2" size="large" style="width: 140px;"
          @change="handleChange" />
rennzhang commented 4 months ago

可以检查下快捷键是否冲突,另外在我的 mac 电脑上需要加上fn修饰键才能生效

第二个问题需要看下element-plus是否支持该功能

wqiucheng commented 4 months ago

作者您好,第二个问题我已解决,第一个问题没办法,只能换快捷键

onMounted(() => {
  cminstance.value = cmRef.value?.cminstance;
  let myusername = sessionStorage.getItem('username');
  let mypassword = sessionStorage.getItem('password');
  if (myusername && mypassword) {
    connectionStatusText.value = '连接成功';
    connectionStatus.value = 'success';
    Message.success('自动连接成功');
  }
  cminstance.value.getWrapperElement().addEventListener('wheel', function (event) {
    if (event.ctrlKey) {
      event.preventDefault();
      if (event.deltaY < 0) {
        if (codeSize.value <= 40) {
          codeSize.value += 2;
        }
      } else {
        if (codeSize.value >= 15) {
          codeSize.value -= 2;
        }
      }
      cmRef.value?.refresh();
    }
  });
})