codeMirror 5.65.2 使用

最新推荐文章于 2024-05-16 15:01:33 发布

u013023515

最新推荐文章于 2024-05-16 15:01:33 发布

阅读量253

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/u013023515/article/details/127524874

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<template>
    <div class="mirror-content">
        <p>请输入：</p>
        <textarea ref="textarea"></textarea>
    </div>
</template>
<script>
import { onMounted, reactive, ref, toRefs, watch } from 'vue';
import Codemirror from 'codemirror';
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/sql/sql'
import 'codemirror/addon/lint/lint'
export default {
    props: {
        modelValue: {
            type: String,
            default: ''
        }
    },
    setup(props, ctx) {
        const textarea = ref("")
        const options = {
            mode: 'sql',
            lineNumbers: true,
        }
        const state = reactive({
            code: props.modelValue
        })

        let editor;
        onMounted(() => {
            editor = Codemirror.fromTextArea(textarea.value, options)
            editor.setValue(props.modelValue)
            editor.setSize(500, 300)
            editor.on('change', (editor, changeObj) => {
                ctx.emit("update:modelValue", editor.getValue())

            })
        })
        watch(() => props.modelValue, () => {
            editor.setValue(props.modelValue)
        })
        return {
            textarea,
            ...toRefs(state)
        }
    }
}
</script>