ui-process-h5 0.1.40 → 1.0.6

package/src/packages/previewImage/index.js

@@ -1,158 +0,0 @@
-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

@@ -1,59 +0,0 @@
-.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

@@ -1,32 +0,0 @@
-<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>