前端页面展示SQL语句或其他代码语句

今天接到一个有关于需要在前端展示SQL语句的需求,在网上找了好半天,本来我都打算使用txstarea来进行展示了。还是功夫不负有心人,终于被我找见了,感谢各位互联网大佬的无私贡献。

实现效果

前端页面展示SQL语句或其他代码语句_第1张图片
功能涵盖大部分语言,应该是可以满足大部分需要在前端展示代码的功能需求。


具体实现

1.首先下载使用NPM包

npm i vue-codemirror -S

2.封装组件






3.使用组件

    1.可以通过传入value来展示代码内容
    2.通过传入language表明传入的语言类型
    3.如果需要拿到动态改变的内容可以监听input事件   获取动态改变的内容
    4.如果对编辑器主题不满意可以去 codemirror主题 这里挑选一个自己满意的主题然后更改组件内容的对应的主题

你可能感兴趣的:(Vue,JS,JS,SQL,Vue,codemirror)