1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <template>
- <movable-area
- class="image-item"
- scale-area
- >
- <movable-view
- class="image-item"
- direction="all"
- :out-of-bounds="false"
- :inertia="true"
- damping="90"
- friction="2"
- scale="true"
- scale-min="1"
- scale-max="4"
- scale-value="1"
- >
- <img
- class="image-preview"
- :class="[isWidth ? 'is-width' : 'isHeight']"
- mode="widthFix"
- :style="{
- transform: `scale(${props.zoom}) rotate(${props.rotate}deg)`,
- }"
- :src="props.src"
- :date-src="props.src"
- @click.stop
- >
- </movable-view>
- </movable-area>
- </template>
- <script setup lang="ts">
- import { computed } from '../../../adapter-vue';
- import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
- const props = defineProps({
- zoom: {
- type: Number,
- default: 1,
- },
- rotate: {
- type: Number,
- default: 0,
- },
- src: {
- type: String,
- default: '',
- },
- messageItem: {
- type: Object,
- default: () => ({} as IMessageModel),
- },
- });
- const isWidth = computed(() => {
- const { width = 0, height = 0 }
- = props.messageItem?.payload?.imageInfoArray?.[0] || {};
- return width >= height;
- });
- </script>
- <style lang="scss">
- .image-item {
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- }
- .image-preview {
- max-width: 100%;
- max-height: 100%;
- transition: transform 0.1s ease 0s;
- pointer-events: auto;
- }
- .is-width {
- width: 100%;
- }
- </style>
|