console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Element UI Online Editor</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入Vue和Element UI -->
	<script src="https://unpkg.com/vue@2/dist/vue.js">

	</script>
	<script src="https://unpkg.com/element-ui/lib/index.js">

	</script>
	<style>
		.container {
			padding: 20px;
			height: 100vh;
			box-sizing: border-box;
		}

		.editor-container {
			display: flex;
			height: calc(100% - 60px);
			gap: 20px;
		}

		.code-editor {
			flex: 1;
			border: 1px solid #ddd;
			padding: 10px;
		}

		.preview-area {
			flex: 1;
			border: 1px solid #ddd;
			padding: 20px;
			overflow: auto;
		}

		textarea {
			width: 100%;
			height: 100%;
			padding: 10px;
			border: none;
			font-family: monospace;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="container">
			<el-alert title="实时Element UI编辑器" type="success" :closable="false"></el-alert>

			<div class="editor-container">
				<div class="code-editor">
					<el-tabs v-model="activeTab">
						<el-tab-pane label="HTML" name="html">
							<textarea v-model="htmlCode"></textarea>
                            <!-- `checked` 为 true 或 false -->
                            <el-checkbox @change="(val) => {checkchange(item,val)}" v-for="item in options" :key="item.key"
                            :label="item.label" v-model="checked==item.key">{{item.label}}</el-checkbox>
                        </el-tab-pane>
                        <el-tab-pane label="JavaScript" name="js">
                            <textarea v-model="jsCode"></textarea>
                        </el-tab-pane>
                        <el-tab-pane label="CSS" name="css">
                            <textarea v-model="cssCode"></textarea>
                        </el-tab-pane>r
                    </el-tabs>
                </div>
                
                <div class="preview-area">
                    <div id="preview"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                checked: 0,
                options:[{key:0,label:"是"},{key:1,label:"否"}],
                activeTab: 'html',
                htmlCode: `<el-button type="primary">主要按钮</el-button>
<el-input v-model="input" placeholder="请输入内容" style="width: 200px; margin-top: 10px;"></el-input>
<el-date-picker v-model="date" type="date" placeholder="选择日期" style="margin-top: 10px;"></el-date-picker>`,
                jsCode: `new Vue({
    el: '#preview',
    data: {
        input: '',
        date: ''
    }
});`,
                cssCode: `#preview {
    padding: 20px;
}`
            },
            watch: {
                htmlCode: 'updatePreview',
                jsCode: 'updatePreview',
                cssCode: 'updatePreview'
            },
            mounted() {
                this.updatePreview();
            },
            methods: {
                checkchange(item,val){
                   console.log(item,val)
                   this.checked= val? item.key : null
                   console.log("checked",this.checked)
                },
                updatePreview() {
                    // 清空预览区域
                    const preview = document.getElementById('preview');
                    preview.innerHTML = '';
                    
                    // 动态添加样式
                    const style = document.createElement('style');
                    style.textContent = this.cssCode;
                    document.head.appendChild(style);
                    
                    try {
                        // 创建组合HTML
                        const wrapper = document.createElement('div');
                        wrapper.innerHTML = `
                            <div id="preview-content">
                                ${this.htmlCode}
                            </div>
                        `;
                        
                        preview.appendChild(wrapper);
                        
                        // 执行JavaScript
                        const script = new Function(this.jsCode.replace(/new Vue\(/g, 'return new Vue('));
                        const vm = script();
                        if (vm) vm.$mount('#preview-content');
                    } catch (error) {
                        console.error(error);
                        preview.innerHTML = `<div style="color: red">Error: ${error.message}</div>`;
                    }
                }
            }
        });
    </script>
</body>
</html>