-
-
+
+
-
+
{{ imgList[index].alt }}
- {{ index + 1 }} / {{ imgList.length }}
+ {{ index + 1 }} / {{ imgList.length }}
@@ -24,7 +38,7 @@ export default {
import { watch, ref } from "vue";
export interface LayPhotoProps {
- imgList: { src: string, alt: string }[];
+ imgList: { src: string; alt: string }[];
startIndex: number;
}
const emit = defineEmits(["resetCalculationPohtosArea"]);
@@ -34,18 +48,18 @@ const props = withDefaults(defineProps
(), {
const index = ref(props.startIndex);
watch(index, () => {
//当图片索引改变的时候 重新计算弹层的大小
- emit('resetCalculationPohtosArea', index.value)
-})
+ emit("resetCalculationPohtosArea", index.value);
+});
const changeIndex = (step: number) => {
- let nowIndex = index.value
- let next = nowIndex + step
+ let nowIndex = index.value;
+ let next = nowIndex + step;
if (next < 0) {
- next = props.imgList.length - 1
+ next = props.imgList.length - 1;
}
if (next >= props.imgList.length) {
- next = 0
+ next = 0;
}
- index.value = next
-}
+ index.value = next;
+};
diff --git a/package/layer/src/component/index.vue b/package/layer/src/component/index.vue
index 489146c7..5c043e1b 100644
--- a/package/layer/src/component/index.vue
+++ b/package/layer/src/component/index.vue
@@ -55,7 +55,17 @@ export interface LayModalProps {
btn?: Record[] | false;
move?: boolean | string;
resize?: boolean | string;
- type?: 0 | 1 | 2 | 3 | "dialog" | "page" | "iframe" | "loading" | "drawer" | "photos";
+ type?:
+ | 0
+ | 1
+ | 2
+ | 3
+ | "dialog"
+ | "page"
+ | "iframe"
+ | "loading"
+ | "drawer"
+ | "photos";
content?: string | Function | object | VNodeTypes;
isHtmlFragment?: boolean;
shade?: boolean | string;
diff --git a/package/layer/src/index.ts b/package/layer/src/index.ts
index 610fb00b..54ac5701 100644
--- a/package/layer/src/index.ts
+++ b/package/layer/src/index.ts
@@ -123,18 +123,18 @@ const layer = {
},
//图片预览
photos: (option: any, callback?: Function) => {
- if (typeof option === 'string') {
+ if (typeof option === "string") {
option = {
- imgList: [{ src: option }]
- }
+ imgList: [{ src: option }],
+ };
}
let defaultOption = {
- type: 'photos',
+ type: "photos",
anim: 2,
startIndex: 0,
isOutAnim: true,
shadeClose: true,
- shadeOpacity: '0.7'
+ shadeOpacity: "0.7",
};
return layer.create(option, defaultOption, callback);
},
diff --git a/package/layer/src/utils/index.ts b/package/layer/src/utils/index.ts
index f03f6503..fde74fd0 100644
--- a/package/layer/src/utils/index.ts
+++ b/package/layer/src/utils/index.ts
@@ -1,4 +1,4 @@
-import { layer } from "../index"
+import { layer } from "../index";
// 随机数
export function nextId() {
@@ -255,32 +255,32 @@ export function loadImage(url: string, callback: Function, error: any) {
};
}
-export async function calculatePhotosArea(url: string,options:object) {
+export async function calculatePhotosArea(url: string, options: object) {
let img = new Image();
img.src = url;
return new Promise((resolve, reject) => {
if (img.complete) {
- resolve(area(img))
- return
+ resolve(area(img));
+ return;
}
- const layerId=layer.load(2)
+ const layerId = layer.load(2);
img.onload = () => {
- layer.close(layerId)
- resolve(area(img))
+ layer.close(layerId);
+ resolve(area(img));
};
img.onerror = () => {
- layer.close(layerId)
- layer.msg('图片加载失败')
- reject(false)
- }
- })
+ layer.close(layerId);
+ layer.msg("图片加载失败");
+ reject(false);
+ };
+ });
- function area(img:{width:number,height:number}){
+ function area(img: { width: number; height: number }) {
var imgarea = [img.width, img.height];
var winarea = [window.innerWidth - 100, window.innerHeight - 100];
//如果 实际图片的宽或者高比 屏幕大（那么进行缩放）
- if ( imgarea[0] > winarea[0] || imgarea[1] > winarea[1]) {
+ if (imgarea[0] > winarea[0] || imgarea[1] > winarea[1]) {
let wh = [imgarea[0] / winarea[0], imgarea[1] / winarea[1]]; //取宽度缩放比例、高度缩放比例
if (wh[0] > wh[1]) {
//取缩放比例最大的进行缩放
@@ -293,5 +293,4 @@ export async function calculatePhotosArea(url: string,options:object) {
}
return [imgarea[0] + "px", imgarea[1] + "px"];
}
-
-}
\ No newline at end of file
+}
diff --git a/package/layer/vite.config.ts b/package/layer/vite.config.ts
index b66b42b5..5cde71e2 100644
--- a/package/layer/vite.config.ts
+++ b/package/layer/vite.config.ts
@@ -32,15 +32,11 @@ export default defineConfig({
},
plugins: [
babel({
- babelHelpers: 'runtime',
+ babelHelpers: "runtime",
exclude: "node_modules/**",
extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
presets: ["@babel/preset-env", "@babel/preset-typescript"],
- plugins: [
- [
- '@babel/plugin-transform-runtime',
- ],
- ]
+ plugins: [["@babel/plugin-transform-runtime"]],
}),
],
external: ["vue"],