135 lines
2.6 KiB
Vue
135 lines
2.6 KiB
Vue
<!-- -->
|
|
<template>
|
|
<article class="repl">
|
|
<header class="header">
|
|
<h1>实时编辑</h1>
|
|
<section class="actions">
|
|
<!-- <veui-button
|
|
v-tooltip="t(expanded ? 'shrinkEditor' : 'expandEditor')"
|
|
ui="strong icon xl"
|
|
@click="handleToggle"
|
|
>
|
|
<veui-icon :name="expanded ? 'one-repl-shrink' : 'one-repl-expand'" />
|
|
</veui-button> -->
|
|
<veui-button ui="strong text" @click="handleClose"> 退出 </veui-button>
|
|
</section>
|
|
</header>
|
|
<one-live class="editor" :code="code" :browser="browser" />
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import { Button, Loading, Icon } from "veui";
|
|
import tooltip from "veui/directives/tooltip";
|
|
import i18n from "veui/mixins/i18n";
|
|
|
|
export default {
|
|
name: "one-repl",
|
|
directives: {
|
|
tooltip,
|
|
},
|
|
components: {
|
|
"veui-button": Button,
|
|
"veui-icon": Icon,
|
|
"one-live": () => ({
|
|
component: import("./OneLive"),
|
|
loading: {
|
|
inheritAttrs: false,
|
|
render(h) {
|
|
return h(Loading, {
|
|
props: {
|
|
loading: true,
|
|
ui: "strong",
|
|
},
|
|
class: "loading",
|
|
});
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
mixins: [i18n],
|
|
props: {
|
|
code: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
expanded: Boolean,
|
|
browser: Boolean,
|
|
},
|
|
methods: {
|
|
handleClose() {
|
|
this.$emit("close");
|
|
},
|
|
handleToggle() {
|
|
this.$emit("toggle", !this.expanded);
|
|
},
|
|
},
|
|
};
|
|
|
|
Icon.register({
|
|
"one-repl-shrink": {
|
|
width: 24,
|
|
height: 24,
|
|
d: "M7.41 18.59L8.83 20L12 16.83L15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4L12 7.17L8.83 4L7.41 5.41L12 10l4.59-4.59z",
|
|
},
|
|
"one-repl-expand": {
|
|
width: 24,
|
|
height: 24,
|
|
d: "M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9L12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15L12 18.17z",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.repl {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: none;
|
|
height: 48px;
|
|
padding: 0 24px;
|
|
box-shadow: 0 0 4px #0006;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
h1 {
|
|
flex: none;
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex: 1 1 auto;
|
|
gap: 24px;
|
|
}
|
|
}
|
|
|
|
.editor:not(.loading) {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
height: calc(100% - 48px);
|
|
|
|
& >>> .live-preview {
|
|
padding: 24px 36px;
|
|
}
|
|
|
|
& >>> .VueLive-error {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.loading {
|
|
position: absolute;
|
|
top: 40vh;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 40px;
|
|
}
|
|
</style>
|