@netang/quasar 0.1.35 → 0.1.37

package/components/dialog/img-viewer/index.vue

@@ -0,0 +1,646 @@
+<template>
+    <q-dialog
+        class="n-img-viewer"
+        ref="dialogRef"
+        v-model="currentModelValue"
+        :no-backdrop-dismiss="noBackdropDismiss"
+        transition-show="fade"
+        transition-hide="fade"
+        maximized
+        v-bind="$attrs"
+        @hide="onDialogHide"
+    >
+        <div class="absolute-full">
+
+            <!-- 遮蔽 -->
+            <div class="absolute-full" @click="onDialogCancel" v-if="! noBackdropDismiss"></div>
+
+            <!-- 关闭 -->
+            <q-btn
+                class="n-img-viewer__btn n-img-viewer__btn--close cursor-pointer"
+                :icon="closeIcon"
+                round
+                @click="onDialogCancel"
+                unelevated
+                :ripple="false"
+            />
+
+            <!-- 翻页按钮 -->
+            <template v-if="! isSingle">
+
+                <!-- 上一张按钮 -->
+                <q-btn
+                    class="n-img-viewer__btn n-img-viewer__btn--prev cursor-pointer"
+                    :icon="prevIcon"
+                    round
+                    @click="prev"
+                    unelevated
+                    :ripple="false"
+                />
+
+                <!-- 下一张按钮 -->
+                <q-btn
+                    class="n-img-viewer__btn n-img-viewer__btn--next cursor-pointer"
+                    :icon="nextIcon"
+                    round
+                    @click="next"
+                    unelevated
+                    :ripple="false"
+                />
+            </template>
+
+            <!-- 操作面板 -->
+            <div class="n-img-viewer__btn n-img-viewer__settings">
+                <div class="n-img-viewer__settings__inner">
+
+                    <!-- 缩小 -->
+                    <q-icon
+                        class="cursor-pointer"
+                        :name="zoomOutIcon"
+                        @click="handleActions('zoomOut')"
+                    />
+
+                    <!-- 放大 -->
+                    <q-icon
+                        class="cursor-pointer"
+                        :name="zoomInIcon"
+                        @click="handleActions('zoomIn')"
+                    />
+
+                    <!-- 水平反转 -->
+                    <q-icon
+                        class="cursor-pointer"
+                        :name="flipHorizontalIcon"
+                        @click="handleActions('flipX')"
+                    />
+
+                    <!-- 切换比例 -->
+                    <q-icon
+                        class="cursor-pointer"
+                        :name="isContain ? fullscreenIcon : exitFullscreenIcon"
+                        @click="toggleMode"
+                    />
+
+                    <!-- 垂直反转 -->
+                    <q-icon
+                        class="cursor-pointer"
+                        :name="flipVerticalIcon"
+                        @click="handleActions('flipY')"
+                    />
+
+                    <!-- 左旋转 -->
+                    <q-icon
+                        class="cursor-pointer"
+                        :name="rotateLeftIcon"
+                        @click="handleActions('anticlockwise')"
+                    />
+
+                    <!-- 右旋转 -->
+                    <q-icon
+                        class="cursor-pointer"
+                        :name="rotateRightIcon"
+                        @click="handleActions('clockwise')"
+                    />
+                </div>
+            </div>
+
+            <!-- 图片列表 -->
+            <a
+                v-for="(item, i) in currentImages"
+                :key="`${item.src}-${i}`"
+                :href="item.origin"
+                target="_blank"
+            >
+                <img
+                    :ref="(el) => (imgRefs[i] = el)"
+                    :src="item.src"
+                    :style="imgStyle"
+                    @load="handleImgLoad"
+                    @error="handleImgError"
+                    v-show="i === activeIndex"
+                />
+            </a>
+
+        </div>
+    </q-dialog>
+</template>
+
+<script>
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useDialogPluginComponent } from 'quasar'
+
+import $n_forEach from '@netang/utils/forEach'
+
+import $n_getImage from '../../../utils/getImage'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NDialog',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 值
+        modelValue: {
+            type: Boolean,
+            default: true,
+        },
+        noBackdropDismiss: Boolean,
+
+        // 需要预览的图片 URL 数组
+        images: {
+            type: Array,
+            default: () => [],
+        },
+        // 图片预览起始位置索引
+        startPosition: {
+            type: Number,
+            default: 0,
+        },
+        infinite: {
+            type: Boolean,
+            default: true,
+        },
+        zoomRate: {
+            type: Number,
+            default: 1.2,
+        },
+        // 关闭图标
+        closeIcon: {
+            type: String,
+            default: 'close',
+        },
+        // 上一张图标
+        prevIcon: {
+            type: String,
+            default: 'arrow_back_ios_new',
+        },
+        // 下一张图标
+        nextIcon: {
+            type: String,
+            default: 'arrow_forward_ios',
+        },
+        // 缩小图标
+        zoomOutIcon: {
+            type: String,
+            default: 'zoom_out',
+        },
+        // 放大图标
+        zoomInIcon: {
+            type: String,
+            default: 'zoom_in',
+        },
+        // 全屏图标
+        fullscreenIcon: {
+            type: String,
+            default: 'fullscreen',
+        },
+        // 退出全屏图标
+        exitFullscreenIcon: {
+            type: String,
+            default: 'fullscreen_exit',
+        },
+        // 水平反转图标
+        flipHorizontalIcon: {
+            type: String,
+            default: 'swap_horiz',
+        },
+        // 垂直反转图标
+        flipVerticalIcon: {
+            type: String,
+            default: 'swap_vert',
+        },
+        // 左旋转图标
+        rotateLeftIcon: {
+            type: String,
+            default: 'rotate_left',
+        },
+        // 右旋转图标
+        rotateRightIcon: {
+            type: String,
+            default: 'rotate_right',
+        },
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+        'change',
+        ...useDialogPluginComponent.emits
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit }) {
+
+        // ==========【数据】============================================================================================
+
+        // 当前值
+        const currentModelValue = ref(props.modelValue)
+
+        // 目标节点
+        const targetRef = ref()
+
+        // 图片节点数组
+        const imgRefs = ref([])
+
+        // 加载中
+        const loading = ref(true)
+
+        // 当前激活索引
+        const activeIndex = ref(props.startPosition)
+
+        // 模式
+        const isContain = ref(true)
+
+        // 转换效果
+        const transform = ref({
+            scale: 1,
+            deg: 0,
+            rotateX: 1,
+            rotateY: 1,
+            offsetX: 0,
+            offsetY: 0,
+            enableTransition: false,
+        })
+
+        // ==========【计算属性】==========================================================================================
+
+        /**
+         * 当前图片数组
+         */
+        const currentImages = computed(function () {
+
+            const lists = []
+
+            $n_forEach(props.images, function (url) {
+                const origin = $n_getImage(url, { compress: false })
+                if (origin) {
+                    lists.push({
+                        src: $n_getImage(url, { w: 1000 }),
+                        origin,
+                    })
+                }
+            })
+            
+            return lists
+        })
+
+        /**
+         * 是否单图
+         */
+        const isSingle = computed(function () {
+            return currentImages.value.length <= 1
+        })
+
+        /**
+         * 是否第一张
+         */
+        const isFirst = computed(function () {
+            return activeIndex.value === 0
+        })
+
+        /**
+         * 是否最后一张
+         */
+        const isLast = computed(function () {
+            return activeIndex.value === currentImages.value.length - 1
+        })
+
+        /**
+         * 当前图片
+         */
+        const currentImg = computed(function () {
+            return currentImages.value[activeIndex.value]
+        })
+
+        /**
+         * 图片样式
+         */
+        const imgStyle = computed(function () {
+            const { scale, deg, rotateX, rotateY, offsetX, offsetY, enableTransition } = transform.value
+            let translateX = offsetX / scale
+            let translateY = offsetY / scale
+
+            switch (deg % 360) {
+                case 90:
+                case -270:
+                    ;[translateX, translateY] = [translateY, -translateX]
+                    break
+                case 180:
+                case -180:
+                    ;[translateX, translateY] = [-translateX, -translateY]
+                    break
+                case 270:
+                case -90:
+                    ;[translateX, translateY] = [-translateY, translateX]
+                    break
+            }
+
+            const style = {
+                    transform: `scale(${scale}) scale3d(${rotateX}, ${rotateY}, 1) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
+                transition: enableTransition ? 'transform .3s' : '',
+            }
+
+            if (isContain.value) {
+                style.maxWidth = style.maxHeight = '100%'
+            }
+
+            return style
+        })
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听当前图片
+         */
+        watch(currentImg, function () {
+            nextTick(function () {
+                const $img = imgRefs.value[0]
+                if (!$img?.complete) {
+                    loading.value = true
+                }
+            })
+        })
+
+        /**
+         * 监听当前索引
+         */
+        watch(activeIndex, function (val) {
+            reset()
+            emit('change', val)
+        })
+
+        /**
+         * 监听值
+         */
+        watch(()=>props.modelValue, function (val) {
+            currentModelValue.value = val
+        })
+
+        /**
+         * 监听当前值
+         */
+        watch(currentModelValue, function (val) {
+            emit('update:modelValue', val)
+        })
+
+        const {
+            // 对话框节点
+            dialogRef,
+            // 对话框取消
+            onDialogCancel,
+            // 对话框隐藏
+            onDialogHide,
+        } = useDialogPluginComponent()
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 图片加载完成
+         */
+        function handleImgLoad() {
+            loading.value = false
+        }
+
+        /**
+         * 图片加载错误
+         */
+        function handleImgError() {
+            loading.value = false
+        }
+
+        /**
+         * 重置
+         */
+        function reset() {
+            transform.value = {
+                scale: 1,
+                deg: 0,
+                rotateX: 1,
+                rotateY: 1,
+                offsetX: 0,
+                offsetY: 0,
+                enableTransition: false,
+            }
+        }
+
+        /**
+         * 切换模式
+         */
+        function toggleMode() {
+            if (loading.value) return
+
+            // 切换是否包含
+            isContain.value = ! isContain.value
+
+            reset()
+        }
+
+        /**
+         * 设置激活
+         */
+        function setActiveItem(index) {
+            const len = currentImages.value.length
+            activeIndex.value = (index + len) % len
+        }
+
+        /**
+         * 前一张
+         */
+        function prev() {
+            if (isFirst.value && !props.infinite) return
+            setActiveItem(activeIndex.value - 1)
+        }
+
+        /**
+         * 后一张
+         */
+        function next() {
+            if (isLast.value && !props.infinite) return
+            setActiveItem(activeIndex.value + 1)
+        }
+
+        /**
+         * 操作
+         */
+        function handleActions(action, options = {}) {
+            if (loading.value) return
+            const { zoomRate, rotateDeg, enableTransition } = {
+                zoomRate: props.zoomRate,
+                rotateDeg: 90,
+                enableTransition: true,
+                ...options,
+            }
+            switch (action) {
+                case 'zoomOut':
+                    if (transform.value.scale > 0.2) {
+                        transform.value.scale = Number.parseFloat(
+                            (transform.value.scale / zoomRate).toFixed(3)
+                        )
+                    }
+                    break
+                case 'zoomIn':
+                    if (transform.value.scale < 7) {
+                        transform.value.scale = Number.parseFloat(
+                            (transform.value.scale * zoomRate).toFixed(3)
+                        )
+                    }
+                    break
+                case 'clockwise':
+                    transform.value.deg += rotateDeg
+                    break
+                case 'anticlockwise':
+                    transform.value.deg -= rotateDeg
+                    break
+                case 'flipX':
+                    transform.value.rotateX = -transform.value.rotateX
+                    break
+                case 'flipY':
+                    transform.value.rotateY = -transform.value.rotateY
+                    break
+            }
+            transform.value.enableTransition = enableTransition
+        }
+
+        // ==========【声明周期】=========================================================================================
+
+        /**
+         * 实例被挂载后调用
+         */
+        onMounted(function() {
+            targetRef.value?.focus?.()
+        })
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            currentModelValue,
+            // 对话框节点
+            dialogRef,
+            // 对话框取消
+            onDialogCancel,
+            // 对话框隐藏
+            onDialogHide,
+
+            // 目标节点
+            targetRef,
+            // 图片节点数组
+            imgRefs,
+            // 加载中
+            loading,
+            // 当前激活索引
+            activeIndex,
+            // 是否包含
+            isContain,
+            // 转换效果
+            transform,
+
+            // 当前图片数组
+            currentImages,
+            // 是否单图
+            isSingle,
+            // 是否第一张
+            isFirst,
+            // 是否最后一张
+            isLast,
+            // 当前图片
+            currentImg,
+            // 图片样式
+            imgStyle,
+
+            // 图片加载完成
+            handleImgLoad,
+            // 图片加载错误
+            handleImgError,
+            // 重置
+            reset,
+            // 切换模式
+            toggleMode,
+            // 设置激活
+            setActiveItem,
+            // 前一张
+            prev,
+            // 后一张
+            next,
+            // 操作
+            handleActions,
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.n-img-viewer {
+
+    .q-dialog__inner > div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    // 按钮
+    &__btn {
+        position: fixed !important;
+        opacity: 0.8;
+        color: #ffffff !important;
+        background: #606266 !important;
+        user-select: none;
+        z-index: 1;
+
+        // 关闭按钮
+        &--close {
+            top: 40px;
+            right: 40px;
+            width: 40px;
+            height: 40px;
+        }
+
+        // 上一张按钮
+        &--prev {
+            top: 50%;
+            left: 40px;
+            width: 40px;
+            height: 40px;
+        }
+
+        // 下一张按钮
+        &--next {
+            top: 50%;
+            right: 40px;
+            width: 40px;
+            height: 40px;
+        }
+    }
+
+    // 操作面板
+    &__settings {
+        left: 50%;
+        bottom: 30px;
+        transform: translateX(-50%);
+        width: 282px;
+        height: 44px;
+        padding: 0 23px;
+        border-radius: 22px;
+
+        &__inner {
+            width: 100%;
+            height: 100%;
+            text-align: justify;
+            cursor: default;
+            font-size: 23px;
+            color: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+        }
+    }
+}
+</style>