ele-admin-plus 1.0.0-beta.2 → 1.0.0-beta.4

package/es/ele-modal/index.js

@@ -2,26 +2,24 @@ import { defineComponent, ref, computed, unref, watch, onActivated, onDeactivate
 import { ElDialog, ElIcon } from "element-plus";
 import { Close } from "@element-plus/icons-vue";
 import { CompressOutlined, ExpandOutlined } from "../icons";
-import { useLayoutState } from "../ele-config-provider/use-receiver";
-import { useLicense } from "../utils/license-util";
-import { screenWidth } from "../utils/core";
+import { pick } from "../utils/core";
+import { useLicense, useLayoutState } from "../ele-config-provider/receiver";
 import { getModalContainer, resizableClass, multipleClass, fullscreenClass, closedClass, hideClass, innerClass, collapseClass, compactClass, maximizedClass, hasTabClass, mixSidebarClass, singleSidebarClass, topLayoutClass, expandedClass, mobileClass, setInitPosition, wrapperClass, responsiveClass, movableClass, setModalTop, resetModalStyle, handleMovable, handleResizable } from "./util";
-import { modalProps, modalEmits } from "./props";
+import { modalProps, modalEmits, dialogPropKeys } from "./props";
 const _sfc_main = defineComponent({
   name: "EleModal",
   components: { ElDialog, ElIcon, Close, CompressOutlined, ExpandOutlined },
   inheritAttrs: false,
   props: modalProps,
   emits: modalEmits,
-  setup(props, { emit }) {
+  setup(props, { emit, attrs }) {
     const { authenticated } = useLicense();
-    const layoutProvide = useLayoutState(
-      ref({ mobile: screenWidth() < 768 })
-    );
-    const modalRef = ref(null);
+    const layoutProvide = useLayoutState();
+    const dialogRef = ref(null);
     const container = ref(getModalContainer());
     const isFullscreen = ref(props.fullscreen ?? false);
     const isActivated = ref(true);
+    const destroyed = ref(false);
     const dialogClass = computed(() => {
       const layoutState = unref(layoutProvide);
       const classes = [wrapperClass];
@@ -31,15 +29,13 @@ const _sfc_main = defineComponent({
       if (props.form) {
         classes.push("ele-modal-form");
       }
-      if (!layoutState.mobile) {
-        if (props.draggable) {
-          classes.push(movableClass);
-        }
-        if (props.resizable) {
-          classes.push(resizableClass);
-          if (typeof props.resizable === "string") {
-            classes.push(resizableClass + "-" + props.resizable);
-          }
+      if (props.draggable) {
+        classes.push(movableClass);
+      }
+      if (props.resizable) {
+        classes.push(resizableClass);
+        if (typeof props.resizable === "string") {
+          classes.push(resizableClass + "-" + props.resizable);
         }
       }
       if (props.multiple) {
@@ -89,9 +85,21 @@ const _sfc_main = defineComponent({
       }
       return classes.join(" ");
     });
+    const dialogProps = computed(() => {
+      const opt = {
+        fullscreen: false,
+        modal: props.multiple ? false : props.modal,
+        appendToBody: false,
+        showClose: false,
+        draggable: false,
+        alignCenter: false,
+        modalClass: dialogClass.value
+      };
+      return Object.assign({}, attrs, pick(props, dialogPropKeys), opt);
+    });
     const getModalEl = () => {
       var _a, _b;
-      return (_b = unref((_a = unref(modalRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
+      return (_b = unref((_a = unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
     };
     const getZIndex = () => {
       return props.zIndex ?? 2e3;
@@ -183,10 +191,11 @@ const _sfc_main = defineComponent({
       isActivated.value = false;
     });
     return {
-      modalRef,
+      dialogRef,
       container,
       isFullscreen,
-      dialogClass,
+      destroyed,
+      dialogProps,
       updateModelValue,
       toggleFullscreen,
       onOpen,
@@ -214,32 +223,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Close = resolveComponent("Close");
   const _component_ElDialog = resolveComponent("ElDialog");
   return openBlock(), createBlock(Teleport, {
-    to: _ctx.container,
-    disabled: !_ctx.multiple
+    to: _ctx.multiple ? _ctx.container : "body",
+    disabled: !_ctx.appendToBody
   }, [
-    createVNode(_component_ElDialog, mergeProps(_ctx.$attrs, {
-      ref: "modalRef",
-      modelValue: _ctx.modelValue,
-      title: _ctx.title,
-      width: _ctx.width,
-      fullscreen: false,
-      top: _ctx.top,
-      modal: _ctx.multiple ? false : _ctx.modal,
-      appendToBody: _ctx.multiple ? false : _ctx.appendToBody,
-      lockScroll: _ctx.lockScroll,
-      openDelay: _ctx.openDelay,
-      closeDelay: _ctx.closeDelay,
-      closeOnClickModal: _ctx.closeOnClickModal,
-      closeOnPressEscape: _ctx.closeOnPressEscape,
-      showClose: false,
-      beforeClose: _ctx.beforeClose,
-      draggable: false,
-      center: _ctx.center,
-      alignCenter: false,
-      destroyOnClose: _ctx.destroyOnClose,
-      modalClass: _ctx.dialogClass,
-      zIndex: _ctx.zIndex,
-      trapFocus: _ctx.trapFocus,
+    createVNode(_component_ElDialog, mergeProps(_ctx.dialogProps, {
+      ref: "dialogRef",
       "onUpdate:modelValue": _ctx.updateModelValue,
       onOpen: _ctx.onOpen,
       onOpened: _ctx.onOpened,
@@ -255,7 +243,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, [
           createElementVNode("div", {
             id: titleId,
-            class: normalizeClass(titleClass)
+            class: normalizeClass(titleClass),
+            style: normalizeStyle(_ctx.titleStyle)
           }, [
             renderSlot(_ctx.$slots, "header", {
               close,
@@ -264,7 +253,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, () => [
               createTextVNode(toDisplayString(_ctx.title), 1)
             ])
-          ], 10, _hoisted_1),
+          ], 14, _hoisted_1),
           _ctx.maxable ? (openBlock(), createElementBlock("div", {
             key: 0,
             class: "ele-modal-tool",
@@ -317,7 +306,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         key: "0"
       } : void 0
-    ]), 1040, ["modelValue", "title", "width", "top", "modal", "appendToBody", "lockScroll", "openDelay", "closeDelay", "closeOnClickModal", "closeOnPressEscape", "beforeClose", "center", "destroyOnClose", "modalClass", "zIndex", "trapFocus", "onUpdate:modelValue", "onOpen", "onOpened", "onClose", "onClosed", "onOpenAutoFocus", "onCloseAutoFocus"])
+    ]), 1040, ["onUpdate:modelValue", "onOpen", "onOpened", "onClose", "onClosed", "onOpenAutoFocus", "onCloseAutoFocus"])
   ], 8, ["to", "disabled"]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/es/ele-modal/props.d.ts

@@ -1,4 +1,5 @@
 import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
+import { dialogProps } from 'element-plus';
 import type { Resizable, MoveOut, Position } from './types';
 /**
  * 属性
@@ -31,6 +32,7 @@ export declare const modalProps: {
         default: number;
     };
     headerStyle: PropType<CSSProperties>;
+    titleStyle: PropType<CSSProperties>;
     bodyStyle: PropType<CSSProperties>;
     footerStyle: PropType<CSSProperties>;
     responsive: {
@@ -52,6 +54,9 @@ export declare const modalProps: {
     openDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     closeDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     top: {
+        /**
+         * 弹窗组件属性名
+         */
         readonly type: PropType<string>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
@@ -99,3 +104,8 @@ export declare const modalEmits: {
     openAutoFocus: () => boolean;
     closeAutoFocus: () => boolean;
 };
+export type DialogPropKeys = Array<keyof typeof dialogProps>;
+/**
+ * 弹窗组件属性名
+ */
+export declare const dialogPropKeys: DialogPropKeys;

package/es/ele-modal/props.js

@@ -38,6 +38,8 @@ const modalProps = {
   },
   // 标题栏样式
   headerStyle: Object,
+  // 标题样式
+  titleStyle: Object,
   // 主体样式
   bodyStyle: Object,
   // 底栏样式
@@ -55,7 +57,9 @@ const modalEmits = {
   // 更新全屏状态
   "update:fullscreen": (_fullscreen) => true
 };
+const dialogPropKeys = Object.keys(dialogProps);
 export {
+  dialogPropKeys,
   modalEmits,
   modalProps
 };

package/es/ele-modal/style/index.scss

@@ -148,7 +148,7 @@
 }
 
 /* 支持打开多个 */
-.ele-modal-container {
+#ele-modal-container {
   position: absolute;
   top: 0;
   left: 0;

package/es/ele-modal/util.d.ts

@@ -1,7 +1,7 @@
 import type { Resizable, Position, MoveOut } from './types';
-import { ModalProps } from './props';
+import type { ModalProps } from './props';
 export declare const wrapperClass = "ele-modal";
-export declare const containerClass = "ele-modal-container";
+export declare const containerId = "ele-modal-container";
 export declare const movableClass = "ele-modal-movable";
 export declare const resizableClass = "ele-modal-resizable";
 export declare const multipleClass = "ele-modal-multiple";
@@ -20,7 +20,7 @@ export declare const topLayoutClass = "ele-state-top-layout";
 export declare const expandedClass = "ele-state-expanded";
 export declare const mobileClass = "ele-state-mobile";
 /**
- * 获取自定义弹窗容器
+ * 创建并获取弹窗容器
  */
 export declare function getModalContainer(): Element;
 /**

package/es/ele-modal/util.js

@@ -1,7 +1,7 @@
 const titleClass = "el-dialog__title";
 const headerClass = "el-dialog__header";
 const wrapperClass = "ele-modal";
-const containerClass = "ele-modal-container";
+const containerId = "ele-modal-container";
 const movableClass = "ele-modal-movable";
 const resizableClass = "ele-modal-resizable";
 const multipleClass = "ele-modal-multiple";
@@ -30,12 +30,12 @@ function initModalStyle(modalEl, resizable) {
   modalEl.style.verticalAlign = "top";
 }
 function getModalContainer() {
-  const container = document.querySelector("." + containerClass);
+  const container = document.getElementById(containerId);
   if (container) {
     return container;
   }
   const elem = document.createElement("div");
-  elem.classList.add(containerClass);
+  elem.id = containerId;
   document.body.appendChild(elem);
   return elem;
 }
@@ -251,9 +251,10 @@ function setModalPosition(modalEl, resizable, position, moveOut) {
     return;
   }
   initModalStyle(modalEl, resizable);
-  const canOut = !moveOut || Array.isArray(moveOut) && !moveOut.length;
-  const maxTop = wrapEl.clientHeight - modalEl.clientHeight - (canOut ? 0 : 2);
-  const maxLeft = wrapEl.clientWidth - modalEl.clientWidth - (canOut ? 0 : 1);
+  const canOutB = canMoveOut(moveOut, "bottom");
+  const canOutR = canMoveOut(moveOut, "right");
+  const maxTop = wrapEl.clientHeight - modalEl.clientHeight - (canOutB ? 0 : 2);
+  const maxLeft = wrapEl.clientWidth - modalEl.clientWidth - (canOutR ? 0 : 1);
   if (position === "top") {
     modalEl.style.top = "0px";
     modalEl.style.left = `${maxLeft / 2}px`;
@@ -305,7 +306,7 @@ export {
   closedClass,
   collapseClass,
   compactClass,
-  containerClass,
+  containerId,
   expandedClass,
   fullscreenClass,
   getCurrentStyle,

package/es/ele-page/index.d.ts

@@ -1,11 +1,17 @@
 declare const _sfc_main: import("vue").DefineComponent<{
     plain: BooleanConstructor;
-    multiCard: BooleanConstructor;
+    multiCard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     flexTable: BooleanConstructor;
     hideFooter: BooleanConstructor;
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     plain: BooleanConstructor;
-    multiCard: BooleanConstructor;
+    multiCard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     flexTable: BooleanConstructor;
     hideFooter: BooleanConstructor;
 }>>, {

package/es/ele-page/props.d.ts

@@ -4,7 +4,10 @@ import type { ExtractPropTypes } from 'vue';
  */
 export declare const pageProps: {
     plain: BooleanConstructor;
-    multiCard: BooleanConstructor;
+    multiCard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     flexTable: BooleanConstructor;
     hideFooter: BooleanConstructor;
 };

package/es/ele-page/props.js

@@ -2,7 +2,10 @@ const pageProps = {
   // 是否是单纯的容器
   plain: Boolean,
   // 内容是否为多个卡片
-  multiCard: Boolean,
+  multiCard: {
+    type: Boolean,
+    default: true
+  },
   // 内部表格是否弹性布局
   flexTable: Boolean,
   // 是否关闭页脚

package/es/ele-pagination/index.d.ts

@@ -3,13 +3,13 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: import("vue").PropType<import("./types").PaginationType>;
         default: string;
     };
-    total: NumberConstructor;
     pageSize: NumberConstructor;
     defaultPageSize: NumberConstructor;
-    currentPage: NumberConstructor;
-    defaultCurrentPage: NumberConstructor;
+    total: NumberConstructor;
     pageCount: NumberConstructor;
     pagerCount: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 7, boolean>;
+    currentPage: NumberConstructor;
+    defaultCurrentPage: NumberConstructor;
     layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
     pageSizes: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => number[]) | (() => number[]) | ((new (...args: any[]) => number[]) | (() => number[]))[], unknown, unknown, () => [10, 20, 30, 40, 50, 100], boolean>;
     popperClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
@@ -32,13 +32,13 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: import("vue").PropType<import("./types").PaginationType>;
         default: string;
     };
-    total: NumberConstructor;
     pageSize: NumberConstructor;
     defaultPageSize: NumberConstructor;
-    currentPage: NumberConstructor;
-    defaultCurrentPage: NumberConstructor;
+    total: NumberConstructor;
     pageCount: NumberConstructor;
     pagerCount: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 7, boolean>;
+    currentPage: NumberConstructor;
+    defaultCurrentPage: NumberConstructor;
     layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
     pageSizes: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => number[]) | (() => number[]) | ((new (...args: any[]) => number[]) | (() => number[]))[], unknown, unknown, () => [10, 20, 30, 40, 50, 100], boolean>;
     popperClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;

package/es/ele-pagination/props.d.ts

@@ -8,13 +8,13 @@ export declare const paginationProps: {
         type: PropType<PaginationType>;
         default: string;
     };
-    total: NumberConstructor;
     pageSize: NumberConstructor;
     defaultPageSize: NumberConstructor;
-    currentPage: NumberConstructor;
-    defaultCurrentPage: NumberConstructor;
+    total: NumberConstructor;
     pageCount: NumberConstructor;
     pagerCount: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 7, boolean>;
+    currentPage: NumberConstructor;
+    defaultCurrentPage: NumberConstructor;
     layout: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
     pageSizes: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => number[]) | (() => number[]) | ((new (...args: any[]) => number[]) | (() => number[]))[], unknown, unknown, () => [10, 20, 30, 40, 50, 100], boolean>;
     popperClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;

package/es/ele-printer/index.d.ts

@@ -0,0 +1,37 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    modelValue: BooleanConstructor;
+    headerStyle: import("vue").PropType<import("vue").CSSProperties>;
+    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
+    footerStyle: import("vue").PropType<import("vue").CSSProperties>;
+    title: StringConstructor;
+    margin: (StringConstructor | NumberConstructor)[];
+    direction: import("vue").PropType<import("./types").PrintDirection | null>;
+    orientation: import("vue").PropType<import("./types").PrintOrientation | null>;
+    target: import("vue").PropType<import("./types").PrintTarget | null>;
+    static: BooleanConstructor;
+}, {
+    container: import("vue").ShallowRef<Element>;
+    visible: import("vue").Ref<boolean>;
+    print: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (_value: boolean) => boolean;
+    done: () => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: BooleanConstructor;
+    headerStyle: import("vue").PropType<import("vue").CSSProperties>;
+    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
+    footerStyle: import("vue").PropType<import("vue").CSSProperties>;
+    title: StringConstructor;
+    margin: (StringConstructor | NumberConstructor)[];
+    direction: import("vue").PropType<import("./types").PrintDirection | null>;
+    orientation: import("vue").PropType<import("./types").PrintOrientation | null>;
+    target: import("vue").PropType<import("./types").PrintTarget | null>;
+    static: BooleanConstructor;
+}>> & {
+    onDone?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
+}, {
+    modelValue: boolean;
+    static: boolean;
+}, {}>;
+export default _sfc_main;

package/es/ele-printer/index.js

@@ -0,0 +1,119 @@
+import { defineComponent, shallowRef, ref, watch, nextTick, openBlock, createBlock, Teleport, createElementVNode, normalizeClass, createElementBlock, normalizeStyle, renderSlot, createCommentVNode } from "vue";
+import { useLicense } from "../ele-config-provider/receiver";
+import { usePrinter, getPrintContainer, doPrintOnFrame, doPrint } from "./util";
+import { printerProps, printerEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "ElePrinter",
+  props: printerProps,
+  emits: printerEmits,
+  setup(props, { emit }) {
+    const { authenticated } = useLicense();
+    const { printId } = usePrinter(() => {
+      updateModelValue(false);
+      onDone();
+    });
+    const container = shallowRef(getPrintContainer());
+    const visible = ref(false);
+    const print = () => {
+      if (!authenticated.value) {
+        updateModelValue(false);
+        return;
+      }
+      visible.value = true;
+      nextTick(() => {
+        const option = {
+          printId,
+          title: props.title,
+          margin: props.margin,
+          direction: props.direction,
+          orientation: props.orientation
+        };
+        if (props.target === "_iframe") {
+          doPrintOnFrame(option);
+          visible.value = false;
+        } else {
+          doPrint(option);
+          visible.value = false;
+          updateModelValue(false);
+          onDone();
+        }
+      });
+    };
+    const onDone = () => {
+      emit("done");
+    };
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (value) {
+          print();
+        }
+      },
+      { immediate: true }
+    );
+    return { container, visible, print };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { key: 1 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(Teleport, {
+    to: _ctx.container,
+    disabled: _ctx.static && !_ctx.visible
+  }, [
+    createElementVNode("table", {
+      class: normalizeClass(["ele-printer", { "is-open": _ctx.visible }, { "is-static": _ctx.static }])
+    }, [
+      _ctx.$slots.header ? (openBlock(), createElementBlock("thead", _hoisted_1, [
+        createElementVNode("tr", null, [
+          createElementVNode("td", null, [
+            createElementVNode("div", {
+              class: "ele-printer-header",
+              style: normalizeStyle(_ctx.headerStyle)
+            }, [
+              renderSlot(_ctx.$slots, "header")
+            ], 4)
+          ])
+        ])
+      ])) : createCommentVNode("", true),
+      createElementVNode("tbody", null, [
+        createElementVNode("tr", null, [
+          createElementVNode("td", null, [
+            createElementVNode("div", {
+              class: "ele-printer-body",
+              style: normalizeStyle(_ctx.bodyStyle)
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 4)
+          ])
+        ])
+      ]),
+      _ctx.$slots.footer ? (openBlock(), createElementBlock("tfoot", _hoisted_2, [
+        createElementVNode("tr", null, [
+          createElementVNode("td", null, [
+            createElementVNode("div", {
+              class: "ele-printer-footer",
+              style: normalizeStyle(_ctx.footerStyle)
+            }, [
+              renderSlot(_ctx.$slots, "footer")
+            ], 4)
+          ])
+        ])
+      ])) : createCommentVNode("", true)
+    ], 2)
+  ], 8, ["to", "disabled"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-printer/props.d.ts

@@ -0,0 +1,25 @@
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import type { PrintDirection, PrintOrientation, PrintTarget } from './types';
+/**
+ * 属性
+ */
+export declare const printerProps: {
+    modelValue: BooleanConstructor;
+    headerStyle: PropType<CSSProperties>;
+    bodyStyle: PropType<CSSProperties>;
+    footerStyle: PropType<CSSProperties>;
+    title: StringConstructor;
+    margin: (StringConstructor | NumberConstructor)[];
+    direction: PropType<PrintDirection | null>;
+    orientation: PropType<PrintOrientation | null>;
+    target: PropType<PrintTarget | null>;
+    static: BooleanConstructor;
+};
+export type PrinterProps = ExtractPropTypes<typeof printerProps>;
+/**
+ * 事件
+ */
+export declare const printerEmits: {
+    'update:modelValue': (_value: boolean) => boolean;
+    done: () => boolean;
+};

package/es/ele-printer/props.js

@@ -0,0 +1,32 @@
+const printerProps = {
+  // 是否打印
+  modelValue: Boolean,
+  // 页眉样式
+  headerStyle: Object,
+  // 内容样式
+  bodyStyle: Object,
+  // 页脚样式
+  footerStyle: Object,
+  // 标题
+  title: String,
+  // 页间距
+  margin: [String, Number],
+  // 纸张方向
+  direction: String,
+  // 纸张旋转
+  orientation: String,
+  // 打印位置
+  target: String,
+  // 是否显示在文档流中
+  static: Boolean
+};
+const printerEmits = {
+  // 更新打印状态
+  "update:modelValue": (_value) => true,
+  // 打印完成的事件
+  done: () => true
+};
+export {
+  printerEmits,
+  printerProps
+};

package/es/ele-printer/style/index.js

@@ -0,0 +1 @@
+import './index.scss';

package/es/ele-printer/style/index.scss

@@ -0,0 +1,58 @@
+/* 打印容器 */
+#ele-printer-container {
+  pointer-events: none;
+  display: none;
+}
+
+/* 页眉页脚 */
+.ele-printer {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  & > thead > tr > td,
+  & > tbody > tr > td,
+  & > tfoot > tr > td {
+    padding: 0;
+    border: none;
+  }
+
+  &:not(.is-open, .is-static) {
+    display: none;
+  }
+
+  .ele-printer-header,
+  .ele-printer-footer {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+  }
+
+  &:not(.is-open) .ele-printer-header,
+  &:not(.is-open) .ele-printer-footer {
+    display: none;
+  }
+
+  .ele-printer-body {
+    box-sizing: border-box;
+  }
+}
+
+/* 打印状态 */
+html.ele-printing > body {
+  color: #000;
+  background: #fff;
+
+  & > * {
+    display: none !important;
+  }
+
+  #ele-printer-container {
+    display: block !important;
+
+    * {
+      pointer-events: none !important;
+    }
+  }
+}