docs_vue2/components/OneRepl.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>