ui-process-h5 0.1.36 → 1.0.1

package/src/packages/previewImage/index.js

@@ -0,0 +1,281 @@
+import { defineComponent } from "vue-demi";
+
+export default defineComponent({
+    name: "preview-image",
+    props: {
+        // 图片列表
+        images: {
+            type: Array,
+            defalut: () => [],
+        },
+        startPosition: {
+            type: Number,
+            defalut: 0,
+        },
+        // 展示
+        visible: {
+            type: Boolean,
+            defalut: false,
+        },
+        // 当前位置
+        indexd: {
+            type: Number,
+            defalut: 0,
+        },
+        // 单一展示
+        isOne: {
+            type: Boolean,
+            defalut: false,
+        },
+        isStyle: {
+            type: String,
+            defalut: "",
+        },
+    },
+    data() {
+        return {
+            imagesList: [],
+
+            moveNum: 0,
+            flag: false,
+            // 当前屏幕宽度
+            windowWidth: 0,
+            windowHeight: 0,
+            // 初始获取当前触摸位置
+            startX: 0,
+            startY: 0,
+            // 移动计数
+            move: 0,
+            startMove: 0,
+            // 阈值
+            maxX: 0,
+            duration:
+                "transition-duration: 0.2s;transition-timing-function:ease;",
+            isIndex: 1,
+            show: false,
+            displacement: {
+                scale: 1,
+            },
+            styleZoom: "",
+            styleOrigin: "",
+            moveX: "-50%",
+            moveY: "-50%",
+        };
+    },
+
+    watch: {
+        images: {
+            handler(val, preVal) {
+                this.imagesList = val;
+                // console.log("打印图片列表:::", this.imagesList);
+            },
+            //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
+            //那么首次执行，val为默认值,preVal为undefined
+            immediate: true,
+            //这个参数代表监听对象时，可以监听深度嵌套的对象属性
+            deep: true,
+        },
+        visible: {
+            handler(val, preVal) {
+                this.show = val;
+                // console.log("打印:::", val);
+            },
+            immediate: true,
+        },
+        indexd: {
+            handler(val, preVal) {
+                if (val >= 0) {
+                    this.isIndex = val + 1;
+                    this.move = val * 100 * -1;
+                }
+            },
+            immediate: true,
+        },
+    },
+
+    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;
+            // 获取元素
+            this.duration =
+                "transition-duration: 0.05s;transition-timing-function:linear";
+            this.flag = true;
+            this.windowWidth =
+                (document.documentElement.clientWidth ||
+                    document.body.clientWidth) / 100;
+            this.startX = e.touches[0].clientX;
+            this.startMove = this.move;
+        },
+        touchmoveView(e) {
+            if (this.isOne) return;
+            // 判断当前操作方向
+            if (this.startX > e.touches[0].clientX) {
+                if (this.move <= -((this.imagesList.length - 1) * 100)) {
+                    this.move = -((this.imagesList.length - 1) * 100);
+                } else {
+                    this.move =
+                        this.startMove +
+                        Math.ceil(
+                            (e.touches[0].clientX - this.startX) /
+                                this.windowWidth
+                        );
+                }
+            } else if (this.startX < e.touches[0].clientX && this.move < 0) {
+                if (this.move >= 0) {
+                    this.move = 0;
+                } else {
+                    this.move =
+                        this.startMove +
+                        Math.ceil(
+                            (e.touches[0].clientX - this.startX) /
+                                this.windowWidth
+                        );
+                }
+            }
+        },
+        touchendView() {
+            if (this.isOne) return;
+            this.duration =
+                "transition-duration: 0.2s;transition-timing-function:ease";
+            let paint = Math.floor(Math.abs(this.move / 100));
+            let num = Math.abs((this.move / 100) % 1);
+            if (num > 0.5) {
+                this.isIndex = paint + 2;
+                this.move = (paint + 1) * 100 * -1;
+            } else {
+                this.isIndex = paint + 1;
+                this.move = paint * 100 * -1;
+            }
+            this.flag = false;
+        },
+        handleClose() {
+            this.$emit("update:visible", false);
+        },
+    },
+
+    mounted() {
+        // 渲染组件到body
+        this.$nextTick(() => {
+            const body = document.querySelector("body");
+            if (body.append) {
+                body.append(this.$el);
+            } else {
+                body.appendChild(this.$el);
+            }
+        });
+    },
+});

package/src/packages/previewImage/index.scss

@@ -0,0 +1,76 @@
+.preview-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 3999;
+}
+
+.preview-image-view {
+    width: 100%;
+    height: 100%;
+
+    position: relative;
+}
+
+.preview-image-view--img {
+    min-width: 100%;
+    position: fixed;
+    top: 50%;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    z-index: 2999;
+}
+
+.preview-image-view--img .img-view {
+    width: 80%;
+    box-sizing: border-box;
+    margin: 0 10%;
+    z-index: 2;
+    position: relative;
+}
+
+.preview-image-mask {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000;
+    opacity: 0.7;
+    top: 0;
+    left: 0;
+    z-index: 1999;
+    transition: all 0.2s ease;
+}
+
+.preview-image-view--page {
+    position: absolute;
+    width: 100%;
+    bottom: 11px;
+    z-index: 2999;
+    display: flex;
+    justify-content: center;
+}
+
+.preview-image-view--page .page-item {
+    color: #fff;
+    font-size: 15px;
+    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

@@ -0,0 +1,53 @@
+<template>
+    <div class="preview-image" v-if="visible">
+        <div class="preview-image-mask" @click="handleClose"></div>
+
+        <div
+            v-if="!isOne"
+            class="preview-image-view--img"
+            :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="`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>
+        <div class="preview-image-view--close"></div>
+    </div>
+</template>
+<script src="./index.js"></script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>