在 Vue 中集成代码编辑器 |
您所在的位置:网站首页 › vuesql编辑器 › 在 Vue 中集成代码编辑器 |
开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天,点击查看活动详情 代码编辑器也是前端会遇到的一种场景,除了要满足编辑和展示代码的功能,还会有一些样式的要求。 在 Vue 项目中可以使用 vue-codemirror 来集成代码编辑器。关于 CodeMirror 的具体细节也可参照官方:CodeMirror。 在 Vue2 和 Vue3 中,代码编辑器使用的方式不同,注意按照项目使用的版本来进行相应的引入。 yarn add codemirror-editor-vue3 -S // 或使用 npm install引入相关文件: import Codemirror from 'codemirror-editor-vue3'; // 编辑器代码格式 import 'codemirror/mode/javascript/javascript.js'; // 自动刷新 import 'codemirror/addon/display/autorefresh'; // 主题 import 'codemirror/theme/dracula.css';使用: code:就是需要显示在代码编辑器中的内容 options 属性: autorefresh: true, // 是否自动刷新 smartIndent: true, // 自动缩进 tabSize: 4, // 缩进单元格为 4 个空格 mode: 'application/json', //编辑器的编程语言,比如:'javascript' theme: 'dracula', // 主题,使用主体需要引入相应的 css 文件 line: true, // 是否显示行数 viewportMargin: Infinity, // 高度自适应 highlightDifferences: true, autofocus: false, indentUnit: 2, readOnly: true, // 只读 showCursorWhenSelecting: true, firstLineNumber: 1, matchBrackets: true,//括号匹配 主题色其中,theme 属性如果为空值,显示默认主题,也就是 白色的: 更换主题后,运行效果如下: 在插件的 theme 文件中可以看到很多主题,还可以引入掘金的主题。 编辑器的代码格式也是需要进行引入的,比如 JSON 格式、js 等等。 使用代码编辑器的时候,往往还会搭配一个复制功能,也可以利用代码编辑器做代码的导入。下面来实现一个复制功能。 clipboard 是一个非常轻量的复制到剪贴板插件,安装 Vue3 版本的 vue-clipboard3: npm install vue-clipboard3 --save引入及使用: import useClipboard from 'vue-clipboard3' copyHandle() { const { toClipboard } = useClipboard() this.copy = async () => { try { await toClipboard('需要复制的数据') console.log('复制成功') } catch (e) { console.error(e) } } } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |