emacroh5lib 1.0.2 → 1.0.3

package/README.md

@@ -1,4 +1,5 @@
-
+## 安装
+npm i emacroh5lib --registry  https://registry.npmjs.org/
 
 ## 读取excel表格数据
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "EMacro前端组件库",
   "main": "./dist/emacroh5lib.min.js",
   "types": "./dist/types/index.d.ts",
@@ -75,6 +75,7 @@
   },
   "dependencies": {
     "@tweenjs/tween.js": "^18.6.4",
+    "@types/file-saver": "^2.0.5",
     "@types/js-cookie": "^3.0.1",
     "@vue/cli-plugin-typescript": "^5.0.4",
     "axios": "^0.26.1",
@@ -83,8 +84,12 @@
     "echarts": "^5.3.2",
     "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.8",
+    "file-saver": "^2.0.5",
+    "hammerjs": "^2.0.8",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.1",
+    "js-xlsx": "^0.8.22",
+    "lay-excel": "^1.7.6",
     "query-string": "^7.0.1",
     "register-service-worker": "^1.7.2",
     "three": "^0.139.2",
@@ -95,6 +100,7 @@
     "vue-property-decorator": "^9.1.2",
     "vue-tsx-support": "^3.2.0",
     "vuex": "^3.6.2",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "xlsx-style": "^0.8.13"
   }
 }

package/src/index.ts

@@ -3,9 +3,11 @@ import { EMacro } from "./utilities/File";
 
 
 import FileViewer from './views/FileViewer/index.vue'
-import MessageBoxTest from "@/components/MessageBoxTest";  
+import ImageViewer from './views/ImageViewer/index.vue'
+import DragResizeView from './views/DragResizeView/index.vue'
+import MessageBoxTest from "@/components/MessageBoxTest";
 
-const components = [FileViewer];
+const components = [FileViewer, ImageViewer, DragResizeView];
 
 const install = (Vue: any) => {
   if ((install as any).installed) return;

package/src/router/index.ts

@@ -22,6 +22,11 @@ const routes: Array<RouteConfig> = [
     path: '/FileViewer',
     name: 'FileViewer',
     component: () => import('../views/FileViewer/index.vue')
+  }, 
+  {
+    path: '/TestView',
+    name: 'TestView',
+    component: () => import('../views/TestView/index.vue')
   },
 ]
 

package/src/shims-vue.d.ts

@@ -3,5 +3,5 @@ declare module '*.vue' {
   export default Vue
 }
 
-// declare module '@/utils/request.js'
+// declare module 'xlsx-style'
 // declare module "@/components/HelloWorld.vue"

package/src/views/DragResizeView/index.vue

@@ -0,0 +1,3 @@
+<template src="./vue-drag-resize.html"></template>
+<script src="./vue-drag-resize.js"></script>
+<style src="./vue-drag-resize.css"></style>

package/src/views/DragResizeView/vue-drag-resize.css

@@ -0,0 +1,46 @@
+.vdr {
+    position: absolute;
+    box-sizing: border-box;
+}
+.vdr.active:before{
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    outline: 1px dashed #d6d6d6;
+}
+.vdr-stick {
+    box-sizing: border-box;
+    position: absolute;
+    font-size: 1px;
+    background: #ffffff;
+    border: 1px solid #6c6c6c;
+    box-shadow: 0 0 2px #bbb;
+}
+.inactive .vdr-stick {
+    display: none;
+}
+.vdr-stick-tl, .vdr-stick-br {
+    cursor: nwse-resize;
+}
+.vdr-stick-tm, .vdr-stick-bm {
+    left: 50%;
+    cursor: ns-resize;
+}
+.vdr-stick-tr, .vdr-stick-bl {
+    cursor: nesw-resize;
+}
+.vdr-stick-ml, .vdr-stick-mr {
+    top: 50%;
+    cursor: ew-resize;
+}
+.vdr-stick.not-resizable{
+    display: none;
+}
+.content-container{
+    display: block;
+    position: relative;
+}

package/src/views/DragResizeView/vue-drag-resize.html

@@ -0,0 +1,17 @@
+<div class="vdr" :style="positionStyle"
+     :class="`${(active || isActive) ? 'active' : 'inactive'} ${contentClass ? contentClass: ''}`"
+     @mousedown="bodyDown($event)"
+     @touchstart="bodyDown($event)"
+     @touchend="up($event)">
+    <div :style="sizeStyle" class="content-container" ref="container">
+        <slot></slot>
+    </div>
+    <div
+            v-for="stick in sticks"
+            class="vdr-stick"
+            :class="['vdr-stick-' + stick, isResizable ? '' : 'not-resizable']"
+            @mousedown.stop.prevent="stickDown(stick, $event)"
+            @touchstart.stop.prevent="stickDown(stick, $event)"
+            :style="vdrStick(stick)">
+    </div>
+</div>