如何采用element-plus，基于codemirror6实现sql在线编辑器？_IT百科

js在线sql编辑器，下载后导入IDE工具中，在浏览器访问sql-editor-master/index.html ，效果如下(含括号高亮显示、显示折叠栏)：

codeMirror官网https://codemirror.net/，官网js/css资源文件，也可自行去官网下载，但是官网比较慢，需引入的核心页面代码：

核心js代码：

//根据DOM元素的id构造出一个编辑器

var editor=CodeMirror.fromTextArea(document.getElementById("code"),{

mode:"text/c-mysql", //实现Java代码高亮

lineNumbers:true,

matchBrackets: true, //括号高亮匹配

theme:"default",

keyMap: "default",

extraKeys:{"Tab":"autocomplete"},

hint: CodeMirror.hint.sql,

lineWrapping: true, //是否换行

foldGutter: true, //是否折叠

gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], //添加行号栏，折叠栏

hintOptions: {

tables: tablewords

}

})

输入关键词提示等信息的配置：allWords.json

动态设置表字段等信息：

let tableWords = {"dual": []}

let tableName = "tn_user"

tableWords[tableName].push("userId")

editor.setOption("hintOptions", {"tables": tableWords})

tableWords json格式如下：

"tableWords": {

"cp_sku": [

"skuid",

"cpbh",

"tcbh"

"user_info": [

"user_id",

"user_token",

"user_name",

"user_type",

"password"

]

}

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.CodeMirror {

border: 1px solid #ccc

}

</style>

</head>

<body>

</body>

var mixedMode = {

scriptTypes: [{

matches: /\/x-handlebars-template|\/x-mustache/i,

mode: null

{

matches: /(text|application)\/(x-)?vb(a|script)/i,

mode: "vbscript"

}]

}

var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {

mode: mixedMode,

selectionPointer: true,

lineNumbers: false,

matchBrackets: true,

indentUnit: 4,

indentWithTabs: true

})

window.addEventListener("resize", autodivheight)

function autodivheight() {

var winHeight = 0

if (window.innerHeight) {

winHeight = window.innerHeight

} else if ((document.body) && (document.body.clientHeight)) {

winHeight = document.body.clientHeight

}

//通过深入Document内部对body进行检测，获取浏览器窗口高度

if (document.documentElement && document.documentElement.clientHeight) {

winHeight = document.documentElement.clientHeight

}

height = winHeight * 0.68

editor.setSize('100%', height)

document.getElementById("iframeResult").style.height = height + "px"

}

function resetCode() {

var initCode = "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\"> \n<title>\u83dc\u9e1f\u6559\u7a0b(runoob.com)<\/title> \n<style>\n#grad1 {\n height: 200px\n\tbackground-color: red \/* \u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u65f6\u663e\u793a *\/\n background-image: linear-gradient(#e66465, #9198e5)\n}\n<\/style>\n<\/head>\n<body>\n\n<h3>\u7ebf\u6027\u6e10\u53d8 - \u4ece\u4e0a\u5230\u4e0b<\/h3>\n<p>\u4ece\u9876\u90e8\u5f00\u59cb\u7684\u7ebf\u6027\u6e10\u53d8\u3002\u8d77\u70b9\u662f\u7ea2\u8272\uff0c\u6162\u6162\u8fc7\u6e21\u5230\u84dd\u8272\uff1a<\/p>\n\n<div id=\"grad1\"><\/div>\n\n<p><strong>\u6ce8\u610f\uff1a<\/strong> Internet Explorer 9 \u53ca\u4e4b\u524d\u7684\u7248\u672c\u4e0d\u652f\u6301\u6e10\u53d8\u3002<\/p>\n\n<\/body>\n<\/html>"

editor.getDoc().setValue(initCode)

submitTryit()

}

function submitTryit() {

var text = editor.getValue()

var patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im

var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im

var array_matches_head = patternHead.exec(text)

var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im

var array_matches_body = patternBody.exec(text)

var basepath_flag = 1

var basepath = ''

if (array_matches_head) {

text = text.replace('<head>', '<head>' + basepath)

} else if (patternHtml) {

text = text.replace('<html>', '<head>' + basepath + '</head>')

} else if (array_matches_body) {

text = text.replace('<body>', '<body>' + basepath)

} else {

text = basepath + text

}

var iframe = document.createElement("iframe")

iframe.setAttribute("frameborder", "0")

iframe.setAttribute("id", "iframeResult")

iframe.setAttribute("width", "100%")

document.getElementById("iframewrapper").innerHTML = ""

document.getElementById("iframewrapper").appendChild(iframe)

var ifrw = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument

ifrw.document.open()

ifrw.document.write(text)

ifrw.document.close()

autodivheight()

}

submitTryit()

autodivheight()

</script>

</html>

请采纳

首页

问答

综合

首页 >正文

Vue使用动态组件或者router时，当多个视图使用/指向同一个组件时，如何能够生成多个新实例？

H5W32021-05-03 16:23:01

我的需求：

我希望做一个列表组件，其list在组件内部自行管理；

我的SPA上有n个视图（动态生成），每个视图都使用上述组件，在动态组件和router" title="vue-router">vue-router的方式下发现，组件其实并没有生成多个实例。

查阅了资料和写了demo，发现好像只有显式使用组件tag或new出来挂载才会生成新实例。

看了一些别人写的demo，发现是用的其实就是同一个组件，同一个实例，只是每个视图传的data渲染不一样，这样实现或许更符合mvvm的思维。

但是我想知道，Vue是不推荐每一个视图都生成新实例呢？还是我的理解有误？存在动态生成视图并生成对应新实例的方法吗？

（有这个想法的原因可能是因我希望保留每一个页面的dom和data，不想每次切页面的时候重新渲染，对应不同视图用不同组件而言这个很简单，使用keep-alive就可以缓存，但是多个视图同一个组件的时候似乎是不一样的）

新手提问，请各位高手不吝赐教。

1.使用Vue动态组件：

// 动态视图

// 组件定义

var ItemView = Vue.component('ItemView', {

data: function(){

return {

}

created: function () {

console.log('created test')

// 注册视图

components: {

hot: ItemView ,

这种方式下，我在输入框内修改了name的值，切换视图时发现另一个的name也修改了。

我认为这说明了切换的是同一个实例，但我预期效果是两个实例，其data是两个孤立作用域。。

2.使用vue-router

// 路由映射

'/hot': {

component: require('ItemView.vue')

'/new': {

// ItemView.vue

data() {

return {

}

route: {

activate({next}){

console.log('activate')

this.pno = this.$route.name

next()

data({next}){

console.log(this.name)

next()

router方式下，切换路由是发现，activate只执行一次，data钩子输出的name都是第一次进入的路由名，在设置canReuse以后，activate每次都执行，输出正常。

但给我的感觉就是一个组件在切，每次在钩子里更改了数据。

但我希望是每个视图对应一个新的实例。

回答：

碰到了同样的问题，所以告诉你我的解决办法

在路由里配置component的时候使用extends, 或者使用es6的解构

import comp1 from './comp1'

routes = [

{

component: {extends:comp1}

{

// 使用解构实现

component: {...comp1}

也有尝试使用下面创建实例的方法，但是行不通

const View = Vue.extend(comp1)

...

回答：

不是很懂你说的：

Vue建议的是数据去驱动组件，视图也是组件，所以正确的想法应该是数据去驱动视图的变化。如果你想想有你所说的动态视图，你可以用动态路径去做，在视图内部根据路径的分类来显示相关的数据：

// 路由设置

// 两种类型：hot和new

'/:type/app': {

然后你在appView里面根据params里面的type字段来确定是哪个视图，然后用哪一份数据。

回答：

有些场景并不希望由数据重新驱动组件进行重新渲染。

例如我有一个仪表盘组件，一个仪表盘里面包含 n 个图表。我可能有多个仪表盘，如果使用数据驱动组件的话，我每次切换仪表盘时，都会造成仪表盘组件重新渲染，这就造成我的仪表盘切换其实很不流畅。

而且，如果由数据重新驱动，也就意味着我可能还要维护仪表盘内部的一些数据（例如仪表盘组件内部有筛选按钮）。

在这种情况下，我更希望是可以针对每一份仪表盘数据，生成一个新的仪表盘组件实例，然后我在各个实例之间进行切换。

回答：

刚找到了解决方案!!!!

<keep-alive>

<router-view :key="key"></router-view>

</keep-alive>

computed: {

// 默认情况下不同路由引入同一个组件不触发created 数据作用域是同一个，加一个可以加以区别。

key() {

return this.$route.name !== undefined ? this.$route.name : this.$route

回答：

https://github.com/zack24q/vu...

这个似乎可用

回答：

单例组件？

var list = []

export default {

data(){

return {

list: list

上一篇：无

下一篇：无

其他人也看了：

vueroutervue-routervue router

vue codemirror实现在线代码编译器效果

2022-02-18

Vue实现页面的局部刷新(router-view页面刷新)

2022-02-18

Vue router 路由守卫详解

2022-02-18

vue项目刷新当前页面的三种方法

2022-02-18

详解Vue router路由

2022-02-18

Nginx限制IP并发数与下载速度的方法

2022-03-23

nginx配置gzip压缩页面

2022-03-23

nginx日志分割 for linux

2022-03-23

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11537013.html

如何采用element-plus，基于codemirror6实现sql在线编辑器？

发表评论

评论列表（0条）