aizuda-web-vue3/src/components/CodeMirrorEditor/index.vue

<script setup>
import { watch, ref, toRefs, computed } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { python } from '@codemirror/lang-python'
import { json } from '@codemirror/lang-json'
// import { oneDark } from '@codemirror/theme-one-dark'
const code = ref('')
const props = defineProps({
	modelValue: {
		type: String,
		required: false,
		default: ''
	},
	language: {
		type: String,
		default: 'javascript'
	},
	disabled: {
		type: [String, Boolean],
		default: false
	},
	style: {
		type: [Object],
		default: () => ({
			height: '400px'
		})
	}
})
const emit = defineEmits(['update:modelValue'])
const { modelValue, language, disabled, style } = toRefs(props)
const fullScreen = ref(false)
const lang = json()
// const extensions = [lang(), oneDark]
const extensions = [lang]
watch(
	() => modelValue.value,
	val => {
		code.value = val
	},
	{
		immediate: true,
		deep: true
	}
)
watch(
	() => code.value,
	val => {
		emit('update:modelValue', val)
	}
)
const comStyle = computed(() => ({ ...style.value, ...{ height: fullScreen.value ? '100%' : '400px' } }))
</script>
<template>
	<Codemirror
		v-model="code"
		:mode="'application/json'"
		:disabled="disabled"
		placeholder="暂无数据..."
		:style="comStyle"
		:autofocus="true"
		:indent-with-tab="true"
		:tab-size="2"
		:full-screen="true"
		:extensions="extensions"
		@ready="() => {}"
		@change="() => {}"
		@focus="() => {}"
		@blur="() => {}"
	></Codemirror>
</template>