|
@@ -1,32 +1,81 @@
|
|
|
<template>
|
|
|
- <div class="imagePreview">
|
|
|
- <van-swipe :autoplay="3000" lazy-render>
|
|
|
- <van-swipe-item v-for="image,index in urls" :key="index">
|
|
|
- <img :src="image" style="width: 100%;" />
|
|
|
- </van-swipe-item>
|
|
|
- </van-swipe>
|
|
|
- </div>
|
|
|
+ <div class="imagePreview">
|
|
|
+ <van-swipe :autoplay="3000" lazy-render>
|
|
|
+ <van-swipe-item v-for="(image, index) in urls" :key="index">
|
|
|
+ <div class="stop_save" />
|
|
|
+ <img :src="image" style="width: 100%" />
|
|
|
+ </van-swipe-item>
|
|
|
+ </van-swipe>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+import { IImagePreviewList } from "./index.type";
|
|
|
+withDefaults(defineProps<IImagePreviewList>(), {
|
|
|
+ urls: () => [
|
|
|
+ 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
|
|
|
+ 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
|
|
|
+ ]
|
|
|
+})
|
|
|
|
|
|
-import { IImagePreviewList } from './index.type';
|
|
|
-
|
|
|
-defineProps<IImagePreviewList>()
|
|
|
-
|
|
|
+//const urls = [
|
|
|
+// "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
|
|
|
+// "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
|
|
|
+//];
|
|
|
|
|
|
+document.body.addEventListener(
|
|
|
+ "touchstart",
|
|
|
+ (e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
+ { passive: false }
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.imagePreview {
|
|
|
- padding: 80px 20px;
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- height: 100vh;
|
|
|
+ padding: 80px 20px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 100vh;
|
|
|
}
|
|
|
:deep() {
|
|
|
- .van-swipe,.van-swipe-item,.van-swipe__track {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ .van-swipe,
|
|
|
+ .van-swipe-item,
|
|
|
+ .van-swipe__track {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .stop_save {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ opacity: 0;
|
|
|
+ -webkit-touch-callout: none;
|
|
|
+ }
|
|
|
+ .van-image {
|
|
|
+ pointer-events: none !important;
|
|
|
+ -webkit-user-select: none !important;
|
|
|
+ -moz-user-select: none !important;
|
|
|
+ user-select: none !important;
|
|
|
+ -webkit-touch-callout: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+img {
|
|
|
+ pointer-events: none !important;
|
|
|
+ -webkit-user-select: none !important;
|
|
|
+ -moz-user-select: none !important;
|
|
|
+ user-select: none !important;
|
|
|
+ -webkit-touch-callout: none !important;
|
|
|
+}
|
|
|
+* {
|
|
|
+ -webkit-touch-callout: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ user-select: none;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|