shalu-bigscreen-desiner/packages/shalu-dashboard-ui/components/codeEditor/src/index.vue

<template>
  <Modal
    v-model:open="show"
    :title="title"
    :width="width"
    :destroyOnClose="true"
  >
    <Editor v-model:code="code" v-bind="$attrs"/>
    <template #footer>
      <slot name="footer">
        <Button @click="close">取消</Button>
        <Button type="primary" @click="handleOk">确定</Button>
      </slot>
    </template>
  </Modal>
</template>

<script lang="ts">
import { Modal, Button } from "ant-design-vue";
import { ref, defineComponent } from "vue";
import Editor from "./Editor.vue";

export default defineComponent({
  name: "DEditorModal",
  components: {
    Modal,
    Editor,
    Button
  },
  props: {
    title: {
      type: String,
      default: "编辑",
    },
    width: {
      type: Number,
      default: 800,
    },
  },
  emits: ["ok"],
  setup(_, { emit }) {
    const show = ref(false);
    const code = ref("");

    const handleOk = () => {
      // TODO: 检验code
      emit("ok", code.value);
      show.value = false;
    };

    const open = (codeStr: string) => {
      show.value = true;
      code.value = codeStr;
    };
    const close = () => {
      show.value = false;
    };

    return {
      open,
      close,
      code,
      handleOk,
      show
    };
  },
});
</script>

<style scoped></style>