ui-process-h5 0.1.36 → 0.1.40

package/src/packages/previewImage/index.js

@@ -0,0 +1,158 @@
+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,
+            // 初始获取当前触摸位置
+            startX: 0,
+            // 移动计数
+            move: 0,
+            startMove: 0,
+            // 阈值
+            maxX: 0,
+            duration:
+                "transition-duration: 0.2s;transition-timing-function:ease;",
+            isIndex: 1,
+            show: false,
+        };
+    },
+
+    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: {
+        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,59 @@
+.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: 100%;
+}
+
+.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;
+}

package/src/packages/previewImage/index.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="preview-image" v-if="visible">
+        <div class="preview-image-mask" @click="handleClose"></div>
+
+        <div
+            class="preview-image-view--img"
+            :style="`transform: translate(${move}%,-50%);${duration}${
+                isOne ? 'justify-content: center;width:auto;' : ''
+            }`"
+            @touchstart="touchstartView"
+            @touchmove="touchmoveView"
+            @touchend="touchendView"
+        >
+            <img
+                class="img-view"
+                v-for="(v, i) in imagesList"
+                :key="i"
+                :src="v"
+                :style="isOne ? isStyle : ''"
+            />
+            <!-- :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>