标签：vue -- Vue 编辑器 01 import codemirror

1、下载

npm install vue-codemirror --save

2、使用

• main.ts代码：

import Vue from 'vue';
import VueCodemirror from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';

Vue.use(VueCodemirror);

• 组件中代码：

<template>
  <div class="dbServices-sqlconfig">
      <codemirror v-model="sqlText" :options="cmOption" />
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { codemirror } from 'vue-codemirror';
import 'codemirror/mode/sql/sql.js';
import 'codemirror/theme/solarized.css';

@Component({ components: { codemirror } })
export default class demo extends Vue {
	sqlText = `
	-- SQL Mode for CodeMirror
	SELECT SQL_NO_CACHE DISTINCT
	    @var1 AS \`val1\`, @'val2', @global.'sql_mode',
	    1.1 AS \`float_val\`, .14 AS \`another_float\`, 0.09e3 AS \`int_with_esp\`,
	    0xFA5 AS \`hex\`, x'fa5' AS \`hex2\`, 0b101 AS \`bin\`, b'101' AS \`bin2\`,
	    DATE '1994-01-01' AS \`sql_date\`, { T "1994-01-01" } AS \`odbc_date\`,
	    'my string', _utf8'your string', N'her string',
	        TRUE, FALSE, UNKNOWN
	  FROM DUAL
	  -- space needed after '--'
	  # 1 line comment
	  LIMIT 1 OFFSET 0;
	`;
	cmOption = {
		tabSize: 4,
	    styleActiveLine: true,
	    lineNumbers: true,
	    line: true,
	    mode: 'text/x-mysql',
	    theme: 'solarized light'
	};
}

3、效果

4、优化

这里用的是SQL的语法，我们发现在编辑器上方和下方都有黑的的阴影，这里我选择去掉这个阴影，只需要在代码中修改一下css即可。

<style lang="scss" scoped>
	::v-deep .cm-s-solarized.CodeMirror {
	  box-shadow: none;
	}
</style>

5、最终展示

标签：vue,--,Vue,编辑器,01,import,codemirror
来源： https://blog.csdn.net/SmallTeddy/article/details/120460321

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。