完善playground
parent
22aecaf220
commit
2790776723
|
|
@ -15,24 +15,62 @@ import {
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
lang: { type: String, default: 'vue' },
|
lang: { type: String, default: 'vue' },
|
||||||
code: String
|
code: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
code(v) {
|
||||||
|
let doc = this.$view.state.doc
|
||||||
|
|
||||||
|
this.$view.dispatch({
|
||||||
|
changes: {
|
||||||
|
from: 0,
|
||||||
|
to: doc.length,
|
||||||
|
insert: v
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
let lang = this.lang
|
||||||
|
this.$last = this.code
|
||||||
|
|
||||||
this.$view = new EditorView({
|
this.$view = new EditorView({
|
||||||
doc: this.code,
|
doc: this.code,
|
||||||
extensions: minimalSetup(vue(), EditorView.lineWrapping),
|
extensions: minimalSetup(
|
||||||
|
lang === 'html'
|
||||||
|
? html()
|
||||||
|
: lang === 'js'
|
||||||
|
? javascript()
|
||||||
|
: lang === 'css'
|
||||||
|
? css()
|
||||||
|
: vue(),
|
||||||
|
EditorView.lineWrapping,
|
||||||
|
// 监听代码变化
|
||||||
|
EditorView.updateListener.of(v => {
|
||||||
|
let value = v.state.doc.toString().trim()
|
||||||
|
if (!this.$last || value === this.$last) {
|
||||||
|
this.$last = value
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$last = value
|
||||||
|
this.$emit('change', value, lang)
|
||||||
|
})
|
||||||
|
),
|
||||||
parent: this.$refs.container
|
parent: this.$refs.container
|
||||||
})
|
})
|
||||||
}
|
},
|
||||||
|
|
||||||
|
methods: {}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
width: 50%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border-right: 1px solid var(--color-plain-2);
|
|
||||||
}
|
}
|
||||||
.cm-editor {
|
.cm-editor {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
<nav class="menu">
|
<nav class="menu">
|
||||||
<a :class="{ active: nav === 'index' }" href="./index.html">主页</a>
|
<a :class="{ active: nav === 'index' }" href="./index.html">主页</a>
|
||||||
<a :class="{ active: nav === 'docs' }" href="./docs.html">文档</a>
|
<a :class="{ active: nav === 'docs' }" href="./docs.html">文档</a>
|
||||||
|
<a href="/playground.html">试一试</a>
|
||||||
<a target="_blank" href="https://github.com/bd-js/wcui"
|
<a target="_blank" href="https://github.com/bd-js/wcui"
|
||||||
><img class="github" src="/assets/github.svg" alt="Web Components"
|
><img class="github" src="/assets/github.svg" alt="Web Components"
|
||||||
/></a>
|
/></a>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<Topbar />
|
<Topbar />
|
||||||
<div class="playground">
|
<div class="playground">
|
||||||
<CodeEditor :code="code" />
|
<wc-tabs class="editor">
|
||||||
<Preview />
|
<wc-tab label="html" name="html">
|
||||||
|
<CodeEditor lang="html" :code="html" @change="updateCode" />
|
||||||
|
</wc-tab>
|
||||||
|
<wc-tab label="javascript" name="js">
|
||||||
|
<CodeEditor lang="js" :code="js" @change="updateCode" />
|
||||||
|
</wc-tab>
|
||||||
|
<wc-tab label="css" name="css">
|
||||||
|
<CodeEditor lang="css" :code="css" @change="updateCode" />
|
||||||
|
</wc-tab>
|
||||||
|
</wc-tabs>
|
||||||
|
<Preview :code="preview" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -11,36 +21,105 @@ import CodeEditor from '@/components/code-editor.vue'
|
||||||
import Topbar from './views/topbar.vue'
|
import Topbar from './views/topbar.vue'
|
||||||
import Preview from './views/preview.vue'
|
import Preview from './views/preview.vue'
|
||||||
|
|
||||||
export default {
|
import { gzip, ungzip } from '@bytedo/gzip'
|
||||||
components: { Topbar, CodeEditor, Preview },
|
|
||||||
data() {
|
const template = `<!doctype html>
|
||||||
return {
|
|
||||||
code: `<!doctype html>
|
|
||||||
<html lang="zh-CN">
|
<html lang="zh-CN">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||||
<title>{{title}}</title>
|
<link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css">
|
||||||
<meta name="keywords" content="{{keywords}}">
|
{{css}}
|
||||||
<meta name="description" content="{{description}}">
|
|
||||||
<link rel="stylesheet" href="//jscdn.ink/@bytedo/wcui/1.0.12/css/reset-basic.css">
|
|
||||||
<script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"><\/script>
|
<script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"><\/script>
|
||||||
<script type="importmap">{{importmap}}<\/script>
|
<script type="importmap">${JSON.stringify({
|
||||||
<\/head>
|
imports: {
|
||||||
|
vue: '//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js',
|
||||||
|
'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js',
|
||||||
|
fetch: '//jscdn.ink/@bytedo/fetch/latest/next.js',
|
||||||
|
'@bytedo/editor': '//jscdn.ink/@bytedo/editor/latest/index.js',
|
||||||
|
'@bytedo/gzip': '//jscdn.ink/@bytedo/gzip/latest/index.js',
|
||||||
|
'@bd/core': '//jscdn.ink/@bd/core/latest/index.js'
|
||||||
|
}
|
||||||
|
})}<\/script>
|
||||||
|
<script type="module">
|
||||||
|
{{js}}
|
||||||
|
<\/script>
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="app noselect"></div>
|
{{html}}
|
||||||
<script src="main.js"><\/script>
|
|
||||||
<\/body>
|
<\/body>
|
||||||
<\/html>
|
<\/html>
|
||||||
`
|
`
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { Topbar, CodeEditor, Preview },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
html: '',
|
||||||
|
js: '',
|
||||||
|
css: '',
|
||||||
|
preview: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
//
|
||||||
|
this.$needUpdate = true
|
||||||
|
|
||||||
|
window.addEventListener('hashchange', ev => {
|
||||||
|
this.handleHashChange()
|
||||||
|
})
|
||||||
|
this.handleHashChange()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleHashChange() {
|
||||||
|
if (this.$needUpdate) {
|
||||||
|
let code = location.hash.slice(1)
|
||||||
|
if (code) {
|
||||||
|
try {
|
||||||
|
code = ungzip(code)
|
||||||
|
code = JSON.parse(code)
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.html = code.html
|
||||||
|
this.js = code.js
|
||||||
|
this.css = code.css
|
||||||
|
this.updatePreview()
|
||||||
|
}
|
||||||
|
this.$needUpdate = true
|
||||||
|
},
|
||||||
|
|
||||||
|
updateCode(code, lang) {
|
||||||
|
this[lang] = code
|
||||||
|
this.updatePreview(true)
|
||||||
|
},
|
||||||
|
updatePreview(sync) {
|
||||||
|
let { html, js, css } = this
|
||||||
|
|
||||||
|
if (sync) {
|
||||||
|
let code = gzip(JSON.stringify({ html, js, css }))
|
||||||
|
this.$needUpdate = false
|
||||||
|
location.hash = code
|
||||||
|
}
|
||||||
|
|
||||||
|
this.preview = template
|
||||||
|
.replace('{{css}}', css)
|
||||||
|
.replace('{{html}}', html)
|
||||||
|
.replace('{{js}}', js)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.app {
|
body {
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
#app {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
@ -48,7 +127,12 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.playground {
|
.playground {
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: calc(100vh - 48px);
|
}
|
||||||
|
|
||||||
|
.editor {
|
||||||
|
width: 50%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,12 @@
|
||||||
|
/**
|
||||||
|
* {}
|
||||||
|
* @author yutent<yutent.io@gmail.com>
|
||||||
|
* @date 2023/04/26 18:28:13
|
||||||
|
*/
|
||||||
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
|
import '//jscdn.ink/@bd/ui/latest/tabs/index.js'
|
||||||
|
|
||||||
import App from './app.vue'
|
import App from './app.vue'
|
||||||
|
|
||||||
import store from './store'
|
import store from './store'
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,66 @@
|
||||||
<template>
|
<template>
|
||||||
<main class="preview"></main>
|
<main class="preview">
|
||||||
|
<div class="loading">
|
||||||
|
<span class="thumb" :style="{ width: progress + '%' }"></span>
|
||||||
|
</div>
|
||||||
|
<iframe class="web" ref="preview"></iframe>
|
||||||
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { nextTick } from 'vue'
|
||||||
|
|
||||||
|
let startTime = 0
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
props: {
|
||||||
|
code: ''
|
||||||
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
content: '欢迎访问~~ 这是首页'
|
progress: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
code(v) {
|
||||||
|
// console.log(v)
|
||||||
|
this.updatePreview(v)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
loading(stamp) {
|
||||||
|
if (startTime === 0) {
|
||||||
|
startTime = stamp
|
||||||
|
}
|
||||||
|
|
||||||
|
let _time = stamp - startTime
|
||||||
|
|
||||||
|
// _time / 2000 * 100 %
|
||||||
|
this.progress = ~~(_time / 20)
|
||||||
|
|
||||||
|
if (_time > 2000) {
|
||||||
|
this.progress = 0
|
||||||
|
let doc = this.$refs.preview.contentDocument
|
||||||
|
|
||||||
|
try {
|
||||||
|
doc.open()
|
||||||
|
doc.write(this.code)
|
||||||
|
doc.close()
|
||||||
|
} catch (e) {}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(this.loading)
|
||||||
|
},
|
||||||
|
|
||||||
|
updatePreview(html) {
|
||||||
|
startTime = 0
|
||||||
|
this.progress = 0
|
||||||
|
|
||||||
|
requestAnimationFrame(this.loading)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -14,7 +68,42 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.preview {
|
.preview {
|
||||||
width: 50%;
|
position: relative;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
width: 50%;
|
||||||
|
border-left: 1px solid var(--color-plain-2);
|
||||||
|
}
|
||||||
|
.web {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.loading {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
|
||||||
|
.thumb {
|
||||||
|
width: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--color-blue-1);
|
||||||
|
box-shadow: 0 0 5px var(--color-blue-1);
|
||||||
|
|
||||||
|
&.loading {
|
||||||
|
animation: loading 3s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loading {
|
||||||
|
from {
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<header class="topbar noselect">
|
<header class="topbar noselect">
|
||||||
<a class="logo">@bd/ui playground</a>
|
<a class="logo">@bd.js playground</a>
|
||||||
|
|
||||||
<a class="github" href="//github.com/bd-js/wcui" target="_blank">github</a>
|
<span class="group">
|
||||||
|
<a class="link" href="/@wcui/index.html">返回首页</a>
|
||||||
|
<a class="link" href="//github.com/bd-js" target="_blank">
|
||||||
|
<img class="github" src="/assets/github.svg" alt="Web Components" />
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -32,7 +37,18 @@ export default {
|
||||||
color: var(--color-red-2);
|
color: var(--color-red-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.github {
|
.group {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-left: 16px;
|
||||||
color: var(--color-dark-1);
|
color: var(--color-dark-1);
|
||||||
|
img {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue