ui-process-h5 0.1.40 → 1.0.1

package/src/main.js

@@ -1,15 +1,17 @@
-import { version } from 'vue-demi'
-import App from './App.vue'
-import { createApp } from 'vue3'
-import Vue2 from 'vue2'
-import Vue27 from 'vue2.7'
-if (version.startsWith('2.7.')) {
-  new Vue2({ render: (h) => h(App) }).$mount('#app')
-}
-else if (version.startsWith('2.')) {
-  new Vue27({ render: (h) => h(App) }).$mount('#app')
+import { version } from "vue-demi";
+import App from "./App.vue";
+import { createApp } from "vue3";
+import Vue2 from "vue2";
+import Vue27 from "vue2.7";
+import Vconsole from "vconsole";
+if (version.startsWith("2.7.")) {
+    new Vue2({ render: (h) => h(App) }).$mount("#app");
+} else if (version.startsWith("2.")) {
+    new Vue27({ render: (h) => h(App) }).$mount("#app");
 } else {
-  const app = createApp(App)
-  app.mount('#app')
+    const app = createApp(App);
+    app.mount("#app");
 }
 
+/* let vConsole = new Vconsole();
+export default vConsole */

package/src/packages/attchUpload/index.js

@@ -165,30 +165,30 @@ export default defineComponent({
     },
 
     mounted() {
-        // 兼容uni(uni编译会修改input属性,在点击上传时创建dom) upload-header-upload--item
+        // 兼容uni(uni编译会修改input属性,渲染完成后创建dom) upload-header-upload--item  兼容ios低版本,外部点击触发input事件
 
         this.$nextTick(() => {
             let input = document.createElement("input");
             input.type = "file";
             input.className = "upload-input";
-            input.style = "opacity: 0;position: absolute;";
+            input.style = "opacity: 0;position: absolute;width:100%;height:100%;visibility: hidden;";
             input.multiple = true;
+            input.id = "fileUp";
             input.addEventListener("change", this.handleSelect);
             document.getElementById("inputfile").appendChild(input);
+        });
+    },
 
+    methods: {
+        // 拦截
+        handleClick() {
+            // console.log("拦截", this.haveCount, this.limit);
             if (
                 "undefined" != typeof nativeMethod &&
                 nativeMethod.vueSelectFile
             ) {
                 nativeMethod.vueSelectFile(2, "*", this.limit || 1);
             }
-        });
-    },
-
-    methods: {
-        // 拦截
-        handleClick() {
-            console.log("拦截", this.haveCount, this.limit);
             if (this.haveCount <= 0) {
                 this.handleTips(
                     `最多上传${props.limit}个文件`,
@@ -197,12 +197,16 @@ export default defineComponent({
                 );
                 return;
             }
+
+            document.getElementById("fileUp").click();
+            /* console.log("click:::",document.getElementById("fileUp")) */
         },
         // 上传选择
         async handleSelect(value, items) {
             this.handleTips("上传中", true, "loading");
-            console.log("formData", value.target.files);
+            // console.log("formData", value.target.files);
             const files = Array.from(value.target.files);
+            document.getElementById("fileUp").value = "";
             let num = 0;
             let numLength =
                 this.haveCount > files.length ? files.length : this.haveCount;
@@ -283,7 +287,7 @@ export default defineComponent({
                 }
                 this.handleTips("上传成功", true, "success");
                 this.viewImage();
-                console.log("当前已上传", this.filesArr);
+                // console.log("当前已上传", this.filesArr);
                 this.emitView();
             } catch (err) {
                 this.handleTips("上传失败", true, "error");
@@ -308,18 +312,18 @@ export default defineComponent({
         },
         // 预览
         viewFile(data, index) {
-            console.log("data", data);
+            // console.log("data", data);
             if (
                 this.imgIcon.includes(
                     data.name.substring(data.name.lastIndexOf(".") + 1)
                 )
             ) {
-                this.visible = true;
                 this.indexd = this.lists.indexOf(data.url);
+                this.visible = true;
             } else {
                 if (data.url) {
-                    this.visibleS = true;
                     this.fileUrl = data.url;
+                    this.visibleS = true;
                 }
             }
         },
@@ -346,13 +350,12 @@ export default defineComponent({
         },
         // 发送数据
         emitView() {
-            console.log("已发送数据:", this.filesArr);
             this.$emit("getValue", this.filesArr);
         },
         // clear node
         clearData() {
             this.filesArr = [];
-            console.log("clear!!!!!");
+            // console.log("clear!!!!!");
         },
 
         // tips

package/src/packages/attchUpload/index.scss

@@ -10,7 +10,6 @@
 }
 .attch-upload-body {
     width: 100%;
-    position: relative;
 }
 .upload-close {
     box-sizing: border-box;
@@ -40,13 +39,19 @@
     color: #ee0000;
 }
 
+.upload-header-title {
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
 .upload-header-close {
     width: 18px;
     height: 18px;
 }
 
 .upload-header-upload {
-    height: 18px;
+    height: 100%;
 
     font-size: 14px;
     color: #1389ff;
@@ -59,6 +64,8 @@
 .upload-header-upload--item {
     display: flex;
     align-items: center;
+    height: 100%;
+    position: relative;
 }
 
 .upload-header-upload--item img {
@@ -133,4 +140,4 @@
     height: 100dvh;
     display: flex;
     flex-direction: column;
-}
+}

package/src/packages/downSelect/index.js

@@ -25,6 +25,16 @@ export default defineComponent({
             type: Boolean,
             default: false,
         },
+        // 默认选择
+        defaultValue: {
+            type: String,
+            default: "",
+        },
+        // 提示
+        placeholder: {
+            type: String,
+            default: "请选择",
+        },
     },
     data() {
         return {
@@ -44,15 +54,22 @@ export default defineComponent({
             handler(val, preVal) {
                 if (val && val.length) {
                     this.lists = val;
-                    this.activeItem = val[0];
-                    this.active = this.activeItem.id;
-                    this.$emit("change", this.activeItem);
-                    console.log("接受下拉:::", val, this.lists);
+                    console.log("select::::",val,this.lists)
                 }
             },
             immediate: true,
             deep: true,
         },
+        defaultValue: {
+            handler(val, preVal) {
+                this.active = val;
+                let data = this.lists.filter((v, i) => {
+                    return v.id == val;
+                });
+                this.activeItem = data[0];
+                this.$emit("change", this.activeItem);
+            },
+        },
     },
     computed: {
         arrow() {
@@ -66,16 +83,17 @@ export default defineComponent({
         // 展开当前下拉
         handleExpand() {
             this.expand ? (this.expand = false) : (this.expand = true);
-            console.log("handleExpand", this.expand);
+            // console.log("handleExpand", this.expand);
         },
 
         // 点击选择
         handleClick(item, index) {
-            console.log("当前选择:::", item, index);
+            // console.log("当前选择:::", item, index);
+            if (this.active == item.id) return;
             this.active = item.id;
             this.activeItem = item;
             this.expand = false;
-            this.$emit("change", this.activeItem);
+            this.$emit("change", this.activeItem, this.lists);
         },
     },
 });

package/src/packages/downSelect/index.scss

@@ -19,6 +19,10 @@
             box-shadow: none;
         }
 
+        &-placeholder {
+            color: #888;
+        }
+
         &--arrow {
             width: 10px;
             height: 10px;

package/src/packages/downSelect/index.vue

@@ -3,9 +3,12 @@
         <div
             class="top-select-menu"
             @click="handleExpand"
-            :class="[border && 'top-select-menu-border']"
+            :class="[
+                border && 'top-select-menu-border',
+                !activeItem.name && 'top-select-menu-placeholder',
+            ]"
         >
-            {{ activeItem.name }}
+            {{ activeItem.name ? activeItem.name : placeholder }}
             <img
                 class="top-select-menu--arrow"
                 :src="arrow"
@@ -28,7 +31,7 @@
             :style="`${
                 expand
                     ? 'transform: translateY(2%);visibility: visible; opacity: 1;'
-                    : 'transform: translateY(-100%);visibility: hidden; opacity: 0'
+                    : 'transform: translateY(-50%);visibility: hidden; opacity: 0'
             };${optionStyle ? optionStyle : ''}`"
         >
             <div

package/src/packages/popup/index.js

@@ -16,10 +16,12 @@ export default defineComponent({
         visible: { default: false, type: Boolean }, // 展示
         isIndex: { type: Number }, // 层级
         width: { type: String, default: "95vw" },
+        className: { type: String, default: "" },
     },
     data() {
         return {
             show: false,
+            top: 0,
         };
     },
     watch: {
@@ -34,10 +36,18 @@ export default defineComponent({
     methods: {
         handleOpen() {
             this.show = true;
+            this.top = window.scrollY;
+            document.body.position = "fixed";
+            document.body.top = -this.top + "px";
         },
         handleClose() {
+            document.body.position = "";
+            document.body.top = "";
+            window.scrollTo(0, this.top);
             this.show = false;
             this.$emit("update:visible", false);
+
+            // this.$destroy();
         },
         handleCancel() {
             typeof this.cancel === "function" && this.cancel();
@@ -50,11 +60,13 @@ export default defineComponent({
     mounted() {
         // 渲染组件到body
         this.$nextTick(() => {
-            const body = document.querySelector("body");
-            if (body.append) {
-                body.append(this.$el);
-            } else {
-                body.appendChild(this.$el);
+            if (document.getElementsByClassName("process-warp")[0]) {
+                const body = document.getElementsByClassName("process-warp")[0];
+                if (body.append) {
+                    body.append(this.$el);
+                } else {
+                    body.appendChild(this.$el);
+                }
             }
         });
     },

package/src/packages/popup/index.scss

@@ -31,7 +31,6 @@
     font-size: 15px;
     background-color: #fff;
     position: relative;
-    z-index: 209;
 }
 
 .top-popup-header .header-title {

package/src/packages/popup/index.vue

@@ -2,6 +2,7 @@
     <div
         class="top-popup-zindex"
         :style="`${isIndex ? `z-index:${isIndex}` : ''}`"
+        :class="className"
     >
         <div
             class="top-popup-mask"

package/src/packages/preview/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="width: 100%; height: calc(100% - 40px);">
+    <div style="width: 100%; height: calc(100% - 40px);" v-if="url">
         <video style="height: 100%; width: 100vw;" controls v-if="videoShow">
             <source :src="url" type="video/mp4" />
         </video>

package/src/packages/previewImage/index.js

@@ -40,8 +40,10 @@ export default defineComponent({
             flag: false,
             // 当前屏幕宽度
             windowWidth: 0,
+            windowHeight: 0,
             // 初始获取当前触摸位置
             startX: 0,
+            startY: 0,
             // 移动计数
             move: 0,
             startMove: 0,
@@ -51,6 +53,13 @@ export default defineComponent({
                 "transition-duration: 0.2s;transition-timing-function:ease;",
             isIndex: 1,
             show: false,
+            displacement: {
+                scale: 1,
+            },
+            styleZoom: "",
+            styleOrigin: "",
+            moveX: "-50%",
+            moveY: "-50%",
         };
     },
 
@@ -58,7 +67,7 @@ export default defineComponent({
         images: {
             handler(val, preVal) {
                 this.imagesList = val;
-                console.log("打印图片列表:::", this.imagesList);
+                // console.log("打印图片列表:::", this.imagesList);
             },
             //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
             //那么首次执行，val为默认值,preVal为undefined
@@ -69,7 +78,7 @@ export default defineComponent({
         visible: {
             handler(val, preVal) {
                 this.show = val;
-                console.log("打印:::", val);
+                // console.log("打印:::", val);
             },
             immediate: true,
         },
@@ -85,6 +94,120 @@ export default defineComponent({
     },
 
     methods: {
+        handelTouchstart(e) {
+            let touches = e.touches;
+            let events1 = touches[0];
+            let events2 = touches[1];
+
+            this.displacement.pageX = events1.pageX;
+            this.displacement.pageY = events1.pageY;
+
+            this.displacement.moveable = true;
+
+            if (events2) {
+                this.displacement.pageX2 = events2.pageX;
+                this.displacement.pageY2 = events2.pageY;
+            } else {
+                /* this.touchstartView(); */
+                this.duration =
+                    "transition-duration: 0.05s;transition-timing-function:linear";
+                this.windowWidth =
+                    (document.documentElement.clientWidth ||
+                        document.body.clientWidth) / 100;
+                this.windowHeight =
+                    (document.documentElement.clientHeight ||
+                        document.body.clientHeight) / 100;
+                this.startX = e.touches[0].clientX;
+                this.startY = e.touches[0].clientY;
+                this.startMove = this.move;
+            }
+
+            /* console.log("touches", this.touches, this.events1, this.events2); */
+            this.displacement.originScale = this.displacement.scale || 1;
+        },
+
+        handelTouchmove(e) {
+            if (!this.displacement.moveable) {
+                return;
+            }
+
+            e.preventDefault();
+
+            let touches = e.touches;
+            let events = touches[0];
+            let events2 = touches[1];
+
+            if (events2) {
+                if (!this.displacement.pageX2) {
+                    this.displacement.pageX2 = events2.pageX;
+                }
+                if (!this.displacement.pageY2) {
+                    this.displacement.pageY2 = events2.pageY;
+                }
+
+                let zoom =
+                    this.getDistance(
+                        {
+                            x: events.pageX,
+                            y: events.pageY,
+                        },
+                        {
+                            x: events2.pageX,
+                            y: events2.pageY,
+                        }
+                    ) /
+                    this.getDistance(
+                        {
+                            x: this.displacement.pageX,
+                            y: this.displacement.pageY,
+                        },
+                        {
+                            x: this.displacement.pageX2,
+                            y: this.displacement.pageY2,
+                        }
+                    );
+
+                let newScale = this.displacement.originScale * zoom;
+                /* if (newScale > 1) {
+                    newScale = 1;
+                } */
+
+                if (newScale < 0.5) {
+                    newScale = 0.5;
+                } else if (newScale > 3) {
+                    newScale = 3;
+                }
+
+                this.displacement.scale = newScale;
+
+                this.styleZoom = `scale(${newScale})`;
+                this.styleOrigin = `0 0`;
+
+                console.log("styleZoom", newScale);
+            } else {
+                console.log(
+                    "移动",
+                    e.touches[0].clientX - this.startX,
+                    e.touches[0].clientY - this.startY
+                );
+
+                this.moveX = `calc(${
+                    (e.touches[0].clientX - this.startX) /
+                    this.displacement.scale
+                }px - 50%)`;
+
+                this.moveY = `calc(${
+                    (e.touches[0].clientY - this.startY) /
+                    this.displacement.scale
+                }px - 50%)`;
+            }
+        },
+
+        getDistance(start, stop) {
+            // Math.hypot()计算参数的平方根
+            return Math.hypot(stop.x - start.x, stop.y - start.y);
+        },
+
         touchstartView(e) {
             if (this.isOne) return;
             // 获取元素

package/src/packages/previewImage/index.scss

@@ -26,7 +26,11 @@
 }
 
 .preview-image-view--img .img-view {
-    width: 100%;
+    width: 80%;
+    box-sizing: border-box;
+    margin: 0 10%;
+    z-index: 2;
+    position: relative;
 }
 
 .preview-image-mask {
@@ -56,4 +60,17 @@
     background-color: rgba(0, 0, 0, 0.5);
     padding: 1px 9px;
     border-radius: 11px;
-}
+}
+
+.preview-image-view--one {
+    position: absolute;
+    z-index: 10000;
+    width: 50%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.preview-image-view--one .img-view {
+    width: 100%;
+}

package/src/packages/previewImage/index.vue

@@ -3,23 +3,44 @@
         <div class="preview-image-mask" @click="handleClose"></div>
 
         <div
+            v-if="!isOne"
             class="preview-image-view--img"
-            :style="`transform: translate(${move}%,-50%);${duration}${
-                isOne ? 'justify-content: center;width:auto;' : ''
-            }`"
+            :style="`transform: translate(${move}%,-50%);${duration}`"
             @touchstart="touchstartView"
             @touchmove="touchmoveView"
             @touchend="touchendView"
         >
+            <div
+                class="preview-image-mask"
+                @click="handleClose"
+                style="opacity: 0; z-index: 1;"
+            ></div>
             <img
                 class="img-view"
                 v-for="(v, i) in imagesList"
                 :key="i"
                 :src="v"
-                :style="isOne ? isStyle : ''"
             />
             <!-- :style="`transform: translateX(${i * 100}%);`" -->
         </div>
+        <div
+            v-else
+            class="preview-image-view--one"
+            @touchstart="handelTouchstart"
+            @touchmove="handelTouchmove"
+            :style="`transform:${styleZoom} translate(${moveX},${moveY});${duration};${
+                styleOrigin ? `transformOrigin:${styleOrigin}` : ''
+            };`"
+        >
+            <img
+                class="img-view"
+                v-for="(v, i) in imagesList"
+                :key="i"
+                :src="v"
+            />
+
+            <!-- :style="`transform: translateX(${i * 100}%);`" -->
+        </div>
         <div class="preview-image-view--page" v-if="!isOne">
             <span class="page-item">{{ isIndex }}/{{ imagesList.length }}</span>
         </div>