emacroh5lib 1.0.0 → 1.0.3

package/README.md

@@ -1,6 +1,12 @@
-## 添加npm账号
-npm adduser --registry  https://registry.npmjs.org/
+## 安装
+npm i emacroh5lib --registry  https://registry.npmjs.org/
 
-## 发布npm包
-npm publish  --registry  https://registry.npmjs.org/
+## 读取excel表格数据
 
+``` JavaScript
+EMacro.File.readLocalExcel((file, workbook) => {
+    console.log("file", file);
+    console.log("workbook", workbook);
+    console.log("数据", workbook.Sheets["工作表1"]["G32"]);
+});
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "EMacro前端组件库",
   "main": "./dist/emacroh5lib.min.js",
   "types": "./dist/types/index.d.ts",
@@ -10,9 +10,10 @@
     "build:prod": "webpack --mode=production --node-env=production",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
+    "e2e": "vue-cli-service test:e2e",
     "watch": "webpack --watch",
     "serve": "webpack serve",
-    "dev": "webpack serve",
+    "dev": "vue-cli-service test:e2e",
     "commit": "cz",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -65,6 +66,8 @@
     "ts-jest": "^27.1.4",
     "ts-loader": "^9.2.8",
     "typescript": "^4.6.3",
+    "vue-loader": "^15.7.0",
+    "vue-router": "^3.1.3",
     "vue-template-compiler": "^2.6.14",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
@@ -72,15 +75,22 @@
   },
   "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",
     "core-js": "^3.22.2",
+    "deep-eql": "^4.0.0",
     "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",
     "typings": "^2.1.1",
@@ -88,7 +98,9 @@
     "vue-class-component": "^7.2.3",
     "vue-echarts": "^6.0.2",
     "vue-property-decorator": "^9.1.2",
-    "vue-router": "^3.5.1",
-    "vuex": "^3.6.2"
+    "vue-tsx-support": "^3.2.0",
+    "vuex": "^3.6.2",
+    "xlsx": "^0.18.5",
+    "xlsx-style": "^0.8.13"
   }
 }

package/src/components/HelloWorld.vue

@@ -83,11 +83,11 @@
 <script lang="ts">
   import { Component, Prop, Vue } from "vue-property-decorator";
 
-  @Component
+  @Component({ name: "HelloWorld" })
   export default class HelloWorld extends Vue {
-    @Prop() private msg!: string; 
+    @Prop() private msg!: string;
 
-    public test():void{
+    public test(): void {
 
       console.log(this.msg);
 

package/src/components/MessageBox.jsx

@@ -0,0 +1,117 @@
+
+// 输入框支持搜索
+//
+export default {
+    data() {
+        return {
+            msg: "default",
+        };
+    },
+    props: {
+        data: { type: Array, default: [] },
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        defaultValue: {
+            type: String,
+            default: ''
+        },
+        css: {
+            type: String,
+            default: 'width: 300px;'
+        },
+        // 失去焦点时回调
+        focus: {
+            type: Function,
+            default: () => {
+                console.log('focus');
+            }
+        },
+        blur: {
+            type: Function,
+            default: () => {
+                console.log('blur');
+            }
+        },
+        // 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数
+        change: {
+            type: Function,
+            default: (value, option) => {
+                console.log('change');
+            }
+        },
+        // 键盘按下时回调
+        inputKeydown: {
+            type: Function,
+            default: (event) => {
+                console.log('inputKeydown', event);
+            }
+        },
+        // 鼠标移入时回调
+        mouseenter: {
+            type: Function,
+            default: (event) => {
+                console.log('mouseenter', event);
+            }
+        },
+        // 鼠标移出时回调
+        mouseleave: {
+            type: Function,
+            default: (event) => {
+                console.log('mouseleave', event);
+            }
+        },
+        // 下拉列表滚动时的回调
+        popupScroll: {
+            type: Function,
+            default: (event) => {
+                console.log('popupScroll', event);
+            }
+        },
+        // 文本框值变化时回调
+        search: {
+            type: Function,
+            default: (value) => {
+                console.log('search', value);
+            }
+        },
+        // 被选中时调用，参数为选中项的 value (或 key) 值
+        select: {
+            type: Function,
+            default: (value, option) => {
+                console.log('select', value, option);
+            }
+        },
+        // 展开下拉菜单的回调
+        dropdownVisibleChange: {
+            type: Function,
+            default: (open) => {
+                console.log('dropdownVisibleChange', open);
+            }
+        },
+    },
+    methods: {
+        click(msg) {
+            // 子组件 input的事件回调
+            // 实现 改变msg值
+            //   this.user = '123';
+            console.log(msg);
+        }
+    },
+    render() {
+        return (
+            <div>
+                <div>你好撒发射点  </div>
+                <a-select show-search placeholder={this.placeholder} option-filter-prop="children" style={this.css}
+                    onfocus={this.focus} onblur={this.blur} onchange={this.change} oninputKeydown={this.inputKeydown} defaultValue={this.defaultValue}>
+                    {
+                        this.data.map(item => {
+                            return <a-select-option value={item}>{item}</a-select-option>
+                        })
+                    }
+                </a-select>
+            </div>
+        );
+    }
+};

package/src/components/MessageBoxTest.tsx

@@ -0,0 +1,11 @@
+import { Component, Prop, Vue } from "vue-property-decorator";
+@Component({ name: "MessageBoxTest" })
+export default class MessageBoxTest extends Vue {
+
+
+    render() {
+        return (
+            <div>login.tsx</div>
+        )
+    }
+} 

package/src/index.ts

@@ -1,21 +1,43 @@
 
+import { EMacro } from "./utilities/File";
+
+
+import FileViewer from './views/FileViewer/index.vue'
+import ImageViewer from './views/ImageViewer/index.vue'
+import DragResizeView from './views/DragResizeView/index.vue'
+import MessageBoxTest from "@/components/MessageBoxTest";
+
+const components = [FileViewer, ImageViewer, DragResizeView];
+
+const install = (Vue: any) => {
+  if ((install as any).installed) return;
+  (install as any).installed = true;
+  components.map((component) => {
+    Vue.component(component.name, component);
+  });
+};
+// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
+if (typeof window !== 'undefined' && (window as any).Vue) {
+  // window.Vue.use(install)
+  install((window as any).Vue);
+}
+
+
+
+
+
+// import HelloWorld from "@/components/HelloWorld.vue";
+// import HelloWorld from "@/components/index";
+
+
+
 
-class Test {
 
-  public static print(info: string): void {
-    console.log(info);
 
-    console.log('测试npm');
 
-    const arr = [1, 2]
-    console.log(arr[5]);
 
-    console.log('测试npm22');
-    console.log('测试npm33333');
 
-  }
 
-}
 
-export default Test;
-export { }
+export default {}
+export { EMacro, FileViewer }

package/src/main.ts

@@ -7,7 +7,9 @@ import store from './store'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
-Vue.use(ElementUI);
+
+
+Vue.use(ElementUI); 
 
 Vue.config.productionTip = false
 

package/src/router/index.ts

@@ -17,7 +17,17 @@ const routes: Array<RouteConfig> = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
+  },
+  {
+    path: '/FileViewer',
+    name: 'FileViewer',
+    component: () => import('../views/FileViewer/index.vue')
+  }, 
+  {
+    path: '/TestView',
+    name: 'TestView',
+    component: () => import('../views/TestView/index.vue')
+  },
 ]
 
 const router = new VueRouter({

package/src/shims-vue.d.ts

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

package/src/utilities/File.ts

@@ -1,22 +1,54 @@
+import * as XLSX from "xlsx";
 
+export namespace EMacro {
 
-const selectFile = (_options: any = { multiple: true }) => {
-    return new Promise((res, rej) => {
-        let options = {
-            accept: "*/*",
-            multiple: true,
-        };
-        if (_options) {
-            options.accept = _options.accept;
-            options.multiple = _options.multiple;
+    export const version = "1.0"
+
+    export class File {
+
+        private static selectFile(options: any = { multiple: true, accept: "*/*" }) {
+            return new Promise((res: (value: FileList) => void, rej) => {
+                const el = document.createElement("input");
+                el.type = "file";
+                el.accept = options.accept;
+                el.multiple = options.multiple;
+                el.addEventListener("change", (_) => {
+                    try {
+                        if (el.files === null) {
+                            rej(null)
+                        } else {
+                            res(el.files);
+                        }
+                    } catch (error) {
+                        rej(error)
+                    }
+                });
+                el.click();
+            });
+        }
+
+        public static readLocalExcel(onloadend: (file, workbook) => void, options: any = { multiple: true, accept: "*/*" }) {
+
+            this.selectFile(options).then((files: FileList) => {
+                for (let i = 0; i < files.length; i++) {
+                    const file = files[i];
+                    let reader = new FileReader();
+                    reader.readAsArrayBuffer(file);
+                    reader.onloadend = async function (e: any) {
+                        let workbook = XLSX.read(e.target.result, { type: "binary" });
+                        onloadend(file, workbook);
+                    }
+                }
+            }).catch(e => {
+                throw e;
+            })
         }
-        const el = document.createElement("input");
-        el.type = "file";
-        el.accept = options.accept;
-        el.multiple = options.multiple;
-        el.addEventListener("change", (_) => {
-            res(el.files);
-        });
-        el.click();
-    });
-}
+
+    }
+
+}
+ 
+
+
+
+ 

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>