编辑器拉伸使用: AceEditor MonacoEditor

<template>
  <div>
    <v-ace-editor
      :id="vaceId"
      ref="AceEditorRef"
      :readonly="!authCode"
      lang="javascript"
      class="editor-border"
      v-model:value="editorValue"
      theme="chrome"
      :style="{ width: '100%', height: height + 'px' }"
      @change="changeAce"
    />
    <div class="stretch" @mousedown="dragAndDrop">
      <icon-font type="iconlashen" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, inject, ref, toRef, watch } from 'vue'
import { VAceEditor } from '../../../AceEditor/index'

export default defineComponent({
  components: {
    VAceEditor
  },
  props: {
    vaceId: {
      type: String,
      required: false,
      default: ''
    },
    value: {
      type: String,
      required: false,
      default: ''
    },
    height: {
      type: Number,
      required: false,
      default: 145
    }
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const authCode = inject('readonlyAuthCode')
    console.log('123props', props, toRef(props, 'value'), props.value)
    const editorValue = ref(props.value)
    const AceEditorRef = ref()
    const dragAndDrop = (event: any) => {
      // 禁止用户选择网页中文字
      document.onselectstart = () => false
      // 禁止用户拖动元素
      document.ondragstart = () => false
      // 保存鼠标最后移动的位置
      const dragState = {
        // 鼠标开始移动的位置
        startMouseTop: event.clientY,
        // 鼠标最后移动的位置
        endMouseTop: event.clientY
      }
      document.onmousemove = function(event) {
        // const vaceEditorHeight: any = document.getElementById(props.vaceId)
        const vaceEditorHeight: any = AceEditorRef.value?.$el
        // console.log('vaceEditorHeight', vaceEditorHeight)
        // console.log('AceEditorRef', AceEditorRef.value?.$el)
        // let vaceEditorHeight: any = ref(null)
        // 获取鼠标最后移动的位置
        const { endMouseTop } = dragState
        // 获取当前的Editor高度
        const oldVaceEditorHeight = vaceEditorHeight.getBoundingClientRect()
          .height
        // 新的Editor高度
        let newVaceEditorHeight = 0

        // 计算鼠标移动的距离
        const distance = Math.abs(
          parseInt(((endMouseTop - event.clientY) * 100).toString(), 10) / 100
        )
        // 鼠标向上移动
        if (endMouseTop < event.clientY) {
          // 计算新的发送框高度
          newVaceEditorHeight = oldVaceEditorHeight + distance
        }
        // 鼠标向下移动
        else {
          // 计算新高度
          newVaceEditorHeight = oldVaceEditorHeight - distance
        }
        // 修改高度
        vaceEditorHeight.style.height = newVaceEditorHeight + 'px'
        // 更新鼠标最后移动的位置
        dragState.endMouseTop = event.clientY
      }
      document.onmouseup = function() {
        document.onmousemove = null
        document.onmouseup = null
        // 允许用户选择网页中文字
        document.onselectstart = null
        // 允许用户拖动元素
        document.ondragstart = null
      }
    }
    watch(
      () => props.value,
      newVal => {
        editorValue.value = newVal
      }
    )
    const changeAce = () => {
      emit('update:value', editorValue.value)
    }
    return {
      authCode,
      editorValue,
      AceEditorRef,
      dragAndDrop,
      changeAce
    }
  }
})
</script>
<style lang="less" scoped>
.stretch {
  cursor: n-resize;
  height: 8px;
  text-align: right;
}
</style>

``