需求是想要在瀏覽器端可以實現代碼修改后顯示出來

使用了 vue-codemirror 做代碼的編寫和修改

可以獲取到修改的代碼內容

類似jsrun或者codepen的效果

大概效果如圖

才疏學淺，不太清楚如何用這三部分在右側渲染出來，或者說是把三個部分寫到一起渲染出來，類似于寫一個vue的組件

求大佬指點

主要代碼

運行

id="codemirror-html"

v-model="htmlCode"

:options="cmOptions"

@cursorActivity="onCmCursorActivityHtml"

@ready="onCmReadyHtml"

@focus="onCmFocusHtml"

@blur="onCmBlurHtml"

/>

id="codemirror-css"

v-model="cssCode"

:options="cmOptions"

@cursorActivity="onCmCursorActivityCss"

@ready="onCmReadyCss"

@focus="onCmFocusCss"

@blur="onCmBlurCss"

/>

id="codemirror-js"

v-model="jsCode"

:options="cmOptions"

@cursorActivity="onCmCursorActivityJs"

@ready="onCmReadyJs"

@focus="onCmFocusJs"

@blur="onCmBlurJs"

/>

import dedent from "dedent";

import { codemirror } from "vue-codemirror";

// base style

import "codemirror/lib/codemirror.css";

// theme css

import "codemirror/theme/base16-dark.css";

// language

import "codemirror/mode/vue/vue.js";

// active-line.js

import "codemirror/addon/selection/active-line.js";

// styleSelectedText

import "codemirror/addon/selection/mark-selection.js";

import "codemirror/addon/search/searchcursor.js";

// highlightSelectionMatches

import "codemirror/addon/scroll/annotatescrollbar.js";

import "codemirror/addon/search/matchesonscrollbar.js";

import "codemirror/addon/search/searchcursor.js";

import "codemirror/addon/search/match-highlighter.js";

// keyMap

import "codemirror/mode/clike/clike.js";

import "codemirror/addon/edit/matchbrackets.js";

import "codemirror/addon/comment/comment.js";

import "codemirror/addon/dialog/dialog.js";

import "codemirror/addon/dialog/dialog.css";

import "codemirror/addon/search/searchcursor.js";

import "codemirror/addon/search/search.js";

import "codemirror/keymap/sublime.js";

// foldGutter

import "codemirror/addon/fold/foldgutter.css";

import "codemirror/addon/fold/brace-fold.js";

import "codemirror/addon/fold/comment-fold.js";

import "codemirror/addon/fold/foldcode.js";

import "codemirror/addon/fold/foldgutter.js";

import "codemirror/addon/fold/indent-fold.js";

import "codemirror/addon/fold/markdown-fold.js";

import "codemirror/addon/fold/xml-fold.js";

let iframeDom = document.getElementById("iframeCode");

import Vue from "vue";

export default {

name: "Code",

props: {},

components: {

codemirror

},

data() {

return {

htmlCode: dedent`

{{ msg }}

默認按鈕

主要按鈕

成功按鈕

信息按鈕

警告按鈕

危險按鈕

`,

cssCode: dedent`

h1 {

margin: 40px 0 0;

}

`,

jsCode: dedent`

var mian = {

data: () {

return {

msg: 'hello world!'

}

}

}

var Ctor = Vue.extend(main)

new Ctor.$mount('#demo-code')

`,

cmOptions: {

tabSize: 4,

foldGutter: true,

styleActiveLine: true,

lineNumbers: true,

line: true,

keyMap: "sublime",

mode: "text/x-vue",

theme: "base16-dark"

}

};

},

computed: {},

watch: {},

methods: {

onCmCursorActivityHtml(codemirror) {},

onCmReadyHtml(codemirror) {},

onCmFocusHtml(codemirror) {},

onCmBlurHtml(codemirror) {},

onCmCursorActivityCss(codemirror) {},

onCmReadyCss(codemirror) {},

onCmFocusCss(codemirror) {},

onCmBlurCss(codemirror) {},

onCmCursorActivityJs(codemirror) {},

onCmReadyJs(codemirror) {},

onCmFocusJs(codemirror) {},

onCmBlurJs(codemirror) {},

runCode() {}

},

created() {},

mounted() {

this.runCode();

},

beforeDestroy() {}

};

.code-root {

width: 100%;

height: 100%;

display: flex;

.codes-box {

position: relative;

width: 50%;

height: 100%;

.run-btn {

position: absolute;

top: 0px;

right: 0px;

z-index: 999;

}

}

#iframeCode {

width: 50%;

height: 100%;

}

}

.vue-codemirror {

height: 33.33%;

.CodeMirror {

height: 100%;

}

}

總結

以上是生活随笔為你收集整理的vue 字符存在_vue中如何渲染字符串，字符串是组件类型的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。