Vue3 vue-codemirror代码编辑器

码砖咋说

于 2024-10-09 14:43:19 发布

阅读量573

点赞数 2

分类专栏： Vue 文章标签： vue.js 编辑器 javascript

本文链接：https://blog.csdn.net/lkr_lkr/article/details/142786537

版权

Vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

参考官网地址：https://www.npmjs.com/package/vue-codemirror

<script setup lang="ts">
import { ref } from "vue";
import { Codemirror } from "vue-codemirror";
import { oneDark } from "@codemirror/theme-one-dark";
import { yaml } from "@codemirror/lang-yaml";

const code = ref("");
const extensions = [yaml(), oneDark];

</script>

<template>
  <div>
    <codemirror
      v-model="code"
      placeholder="Code goes here..."
      :style="{ width: '1000px', height: '400px' }"
      :autofocus="true"
      :indent-with-tab="true"
      :tab-size="2"
      :extensions="extensions"
    />
  </div>
 </template>