Merge branch 'master' of github.com:bd-js/bd-js.github.io
commit
b6e395a759
|
|
@ -15,24 +15,62 @@ import {
|
|||
export default {
|
||||
props: {
|
||||
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() {
|
||||
let lang = this.lang
|
||||
this.$last = this.code
|
||||
|
||||
this.$view = new EditorView({
|
||||
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
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid var(--color-plain-2);
|
||||
}
|
||||
.cm-editor {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './app.vue'
|
||||
|
||||
// import '//jscdn.ink/@bd/ui/latest/form/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/form/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/markd/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/sandbox/index.js'
|
||||
// import '//127.0.0.1:8090/dist/markd/index.js'
|
||||
// import '//127.0.0.1:8090/dist/sandbox/index.js'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,98 +1,77 @@
|
|||
<template>
|
||||
<Topbar />
|
||||
|
||||
<banner class="banner flex-ac">
|
||||
<div class="wrapper flex-ac">
|
||||
<h1>轻量级模块化组件库</h1>
|
||||
<cite>一款基于Web Components, 面向未来的桌面UI组件库</cite>
|
||||
<cite>不挑框架, 可无缝适配React, Angular, Avalon, Vue, jQuery...</cite>
|
||||
<cite>网站快速成型工具</cite>
|
||||
<banner class="banner">
|
||||
<div class="wrapper">
|
||||
<section class="slogen">
|
||||
<h1>轻量级模块化组件库</h1>
|
||||
<cite>一款基于Web Components, 面向未来的桌面UI组件库</cite>
|
||||
<cite>不挑框架, 可无缝适配React, Angular, Avalon, Vue, jQuery...</cite>
|
||||
<cite>网站快速成型工具</cite>
|
||||
<wc-space gap="xxxl">
|
||||
<wc-button size="xl" round solid @click="navto('/@wcui/docs.html')"
|
||||
>开始使用</wc-button
|
||||
>
|
||||
<wc-button
|
||||
size="xl"
|
||||
type="secondary"
|
||||
round
|
||||
@click="navto('https://github.com/bd-js/wcui')"
|
||||
>GitHub</wc-button
|
||||
>
|
||||
</wc-space>
|
||||
<wc-space>
|
||||
<img src="https://img.shields.io/npm/dt/@bd/ui.svg" />
|
||||
<img src="https://img.shields.io/npm/v/@bd/ui.svg" />
|
||||
<img src="https://img.shields.io/github/stars/bd-js/wcui.svg" />
|
||||
</wc-space>
|
||||
</section>
|
||||
|
||||
<div class="blur-bg"></div>
|
||||
<svg class="line" width="1200" height="300">
|
||||
<g>
|
||||
<path
|
||||
d="M20,283 C288,288 604,64 1080,16"
|
||||
fill="none"
|
||||
stroke="var(--color-blue-a)"
|
||||
stroke-width="0.5"
|
||||
/>
|
||||
<path
|
||||
d="M424,300 C512,288 588,108 1080,23"
|
||||
fill="none"
|
||||
stroke="var(--color-dark-a)"
|
||||
stroke-width="0.5"
|
||||
/>
|
||||
<path
|
||||
d="M234,300 C512,288 588,108 1080,63"
|
||||
fill="none"
|
||||
stroke="var(--color-teal-a)"
|
||||
stroke-width="0.5"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</banner>
|
||||
|
||||
<div class="colorful flex-ac">
|
||||
<div class="wrapper flex-ac">
|
||||
<header class="title">- 主题配色 -</header>
|
||||
<section>
|
||||
<ul class="blue">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="teal">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="green">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="red">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="orange">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="plain">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="grey">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul class="dark">
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="basic-demo flex-ac">
|
||||
<div class="wrapper flex-ac">
|
||||
<header class="title">Buttons</header>
|
||||
<section>
|
||||
<wc-button type="primary">Primary Button</wc-button>
|
||||
<wc-button type="secondary">Secondary Button</wc-button>
|
||||
<wc-button type="info">Info Button</wc-button>
|
||||
<wc-button type="help">Help Button</wc-button>
|
||||
</section>
|
||||
<section>
|
||||
<wc-button solid>Solid Button</wc-button>
|
||||
<wc-button solid type="success">Success Button</wc-button>
|
||||
<wc-button solid type="warning">Warning Button</wc-button>
|
||||
<wc-button solid type="danger">Danger Button</wc-button>
|
||||
<div class="feature">
|
||||
<div class="wrapper">
|
||||
<section class="item">
|
||||
<wc-icon name="client"></wc-icon>
|
||||
<h3>基于原生影子节点</h3>
|
||||
<cite>优秀的兼容性, 不挑框架。</cite>
|
||||
</section>
|
||||
|
||||
<header class="title">Inputs</header>
|
||||
<section>
|
||||
<wc-input placeholder="Normal Input"></wc-input>
|
||||
<wc-input placeholder="Success Input" type="success"></wc-input>
|
||||
<wc-input placeholder="Danger Input" type="danger"></wc-input>
|
||||
<wc-input placeholder="Disabled Input" disabled></wc-input>
|
||||
<section class="item">
|
||||
<wc-icon name="finger-print"></wc-icon>
|
||||
<h3>原生的隔离能力</h3>
|
||||
<cite>无样式污染, 灵活的拓展接口</cite>
|
||||
</section>
|
||||
|
||||
<div class="more">
|
||||
<wc-link type="danger" to="./docs.html">更多组件...</wc-link>
|
||||
</div>
|
||||
<section class="item">
|
||||
<wc-icon name="fly"></wc-icon>
|
||||
<h3>基于强大的@bd/core</h3>
|
||||
<cite>Vue一样的开发体验</cite>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -106,6 +85,11 @@ export default {
|
|||
components: {
|
||||
Topbar,
|
||||
Footer
|
||||
},
|
||||
methods: {
|
||||
navto(target) {
|
||||
location.href = target
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -122,7 +106,7 @@ a {
|
|||
}
|
||||
|
||||
.wrapper {
|
||||
width: 960px;
|
||||
width: 1024px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
|
|
@ -130,239 +114,112 @@ a {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 400px;
|
||||
background: linear-gradient(to right bottom, #155799, #157879, #159857);
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 48px 0;
|
||||
|
||||
.slogen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.blur-bg {
|
||||
width: 212px;
|
||||
height: 320px;
|
||||
border-radius: 50%;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--color-blue-a),
|
||||
var(--color-dark-a) 60%
|
||||
);
|
||||
transform: scale(1.25);
|
||||
filter: blur(50px);
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 2;
|
||||
font-size: 38px;
|
||||
font-weight: normal;
|
||||
color: var(--color-plain-1);
|
||||
}
|
||||
cite {
|
||||
line-height: 2;
|
||||
line-height: 1.75;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
color: var(--color-plain-3);
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 64px;
|
||||
text-align: center;
|
||||
|
||||
wc-button {
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.colorful {
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--color-plain-1);
|
||||
|
||||
.wrapper {
|
||||
flex-direction: column;
|
||||
padding: 32px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 64px 0;
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
line-height: 3;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
color: var(--color-grey-2);
|
||||
}
|
||||
|
||||
section {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
height: 160px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: #f7f8fb;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
||||
transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
|
||||
|
||||
ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
li {
|
||||
height: 56px;
|
||||
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.03);
|
||||
&:hover {
|
||||
background: #fff;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
ul:nth-child(2),
|
||||
ul:nth-child(5) {
|
||||
li {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
ul:nth-child(3),
|
||||
ul:nth-child(7) {
|
||||
li {
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-blue-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-blue-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-blue-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-blue-3);
|
||||
}
|
||||
}
|
||||
.teal {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-teal-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-teal-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-teal-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-teal-3);
|
||||
}
|
||||
}
|
||||
.green {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-green-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-green-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-green-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-green-3);
|
||||
}
|
||||
}
|
||||
.red {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-red-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-red-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-red-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-red-3);
|
||||
}
|
||||
}
|
||||
.orange {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-orange-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-orange-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-orange-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-orange-3);
|
||||
}
|
||||
}
|
||||
.plain {
|
||||
li:nth-child(1) {
|
||||
background: #f7f8fb;
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-plain-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
wc-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--color-plain-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-plain-3);
|
||||
h3 {
|
||||
margin-top: 16px;
|
||||
line-height: 2;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.grey {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-grey-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-grey-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-grey-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-grey-3);
|
||||
}
|
||||
}
|
||||
.dark {
|
||||
li:nth-child(1) {
|
||||
background: var(--color-dark-a);
|
||||
}
|
||||
li:nth-child(2) {
|
||||
background: var(--color-dark-1);
|
||||
}
|
||||
li:nth-child(3) {
|
||||
background: var(--color-dark-2);
|
||||
}
|
||||
li:nth-child(4) {
|
||||
background: var(--color-dark-3);
|
||||
|
||||
cite {
|
||||
font-size: 13px;
|
||||
color: var(--color-grey-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.basic-demo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (min-width: 1440px) {
|
||||
.wrapper {
|
||||
flex-direction: column;
|
||||
padding: 32px 0;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 2;
|
||||
font-size: 22px;
|
||||
color: var(--color-grey-2);
|
||||
.banner .wrapper {
|
||||
h1 {
|
||||
font-size: 46px;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
|
||||
wc-button,
|
||||
wc-input {
|
||||
flex: 1;
|
||||
margin: 0 16px;
|
||||
}
|
||||
cite {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.more {
|
||||
text-align: center;
|
||||
a {
|
||||
display: inline-flex;
|
||||
padding: 4px 16px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-red-1);
|
||||
}
|
||||
}
|
||||
wc-button {
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<footer class="footer">
|
||||
<div class="wrapper">
|
||||
<section class="nav">
|
||||
<a href="/">@bdjs 首页</a> |
|
||||
<a href="/">bd.js 首页</a> |
|
||||
<a
|
||||
href="https://github.com/bd-js/wcui/blob/master/LICENSE"
|
||||
target="_blank"
|
||||
|
|
@ -30,7 +30,7 @@ export default {}
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 260px;
|
||||
height: 240px;
|
||||
border-top: 1px solid var(--color-plain-3);
|
||||
|
||||
.wrapper {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<nav class="menu">
|
||||
<a :class="{ active: nav === 'index' }" href="./index.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"
|
||||
><img class="github" src="/assets/github.svg" alt="Web Components"
|
||||
/></a>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './app.vue'
|
||||
|
||||
import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/space/index.js'
|
||||
import '//jscdn.ink/@bd/ui/latest/form/index.js'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,18 @@
|
|||
<template>
|
||||
<Topbar />
|
||||
<div class="playground">
|
||||
<CodeEditor :code="code" />
|
||||
<Preview />
|
||||
<wc-tabs class="editor">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -11,36 +21,105 @@ import CodeEditor from '@/components/code-editor.vue'
|
|||
import Topbar from './views/topbar.vue'
|
||||
import Preview from './views/preview.vue'
|
||||
|
||||
export default {
|
||||
components: { Topbar, CodeEditor, Preview },
|
||||
data() {
|
||||
return {
|
||||
code: `<!doctype html>
|
||||
import { gzip, ungzip } from '@bytedo/gzip'
|
||||
|
||||
const template = `<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
<title>{{title}}</title>
|
||||
<meta name="keywords" content="{{keywords}}">
|
||||
<meta name="description" content="{{description}}">
|
||||
<link rel="stylesheet" href="//jscdn.ink/@bytedo/wcui/1.0.12/css/reset-basic.css">
|
||||
<link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css">
|
||||
{{css}}
|
||||
<script async src="//jscdn.ink/es-module-shims/1.6.3/es-module-shims.wasm.js"><\/script>
|
||||
<script type="importmap">{{importmap}}<\/script>
|
||||
<\/head>
|
||||
<script type="importmap">${JSON.stringify({
|
||||
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>
|
||||
<div class="app noselect"></div>
|
||||
<script src="main.js"><\/script>
|
||||
{{html}}
|
||||
<\/body>
|
||||
<\/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>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
body {
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
}
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
|
|
@ -48,7 +127,12 @@ export default {
|
|||
}
|
||||
|
||||
.playground {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
height: calc(100vh - 48px);
|
||||
}
|
||||
|
||||
.editor {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,12 @@
|
|||
/**
|
||||
* {}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2023/04/26 18:28:13
|
||||
*/
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import '//jscdn.ink/@bd/ui/latest/tabs/index.js'
|
||||
|
||||
import App from './app.vue'
|
||||
|
||||
import store from './store'
|
||||
|
|
|
|||
|
|
@ -1,12 +1,66 @@
|
|||
<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>
|
||||
|
||||
<script>
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
let startTime = 0
|
||||
|
||||
export default {
|
||||
props: {
|
||||
code: ''
|
||||
},
|
||||
|
||||
data() {
|
||||
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>
|
||||
.preview {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -32,7 +37,18 @@ export default {
|
|||
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);
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue