docs_vue2/components/OneRepl.vue

135 lines
2.6 KiB
Vue
Raw Permalink Normal View History

2022-06-14 09:05:00 +08:00
<!-- -->
2021-11-20 13:22:48 +08:00
<template>
2022-06-14 09:05:00 +08:00
<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>
2021-11-20 13:22:48 +08:00
</template>
<script>
2022-06-14 09:05:00 +08:00
import { Button, Loading, Icon } from "veui";
import tooltip from "veui/directives/tooltip";
import i18n from "veui/mixins/i18n";
2021-11-20 13:22:48 +08:00
export default {
2022-06-14 09:05:00 +08:00
name: "one-repl",
directives: {
2022-06-14 09:05:00 +08:00
tooltip,
},
2021-11-20 13:22:48 +08:00
components: {
2022-06-14 09:05:00 +08:00
"veui-button": Button,
"veui-icon": Icon,
"one-live": () => ({
component: import("./OneLive"),
2021-11-21 01:52:20 +08:00
loading: {
inheritAttrs: false,
2022-06-14 09:05:00 +08:00
render(h) {
2021-11-21 01:52:20 +08:00
return h(Loading, {
props: {
loading: true,
2022-06-14 09:05:00 +08:00
ui: "strong",
2021-11-21 01:52:20 +08:00
},
2022-06-14 09:05:00 +08:00
class: "loading",
});
},
},
}),
2021-11-20 13:22:48 +08:00
},
mixins: [i18n],
props: {
code: {
type: String,
2022-06-14 09:05:00 +08:00
default: "",
},
expanded: Boolean,
2022-06-14 09:05:00 +08:00
browser: Boolean,
2021-11-20 13:22:48 +08:00
},
methods: {
2022-06-14 09:05:00 +08:00
handleClose() {
this.$emit("close");
},
2022-06-14 09:05:00 +08:00
handleToggle() {
this.$emit("toggle", !this.expanded);
},
},
};
Icon.register({
2022-06-14 09:05:00 +08:00
"one-repl-shrink": {
width: 24,
height: 24,
2022-06-14 09:05:00 +08:00
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",
},
2022-06-14 09:05:00 +08:00
"one-repl-expand": {
width: 24,
height: 24,
2022-06-14 09:05:00 +08:00
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",
},
});
2021-11-20 13:22:48 +08:00
</script>
<style lang="stylus" scoped>
2022-06-14 09:05:00 +08:00
.repl {
display: flex;
flex-direction: column;
}
2021-11-20 13:22:48 +08:00
2022-06-14 09:05:00 +08:00
.header {
display: flex;
align-items: center;
flex: none;
height: 48px;
padding: 0 24px;
box-shadow: 0 0 4px #0006;
position: relative;
z-index: 1;
2021-11-20 13:22:48 +08:00
2022-06-14 09:05:00 +08:00
h1 {
flex: none;
margin: 0;
font-size: 16px;
}
2021-11-20 13:22:48 +08:00
2022-06-14 09:05:00 +08:00
.actions {
display: flex;
justify-content: flex-end;
flex: 1 1 auto;
gap: 24px;
}
}
2021-11-20 13:22:48 +08:00
2022-06-14 09:05:00 +08:00
.editor:not(.loading) {
position: relative;
flex: 1 1 auto;
height: calc(100% - 48px);
2021-11-20 13:22:48 +08:00
2022-06-14 09:05:00 +08:00
& >>> .live-preview {
padding: 24px 36px;
}
2022-06-14 09:05:00 +08:00
& >>> .VueLive-error {
display: none;
}
}
2021-11-21 01:52:20 +08:00
2022-06-14 09:05:00 +08:00
.loading {
position: absolute;
top: 40vh;
left: 50%;
transform: translateX(-50%);
font-size: 40px;
}
2021-11-20 13:22:48 +08:00
</style>