1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <template>
| <div :class="['preview-image-wrapper', wrapperClassName]">
| <!-- <Image @tap="handeClick" :mode="mode" :src="src" v-bind="$attrs" /> -->
| <div
| class="preview-image-div"
| :style="{ backgroundImage: `url(${src})` }"
| v-bind="$attrs"
| @tap="handeClick"
| ></div>
| </div>
| </template>
|
| <script setup lang="ts">
| import { Image, ITouchEvent } from '@tarojs/components';
| import Taro from '@tarojs/taro';
| import { previewImageProps } from './previewImage';
| import { reactive, computed, watch } from 'vue';
|
| defineOptions({
| name: 'PreviewImage',
| inheritAttrs: false,
| });
|
| const props = defineProps(previewImageProps);
|
| const state = reactive({
| width: 0,
| height: 0,
| isLoaded: false,
| });
|
| const mode = computed(() => (state.width > state.height ? 'heightFix' : 'widthFix'));
|
| watch(
| () => props.src,
| () => {
| if (props.src) {
| Taro.getImageInfo({
| src: props.src,
| success(result) {
| state.width = result.width;
| state.height = result.height;
| state.isLoaded = true;
| },
| });
| }
| },
| {
| immediate: true,
| }
| );
|
| function handeClick(event: ITouchEvent) {
| if (props.onClick) {
| props.onClick(event);
| } else {
| Taro.previewImage({
| current: props.src,
| urls: props.urls.length > 0 ? props.urls : [props.src],
| });
| }
| }
| </script>
|
| <style lang="scss">
| @import '@/styles/common.scss';
|
| .preview-image-wrapper {
| width: 100%;
| height: 100%;
| overflow: hidden;
|
| .preview-image-div {
| width: 100%;
| height: 100%;
| background-size: cover;
| background-position: center;
| }
| }
| </style>
|
|
