图片预览组件，支持图片显示

Tevin

2024-03-19 a250b6216753cfd0c0622a1fbc0f3254fc8e0a4f

图片预览组件，支持图片显示

 forms/imagePicker/CImagePreview.vue

@@ -4,12 +4,24 @@
 */

<template>
    <view class="c-image-preview"></view>
    <view class="c-image-preview">
        <image
            class="c-image-preview-img"
            :class="imgClass"
            mode="aspectFit"
            :lazyLoad="true"
            v-for="(img, index) of imgList"
            :src="img.thumb"
            :key="index"
            @tap="evt => $preview({ current: img.org, urls: imgs })"
        />
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
import './cImagePreview.scss';

// 直线方程，点斜式参数
const createLineEquation = (p1, p2) => {
@@ -21,8 +33,32 @@

export default {
    name: 'CImagePreview',
    props: {
        // 图片样式名
        imgClass: String,
        // 图片地址
        imgs: {
            type: Array,
            default: () => [],
        },
        // 开启缩略图地址转换
        useThumb: {
            typeof: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
    computed: {
        imgList() {
            return this.imgs.map(img => ({
                org: img,
                thumb: this.useThumb
                    ? img.replace(/(.*?)(\.(png|jpg|jpeg|gif))$/, '$1_thumb$2')
                    : img,
            }));
        },
    },
    methods: {
        // option { current, urls }
@@ -87,11 +123,11 @@
                                if (scale - 1 > 0.1) {
                                    equationX = createLineEquation(
                                        { x: 1, y: 0 },
                                        { x: scale, y: startOffsetX }
                                        { x: scale, y: startOffsetX },
                                    );
                                    equationY = createLineEquation(
                                        { x: 1, y: 0 },
                                        { x: scale, y: startOffsetY }
                                        { x: scale, y: startOffsetY },
                                    );
                                }
                                // 初始状态，不计算
@@ -128,7 +164,7 @@
                                const yMove =
                                    evt.touches[1].clientY - evt.touches[0].clientY;
                                const newDistance = Math.sqrt(
                                    xMove * xMove + yMove * yMove
                                    xMove * xMove + yMove * yMove,
                                );
                                const distanceDiff = newDistance - distance;
                                const newScale = scale + 0.01 * distanceDiff;

 forms/imagePicker/cImagePreview.scss

New file
@@ -0,0 +1,16 @@
/**
 * CImagePreview
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-image-preview {
    .c-image-preview-img {
        margin: 0 10px 10px 0;
        max-width: 300px;
        max-height: 300px;
        background-color: #f2f2f2;
        border-radius: 4px;
    }
}

 forms/imagePicker/index.js

@@ -4,7 +4,6 @@
 */

import CImagePicker from '@components/forms/imagePicker/CImagePicker.vue';
import CImagePreview from '@components/forms/imagePicker/CImagePreview.vue';

export {
    CImagePicker,
}
export { CImagePicker, CImagePreview };