ui-process-h5 2.1.0-beta → 2.1.1-beta

package/src/packages/preview/index.vue

@@ -1,15 +0,0 @@
-<template>
-    <div style="width: 100%; height: calc(100% - 40px);" v-if="url">
-        <video style="height: 100%; width: 100%;" controls v-if="videoShow">
-            <source :src="url" type="video/mp4" />
-        </video>
-
-        <iframe
-            v-else
-            style="height: 100%; border: unset; width: 100%;"
-            :src="url"
-        >
-        </iframe>
-    </div>
-</template>
-<script src="./index.js"></script>

package/src/packages/previewImage/index.js

@@ -1,286 +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,
-            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%",
-            newScaleData: 1,
-        };
-    },
-
-    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.getElementsByClassName("process-warp")[0]
-                ? document.getElementsByClassName("process-warp")[0]
-                : document
-                      .getElementsByClassName("sumbmitPopup-index-sumbit")[0]
-                      .getElementsByClassName("top-popup")[0];
-            if (body.append) {
-                body.append(this.$el);
-            } else {
-                body.appendChild(this.$el);
-            }
-        });
-    },
-});

package/src/packages/previewImage/index.scss

@@ -1,76 +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: 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

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