使用场景
显示图片并处理加载中、失败和预览交互。
基础用法与状态
下列示例只使用本入口的实际公开能力。
基础用法与状态
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "demo-root-layout" };
const ui_1: any = require("@asam-ui/ui");
const preview_svg_1: any = __importDefault(require("./preview.svg"));
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamImageBasicDemo' },
__name: 'Demo',
setup(__props?: any) {
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", _hoisted_1, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamImage), {
src: (0, vue_2.unref)(preview_svg_1.default),
"preview-src-list": [(0, vue_2.unref)(preview_svg_1.default)],
fit: "contain",
class: "preview-image",
"preview-teleported": ""
}, {
placeholder: (0, vue_2.withCtx)(() => [...(_cache[0] || (_cache[0] = [
(0, vue_2.createTextVNode)("正在加载示意图", -1 /* CACHED */)
]))]),
error: (0, vue_2.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_2.createTextVNode)("图像不可用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["src", "preview-src-list"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamImage), {
src: "data:image/png;base64,invalid",
class: "preview-image"
}, {
error: (0, vue_2.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_2.createTextVNode)("本例展示图片失败后备内容", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]));
};
}
});
exports.default.__scopeId = "data-v-8d3571ce";
},
"preview.svg": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMjAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMzIwIDE4MCI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNlY2YxZmMiLz48cmVjdCB4PSI0MCIgeT0iNDAiIHdpZHRoPSIyNDAiIGhlaWdodD0iMTAwIiByeD0iMTAiIGZpbGw9IiMwOTU4ZDkiLz48dGV4dCB4PSIxNjAiIHk9Ijk4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiPkFTQU08L3RleHQ+PC9zdmc+Cg==";
},
};
const __dependencies: any = {"Demo.vue":{"./preview.svg":"preview.svg"},"preview.svg":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.preview-image[data-v-8d3571ce] {
width: 200px;
height: 120px;
}
.demo-root-layout[data-v-8d3571ce] {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout[data-v-8d3571ce] > :is(p, pre, output) {
margin-block: 0;
}
</style><template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "demo-root-layout" };
const ui_1 = require("@asam-ui/ui");
const preview_svg_1 = __importDefault(require("./preview.svg"));
exports.default = Object.assign({ name: 'AsamImageBasicDemo' }, {
__name: 'Demo',
setup(__props) {
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_1, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamImage), {
src: (0, vue_1.unref)(preview_svg_1.default),
"preview-src-list": [(0, vue_1.unref)(preview_svg_1.default)],
fit: "contain",
class: "preview-image",
"preview-teleported": ""
}, {
placeholder: (0, vue_1.withCtx)(() => [...(_cache[0] || (_cache[0] = [
(0, vue_1.createTextVNode)("正在加载示意图", -1 /* CACHED */)
]))]),
error: (0, vue_1.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_1.createTextVNode)("图像不可用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["src", "preview-src-list"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamImage), {
src: "data:image/png;base64,invalid",
class: "preview-image"
}, {
error: (0, vue_1.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_1.createTextVNode)("本例展示图片失败后备内容", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]));
};
}
});
exports.default.__scopeId = "data-v-d4c816b0";
},
"preview.svg": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMjAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMzIwIDE4MCI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNlY2YxZmMiLz48cmVjdCB4PSI0MCIgeT0iNDAiIHdpZHRoPSIyNDAiIGhlaWdodD0iMTAwIiByeD0iMTAiIGZpbGw9IiMwOTU4ZDkiLz48dGV4dCB4PSIxNjAiIHk9Ijk4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiPkFTQU08L3RleHQ+PC9zdmc+Cg==";
},
};
const __dependencies = {"Demo.vue":{"./preview.svg":"preview.svg"},"preview.svg":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.preview-image[data-v-d4c816b0] {
width: 200px;
height: 120px;
}
.demo-root-layout[data-v-d4c816b0] {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout[data-v-d4c816b0] > :is(p, pre, output) {
margin-block: 0;
}
</style>使用约定
src、fit、lazy、scrollContainer、loading、previewSrcList、initialIndex、previewTeleported 和 viewer 配置以公开 Props 为准。 完整说明。
AsamImage 使用内置图片预览；需要独立控制预览实例时使用 AsamImageViewer。原生 img 属性、所有事件参数及插槽作用域原样保留；缩放和预览关闭遵循原生行为，不额外修补算法。
完整使用场景
基础用法
可通过fit确定图片如何适应到容器框，同原生 object-fit。
基础用法
<template>
<div class="demo-image">
<div v-for="fit in fits" :key="fit" class="block">
<span class="demonstration">{{ fit }}</span>
<AsamImage style="width: 100px; height: 100px" :src="url" :fit="fit" />
</div>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamImageCapBasicUsageDemo' });
import { AsamImage } from '@asam-ui/ui';
import type { AsamImageProps } from '@asam-ui/ui';
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down'] as AsamImageProps['fit'][];
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
</script>
<style scoped>
.demo-image .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
display: inline-block;
width: 20%;
min-width: 100px;
box-sizing: border-box;
vertical-align: top;
}
.demo-image .block:last-child {
border-right: none;
}
.demo-image .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style><template>
<div class="demo-image">
<div v-for="fit in fits" :key="fit" class="block">
<span class="demonstration">{{ fit }}</span>
<AsamImage style="width: 100px; height: 100px" :src="url" :fit="fit" />
</div>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamImageCapBasicUsageDemo' });
import { AsamImage } from '@asam-ui/ui';
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down'];
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
</script>
<style scoped>
.demo-image .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
display: inline-block;
width: 20%;
min-width: 100px;
box-sizing: border-box;
vertical-align: top;
}
.demo-image .block:last-child {
border-right: none;
}
.demo-image .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>
占位内容
可通过slot = placeholder可自定义占位内容
占位内容
<template>
<div class="demo-image__placeholder">
<div class="block">
<span class="demonstration">默认</span>
<AsamImage :src="src" />
</div>
<div class="block">
<span class="demonstration">自定义</span>
<AsamImage :src="src">
<template #placeholder>
<div class="image-slot">加载中<span class="dot">...</span></div>
</template>
</AsamImage>
</div>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamImageCapPlaceholderDemo' });
import { AsamImage } from '@asam-ui/ui';
const src =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */
.demo-image__placeholder .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
display: inline-block;
width: 49%;
box-sizing: border-box;
vertical-align: top;
}
.demo-image__placeholder .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
.demo-image__placeholder .el-image {
padding: 0 5px;
max-width: 300px;
max-height: 200px;
}
.demo-image__placeholder.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: var(--el-fill-color-light);
color: var(--el-text-color-secondary);
font-size: 14px;
}
.demo-image__placeholder .dot {
animation: dot 2s infinite steps(3, start);
overflow: hidden;
}
/* stylelint-enable selector-class-pattern */
</style><template>
<div class="demo-image__placeholder">
<div class="block">
<span class="demonstration">默认</span>
<AsamImage :src="src" />
</div>
<div class="block">
<span class="demonstration">自定义</span>
<AsamImage :src="src">
<template #placeholder>
<div class="image-slot">加载中<span class="dot">...</span></div>
</template>
</AsamImage>
</div>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamImageCapPlaceholderDemo' });
import { AsamImage } from '@asam-ui/ui';
const src =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */
.demo-image__placeholder .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
display: inline-block;
width: 49%;
box-sizing: border-box;
vertical-align: top;
}
.demo-image__placeholder .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
.demo-image__placeholder .el-image {
padding: 0 5px;
max-width: 300px;
max-height: 200px;
}
.demo-image__placeholder.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: var(--el-fill-color-light);
color: var(--el-text-color-secondary);
font-size: 14px;
}
.demo-image__placeholder .dot {
animation: dot 2s infinite steps(3, start);
overflow: hidden;
}
/* stylelint-enable selector-class-pattern */
</style>
加载失败
通过 slot = error 和 slot = viewer-error自定义图像加载错误时的内容。
加载失败
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-image__error ui032-flex ui032-gap-2">
<AsamImage />
<AsamImage>
<template #error>
<div class="image-viewer-slot image-slot">
<AsamIcon><icon-picture /></AsamIcon>
</div>
</template>
</AsamImage>
<AsamImage :src="url" :preview-src-list="srcList" show-progress>
<template #viewer-error="{ activeIndex, src }">
<div class="image-slot viewer-error">
<AsamIcon><icon-picture /></AsamIcon>
<span>
viewer-error 插槽，当前索引： {{ activeIndex }}，来源：
{{ src }}
</span>
</div>
</template>
</AsamImage>
<AsamButton type="default" @click="showPreview = true"> 受控预览 </AsamButton>
<AsamImageViewer
v-if="showPreview"
show-progress
:url-list="srcList"
@close="showPreview = false"
>
<template #viewer-error="{ activeIndex, src }">
<div class="image-slot viewer-error">
<AsamIcon><icon-picture /></AsamIcon>
<span>
viewer-error 插槽，当前索引： {{ activeIndex }}，来源：
{{ src }}
</span>
</div>
</template>
</AsamImageViewer>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamImageCapLoadFailedDemo' });
import { AsamImage, AsamIcon, AsamButton, AsamImageViewer } from '@asam-ui/ui';
import { ref } from 'vue';
import { Picture as IconPicture } from '@asam-ui/icons-vue';
const showPreview = ref(false);
const srcList = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/png;base64,AA=='
];
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */
.demo-image__error .el-image {
max-width: 300px;
max-height: 200px;
width: 100%;
}
.demo-image__error .image-slot {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 30px;
height: 200px;
background: #fff;
}
.demo-image__error .image-slot .el-icon {
font-size: 30px;
}
.image-viewer-slot {
background: var(--el-fill-color-light);
}
.viewer-error {
color: #000;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
.ui032-flex {
display: flex;
}
.ui032-gap-2 {
gap: var(--asam-space-sm);
}
</style><!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-image__error ui032-flex ui032-gap-2">
<AsamImage />
<AsamImage>
<template #error>
<div class="image-viewer-slot image-slot">
<AsamIcon><icon-picture /></AsamIcon>
</div>
</template>
</AsamImage>
<AsamImage :src="url" :preview-src-list="srcList" show-progress>
<template #viewer-error="{ activeIndex, src }">
<div class="image-slot viewer-error">
<AsamIcon><icon-picture /></AsamIcon>
<span>
viewer-error 插槽，当前索引： {{ activeIndex }}，来源：
{{ src }}
</span>
</div>
</template>
</AsamImage>
<AsamButton type="default" @click="showPreview = true"> 受控预览 </AsamButton>
<AsamImageViewer
v-if="showPreview"
show-progress
:url-list="srcList"
@close="showPreview = false"
>
<template #viewer-error="{ activeIndex, src }">
<div class="image-slot viewer-error">
<AsamIcon><icon-picture /></AsamIcon>
<span>
viewer-error 插槽，当前索引： {{ activeIndex }}，来源：
{{ src }}
</span>
</div>
</template>
</AsamImageViewer>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamImageCapLoadFailedDemo' });
import { AsamImage, AsamIcon, AsamButton, AsamImageViewer } from '@asam-ui/ui';
import { ref } from 'vue';
import { Picture as IconPicture } from '@asam-ui/icons-vue';
const showPreview = ref(false);
const srcList = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/png;base64,AA=='
];
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */
.demo-image__error .el-image {
max-width: 300px;
max-height: 200px;
width: 100%;
}
.demo-image__error .image-slot {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 30px;
height: 200px;
background: #fff;
}
.demo-image__error .image-slot .el-icon {
font-size: 30px;
}
.image-viewer-slot {
background: var(--el-fill-color-light);
}
.viewer-error {
color: #000;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
.ui032-flex {
display: flex;
}
.ui032-gap-2 {
gap: var(--asam-space-sm);
}
</style>
懒加载
浏览器原生支持的 loading属性在 2.2.3版本加入。 您可以使用 loading="lazy" 替换之前的lazy= true。
如果当前浏览器支持原生图片延迟加载，则先使用原生能力，否则将使用滚动监听实现相同效果。
可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载。可通过 scroll-container 来设置滚动容器，若未定义，则为最近一个 overflow 值为 auto 或 scroll 的父元素。
懒加载
<template>
<div class="demo-image__lazy">
<AsamImage v-for="url in urls" :key="url" :src="url" lazy />
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamImageCapLazyLoadDemo' });
import { AsamImage } from '@asam-ui/ui';
const urls = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'
];
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */
.demo-image__lazy {
height: 400px;
overflow-y: auto;
}
.demo-image__lazy .el-image {
display: block;
min-height: 200px;
margin-bottom: 10px;
}
.demo-image__lazy .el-image:last-child {
margin-bottom: 0;
}
/* stylelint-enable selector-class-pattern */
</style><template>
<div class="demo-image__lazy">
<AsamImage v-for="url in urls" :key="url" :src="url" lazy />
</div>
</template>
<script setup>
defineOptions({ name: 'AsamImageCapLazyLoadDemo' });
import { AsamImage } from '@asam-ui/ui';
const urls = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'
];
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */
.demo-image__lazy {
height: 400px;
overflow-y: auto;
}
.demo-image__lazy .el-image {
display: block;
min-height: 200px;
margin-bottom: 10px;
}
.demo-image__lazy .el-image:last-child {
margin-bottom: 0;
}
/* stylelint-enable selector-class-pattern */
</style>
图片预览
可通过 previewSrcList 开启预览大图的功能。你可以通过 initial-index 初始化第一张预览图片的位置。默认初始位置为 0。
图片预览
<template>
<div class="demo-image__preview">
<AsamImage
style="width: 100px; height: 100px"
:src="url"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="srcList"
show-progress
:initial-index="4"
fit="cover"
/>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamImageCapImagePreviewDemo' });
import { AsamImage } from '@asam-ui/ui';
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
const srcList = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'
];
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */
.demo-image__error .image-slot {
font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
font-size: 30px;
}
.demo-image__error .el-image {
width: 100%;
height: 200px;
}
/* stylelint-enable selector-class-pattern */
</style><template>
<div class="demo-image__preview">
<AsamImage
style="width: 100px; height: 100px"
:src="url"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="srcList"
show-progress
:initial-index="4"
fit="cover"
/>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamImageCapImagePreviewDemo' });
import { AsamImage } from '@asam-ui/ui';
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
const srcList = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'
];
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */
.demo-image__error .image-slot {
font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
font-size: 30px;
}
.demo-image__error .el-image {
width: 100%;
height: 200px;
}
/* stylelint-enable selector-class-pattern */
</style>
手动打开预览 2.9.4
下列完整示例包含状态与交互，源码提供 TS 和 JS 两种版本。
手动打开预览 2.9.4
<template>
<div class="flex gap-12">
<div class="grid gap-3">
<AsamButton type="default" @click="handleClick">
通过 showPreview 方法打开预览
</AsamButton>
<AsamImage
ref="imageRef"
style="width: 100px; height: 100px"
:src="url"
show-progress
:preview-src-list="srcList"
fit="cover"
/>
</div>
<div>
<AsamButton type="default" @click="showPreview = true"> 受控预览 </AsamButton>
<AsamImageViewer
v-if="showPreview"
:url-list="srcList"
show-progress
:initial-index="4"
@close="showPreview = false"
/>
</div>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamImageCapManuallyPreviewDemo' });
import { AsamButton, AsamImage, AsamImageViewer } from '@asam-ui/ui';
import { ref } from 'vue';
import type { AsamImageInstance } from '@asam-ui/ui';
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
const srcList = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'
];
const imageRef = ref<AsamImageInstance>();
const showPreview = ref(false);
const handleClick = () => {
imageRef.value!.showPreview();
};
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-12 {
gap: 3rem;
}
.grid {
display: grid;
}
.gap-3 {
gap: 0.75rem;
}
</style><template>
<div class="flex gap-12">
<div class="grid gap-3">
<AsamButton type="default" @click="handleClick">
通过 showPreview 方法打开预览
</AsamButton>
<AsamImage
ref="imageRef"
style="width: 100px; height: 100px"
:src="url"
show-progress
:preview-src-list="srcList"
fit="cover"
/>
</div>
<div>
<AsamButton type="default" @click="showPreview = true"> 受控预览 </AsamButton>
<AsamImageViewer
v-if="showPreview"
:url-list="srcList"
show-progress
:initial-index="4"
@close="showPreview = false"
/>
</div>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamImageCapManuallyPreviewDemo' });
import { AsamButton, AsamImage, AsamImageViewer } from '@asam-ui/ui';
import { ref } from 'vue';
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
const srcList = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'
];
const imageRef = ref();
const showPreview = ref(false);
const handleClick = () => {
imageRef.value.showPreview();
};
</script>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.flex {
display: flex;
}
.gap-12 {
gap: 3rem;
}
.grid {
display: grid;
}
.gap-3 {
gap: 0.75rem;
}
</style>
自定义工具栏2.9.4
可通过 toolbar 插槽自定义工具栏内容，自版本 2.9.7 起，插槽中添加了 setActiveItem 方法，用于根据索引切换图片。
自定义工具栏2.9.4
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-image__custom-toolbar">
<AsamImage
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList"
fit="cover"
show-progress
>
<template #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }">
<AsamIcon v-bind="domClickAttrs(() => prev())"><Back /></AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => next())"><Right /></AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => setActiveItem(srcList.length - 1))">
<DArrowRight />
</AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => actions('zoomOut'))"><ZoomOut /></AsamIcon>
<AsamIcon
v-bind="
domClickAttrs(() =>
actions('zoomIn', { enableTransition: false, zoomRate: 2 })
)
"
>
<ZoomIn />
</AsamIcon>
<AsamIcon
v-bind="
domClickAttrs(() =>
actions('clockwise', { rotateDeg: 180, enableTransition: false })
)
"
>
<RefreshRight />
</AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => actions('anticlockwise'))">
<RefreshLeft />
</AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => reset())"><Refresh /></AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => download(activeIndex))">
<Download />
</AsamIcon>
</template>
</AsamImage>
</div>
</template>
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue';
defineOptions({ name: 'AsamImageCapCustomToolbarDemo' });
import { AsamImage } from '@asam-ui/ui';
import { AsamIcon } from '@asam-ui/ui';
import {
Back,
DArrowRight,
Download,
Refresh,
RefreshLeft,
RefreshRight,
Right,
ZoomIn,
ZoomOut
} from '@asam-ui/icons-vue';
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
const srcList = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'
];
const download = (index: number) => {
const url = srcList[index];
fetch(url)
.then((response) => response.blob())
.then((blob) => {
const extensions: Record<string, string> = {
'image/svg+xml': 'svg',
'image/png': 'png',
'image/jpeg': 'jpg',
'image/webp': 'webp'
};
const extension = extensions[blob.type.split(';')[0]] ?? 'bin';
const filename = `asam-image-${Date.now()}.${extension}`;
const blobUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = blobUrl;
link.download = filename;
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(blobUrl);
link.remove();
});
};
const domClickAttrs = (
onClick: NonNullable<HTMLAttributes['onClick']>
): Pick<HTMLAttributes, 'class' | 'onClick'> => ({ class: 'ui032-icon-action', onClick });
</script><!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-image__custom-toolbar">
<AsamImage
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList"
fit="cover"
show-progress
>
<template #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }">
<AsamIcon v-bind="domClickAttrs(() => prev())"><Back /></AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => next())"><Right /></AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => setActiveItem(srcList.length - 1))">
<DArrowRight />
</AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => actions('zoomOut'))"><ZoomOut /></AsamIcon>
<AsamIcon
v-bind="
domClickAttrs(() =>
actions('zoomIn', { enableTransition: false, zoomRate: 2 })
)
"
>
<ZoomIn />
</AsamIcon>
<AsamIcon
v-bind="
domClickAttrs(() =>
actions('clockwise', { rotateDeg: 180, enableTransition: false })
)
"
>
<RefreshRight />
</AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => actions('anticlockwise'))">
<RefreshLeft />
</AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => reset())"><Refresh /></AsamIcon>
<AsamIcon v-bind="domClickAttrs(() => download(activeIndex))">
<Download />
</AsamIcon>
</template>
</AsamImage>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamImageCapCustomToolbarDemo' });
import { AsamImage } from '@asam-ui/ui';
import { AsamIcon } from '@asam-ui/ui';
import {
Back,
DArrowRight,
Download,
Refresh,
RefreshLeft,
RefreshRight,
Right,
ZoomIn,
ZoomOut
} from '@asam-ui/icons-vue';
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
const srcList = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'
];
const download = (index) => {
const url = srcList[index];
fetch(url)
.then((response) => response.blob())
.then((blob) => {
const extensions = {
'image/svg+xml': 'svg',
'image/png': 'png',
'image/jpeg': 'jpg',
'image/webp': 'webp'
};
const extension = extensions[blob.type.split(';')[0]] ?? 'bin';
const filename = `asam-image-${Date.now()}.${extension}`;
const blobUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = blobUrl;
link.download = filename;
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(blobUrl);
link.remove();
});
};
const domClickAttrs = (onClick) => ({ class: 'ui032-icon-action', onClick });
</script>
自定义进度条 2.9.4
可通过 show-progress 控制是否在预览图片时显示进度条。自版本 2.9.8 起，进度条会在使用 progress 插槽时显示。
自定义进度条 2.9.4
<template>
<div class="demo-image__custom-toolbar">
<AsamImage
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList"
fit="cover"
>
<template #progress="{ activeIndex, total }">
<span>{{ activeIndex + 1 + '-' + total }}</span>
</template>
</AsamImage>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamImageCapCustomProgressDemo' });
import { AsamImage } from '@asam-ui/ui';
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
const srcList = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'
];
</script><template>
<div class="demo-image__custom-toolbar">
<AsamImage
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList"
fit="cover"
>
<template #progress="{ activeIndex, total }">
<span>{{ activeIndex + 1 + '-' + total }}</span>
</template>
</AsamImage>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamImageCapCustomProgressDemo' });
import { AsamImage } from '@asam-ui/ui';
const url =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';
const srcList = [
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'
];
</script>API
属性 AsamImageProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
hideOnClickModal | 是否可以通过点击遮罩层关闭预览 | boolean | undefined | false |
src | 图片源地址，同原生属性一致 | string | undefined | "" |
fit | 图片如何适应容器，与原生 object-fit 一致。 | enum"" | "fill" | "contain" | "cover" | "none" | "scale-down"完整类型：AsamImageFitType | undefined | "" |
loading | 浏览器的图片加载方式，对应原生 img loading 属性。 | enum"lazy" | "eager"完整类型："lazy" | "eager" | undefined | — |
lazy | 是否使用懒加载 | boolean | undefined | false |
scrollContainer | 懒加载时监听滚动的容器。 | string | HTMLElement | undefined | — |
previewSrcList | 开启图片预览功能 | string[] | undefined | 工厂函数（每个实例创建） |
previewTeleported | image-viewer 是否插入至 body 元素上。嵌套的父元素属性会发生修改时应该将此属性设置为 true | boolean | undefined | false |
zIndex | 预览时遮罩层的 z-index | number | undefined | — |
initialIndex | 初始预览图像索引，小于 url-list 的长度 | number | undefined | 0 |
infinite | 是否可以无限循环预览 | boolean | undefined | true |
closeOnPressEscape | 是否可以通过按下 ESC 关闭 Image Viewer | boolean | undefined | true |
zoomRate | 图像查看器缩放事件的缩放速率。 | number | undefined | 1.2 |
scale | 预览图片缩放比例。 | number | undefined | 1 |
minScale | 图像查看器缩放事件的最小缩放比例 | number | undefined | 0.2 |
maxScale | 图像查看器缩放事件的最大缩放比例 | number | undefined | 7 |
showProgress | 显示预览进度内容。 | boolean | undefined | false |
crossorigin | 设置原生 HTML crossorigin 属性。 | enum"" | "anonymous" | "use-credentials"完整类型：AsamImageCrossorigin | undefined | — |
onLoad | — | ((evt: Event) => any) | undefined | — |
onShow | — | (() => any) | undefined | — |
onClose | — | (() => any) | undefined | — |
onError | — | ((evt: Event) => any) | undefined | — |
onSwitch | — | ((val: number) => any) | undefined | — |
key | — | PropertyKey | undefined | — |
ref | — | VNodeRef | undefined | — |
ref_for | — | boolean | undefined | — |
ref_key | — | string | undefined | — |
onVnodeBeforeMount | — | (AsamImageProps)["onVnodeBeforeMount"] | — |
onVnodeMounted | — | (AsamImageProps)["onVnodeMounted"] | — |
onVnodeBeforeUpdate | — | (AsamImageProps)["onVnodeBeforeUpdate"] | — |
onVnodeUpdated | — | (AsamImageProps)["onVnodeUpdated"] | — |
onVnodeBeforeUnmount | — | (AsamImageProps)["onVnodeBeforeUnmount"] | — |
onVnodeUnmounted | — | (AsamImageProps)["onVnodeUnmounted"] | — |
class | — | unknown | — |
style | — | unknown | — |
alt | 图片的替代文字。 | string | undefined | — |
referrerpolicy | 原生引用来源策略，使用小写属性名透传。 | string | undefined | — |
实例方法与状态 AsamImageExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamImageExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | 查看完整类型{ readonly hideOnClickModal?: boolean | undefined; readonly src?: string | undefined; readonly fit?: AsamImageFitType | undefined; readonly loading?: "eager" | "lazy" | undefined; readonly lazy?: boolean | undefined; readonly scrollContainer?: (string | HTMLElement) | undefined; readonly previewSrcList?: string[] | undefined; readonly previewTeleported?: boolean | undefined; readonly zIndex?: number | undefined; readonly initialIndex?: number | undefined; readonly infinite?: boolean | undefined; readonly closeOnPressEscape?: boolean | undefined; readonly zoomRate?: number | undefined; readonly scale?: number | undefined; readonly minScale?: number | undefined; readonly maxScale?: number | undefined; readonly showProgress?: boolean | undefined; readonly crossorigin?: AsamImageCrossorigin | undefined; readonly onLoad?: ((evt: Event) => any) | undefined | undefined; readonly onShow?: (() => any) | undefined | undefined; readonly onClose?: (() => any) | undefined | undefined; readonly onError?: ((evt: Event) => any) | undefined | undefined; readonly onSwitch?: ((val: number) => any) | undefined | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & AsamImageNativeAttributes | — |
$attrs | — | AsamImageExpose["$attrs"] | — |
$refs | — | AsamImageExpose["$refs"] | — |
$slots | — | AsamImageSlots | — |
$root | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$parent | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$host | — | Element | null | — |
$emit | — | 查看完整类型((event: "load", evt: Event) => void) & ((event: "error", evt: Event) => void) & ((event: "show") => void) & ((event: "close") => void) & ((event: "switch", val: number) => void) | — |
$el | — | any | — |
$options | — | (AsamImageExpose)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamImageExpose)["$nextTick"] | — |
$watch | — | (AsamImageExpose)["$watch"] | — |
infinite | — | boolean | — |
scale | — | number | — |
src | — | string | — |
fit | — | enum"" | "fill" | "contain" | "cover" | "none" | "scale-down"完整类型：AsamImageFitType | — |
initialIndex | — | number | — |
closeOnPressEscape | — | boolean | — |
previewSrcList | — | string[] | — |
zoomRate | — | number | — |
minScale | — | number | — |
maxScale | — | number | — |
zIndex | 预览时遮罩层的 z-index | number | undefined | — |
lazy | 是否使用懒加载 | boolean | undefined | — |
onError | — | ((evt: Event) => any) | undefined | — |
hideOnClickModal | 是否可以通过点击遮罩层关闭预览 | boolean | undefined | — |
loading | 浏览器的图片加载方式，对应原生 img loading 属性。 | enum"lazy" | "eager"完整类型："lazy" | "eager" | undefined | — |
scrollContainer | 懒加载时监听滚动的容器。 | string | HTMLElement | undefined | — |
previewTeleported | image-viewer 是否插入至 body 元素上。嵌套的父元素属性会发生修改时应该将此属性设置为 true | boolean | undefined | — |
showProgress | 显示预览进度内容。 | boolean | undefined | — |
crossorigin | 设置原生 HTML crossorigin 属性。 | enum"" | "anonymous" | "use-credentials"完整类型：AsamImageCrossorigin | undefined | — |
onLoad | — | ((evt: Event) => any) | undefined | — |
onShow | — | (() => any) | undefined | — |
onClose | — | (() => any) | undefined | — |
onSwitch | — | ((val: number) => any) | undefined | — |
showPreview | 手动打开预览。 | () => void | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamImageExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamImageExpose["$router"] | — |
类型 AsamImageInstance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamImageExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | 查看完整类型{ readonly hideOnClickModal?: boolean | undefined; readonly src?: string | undefined; readonly fit?: AsamImageFitType | undefined; readonly loading?: "eager" | "lazy" | undefined; readonly lazy?: boolean | undefined; readonly scrollContainer?: (string | HTMLElement) | undefined; readonly previewSrcList?: string[] | undefined; readonly previewTeleported?: boolean | undefined; readonly zIndex?: number | undefined; readonly initialIndex?: number | undefined; readonly infinite?: boolean | undefined; readonly closeOnPressEscape?: boolean | undefined; readonly zoomRate?: number | undefined; readonly scale?: number | undefined; readonly minScale?: number | undefined; readonly maxScale?: number | undefined; readonly showProgress?: boolean | undefined; readonly crossorigin?: AsamImageCrossorigin | undefined; readonly onLoad?: ((evt: Event) => any) | undefined | undefined; readonly onShow?: (() => any) | undefined | undefined; readonly onClose?: (() => any) | undefined | undefined; readonly onError?: ((evt: Event) => any) | undefined | undefined; readonly onSwitch?: ((val: number) => any) | undefined | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & AsamImageNativeAttributes | — |
$attrs | — | AsamImageExpose["$attrs"] | — |
$refs | — | AsamImageExpose["$refs"] | — |
$slots | — | AsamImageSlots | — |
$root | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$parent | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$host | — | Element | null | — |
$emit | — | 查看完整类型((event: "load", evt: Event) => void) & ((event: "error", evt: Event) => void) & ((event: "show") => void) & ((event: "close") => void) & ((event: "switch", val: number) => void) | — |
$el | — | any | — |
$options | — | (AsamImageInstance)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamImageInstance)["$nextTick"] | — |
$watch | — | (AsamImageInstance)["$watch"] | — |
infinite | — | boolean | — |
scale | — | number | — |
src | — | string | — |
fit | — | enum"" | "fill" | "contain" | "cover" | "none" | "scale-down"完整类型：AsamImageFitType | — |
initialIndex | — | number | — |
closeOnPressEscape | — | boolean | — |
previewSrcList | — | string[] | — |
zoomRate | — | number | — |
minScale | — | number | — |
maxScale | — | number | — |
zIndex | 预览时遮罩层的 z-index | number | undefined | — |
lazy | 是否使用懒加载 | boolean | undefined | — |
onError | — | ((evt: Event) => any) | undefined | — |
hideOnClickModal | 是否可以通过点击遮罩层关闭预览 | boolean | undefined | — |
loading | 浏览器的图片加载方式，对应原生 img loading 属性。 | enum"lazy" | "eager"完整类型："lazy" | "eager" | undefined | — |
scrollContainer | 懒加载时监听滚动的容器。 | string | HTMLElement | undefined | — |
previewTeleported | image-viewer 是否插入至 body 元素上。嵌套的父元素属性会发生修改时应该将此属性设置为 true | boolean | undefined | — |
showProgress | 显示预览进度内容。 | boolean | undefined | — |
crossorigin | 设置原生 HTML crossorigin 属性。 | enum"" | "anonymous" | "use-credentials"完整类型：AsamImageCrossorigin | undefined | — |
onLoad | — | ((evt: Event) => any) | undefined | — |
onShow | — | (() => any) | undefined | — |
onClose | — | (() => any) | undefined | — |
onSwitch | — | ((val: number) => any) | undefined | — |
showPreview | 手动打开预览。 | () => void | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamImageExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamImageExpose["$router"] | — |
插槽 AsamImageSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
error | — | (AsamImageSlots)["error"] | — |
placeholder | — | (AsamImageSlots)["placeholder"] | — |
viewer | — | (AsamImageSlots)["viewer"] | — |
progress | — | (AsamImageSlots)["progress"] | — |
toolbar | — | (AsamImageSlots)["toolbar"] | — |
viewer-error | — | (AsamImageSlots)["viewer-error"] | — |
类型 AsamImageCrossorigin
事件 AsamImageEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
load | — | (evt: Event) => boolean | — |
error | — | (evt: Event) => boolean | — |
switch | — | (val: number) => boolean | — |
close | — | () => boolean | — |
show | — | () => boolean | — |
类型 AsamImageFitType
类型 AsamImagePropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
zIndex | — | number | undefined | — |
fit | — | enum"" | "fill" | "contain" | "cover" | "none" | "scale-down"完整类型：(AsamImagePropsPublic)["fit"] | — |
lazy | — | boolean | undefined | — |
src | — | string | undefined | — |
initialIndex | — | number | undefined | — |
hideOnClickModal | — | boolean | undefined | — |
loading | — | enum"lazy" | "eager"完整类型：(AsamImagePropsPublic)["loading"] | — |
scrollContainer | — | (AsamImagePropsPublic)["scrollContainer"] | — |
previewSrcList | — | string[] | undefined | — |
previewTeleported | — | boolean | undefined | — |
infinite | — | (AsamImagePropsPublic)["infinite"] | — |
closeOnPressEscape | — | (AsamImagePropsPublic)["closeOnPressEscape"] | — |
zoomRate | — | number | undefined | — |
scale | — | number | undefined | — |
minScale | — | number | undefined | — |
maxScale | — | number | undefined | — |
showProgress | — | boolean | undefined | — |
crossorigin | — | enum"" | "anonymous" | "use-credentials"完整类型：(AsamImagePropsPublic)["crossorigin"] | — |
alt | 图片的替代文字。 | string | undefined | — |
referrerpolicy | 原生引用来源策略，使用小写属性名透传。 | string | undefined | — |
用法与契约补充说明
使用约定
src、fit、lazy、scrollContainer、loading、previewSrcList、initialIndex、previewTeleported 和 viewer 配置以公开 Props 为准。placeholder/error 插槽显示不同状态，load/error 事件提供真实加载结果。图片本身没有控件密度 size；使用布局样式决定展示范围。
关联组件
参数与事件补充说明
公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。
参数与事件说明
hideOnClickModal
必填：否；声明来源：上游声明。
hideOnClickModal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
src
必填：否；声明来源：上游声明。
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
fit
必填：否；声明来源：上游声明。
fit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "fill" / "contain" / "cover" / "none" / "scale-down"
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
loading
必填：否；声明来源：上游声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："lazy" / "eager"
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
lazy
必填：否；声明来源：上游声明。
lazy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
scrollContainer
必填：否；声明来源：上游声明。
scrollContainer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
previewSrcList
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：[]（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => mutable([] as const)（2.14.7；源码事实，未作为 ASAM 运行实测）
previewTeleported
必填：否；声明来源：上游声明。
previewTeleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
zIndex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
initialIndex
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
infinite
必填：否；声明来源：上游声明。
infinite 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
closeOnPressEscape
必填：否；声明来源：上游声明。
closeOnPressEscape 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
zoomRate
必填：否；声明来源：上游声明。
默认值与来源
1.2（已安装运行时；已安装组件）固定上游文档默认：1.2（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：1.2（2.14.7；源码事实，未作为 ASAM 运行实测）
scale
必填：否；声明来源：上游声明。
默认值与来源
1（已安装运行时；已安装组件）固定上游文档默认：1（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：1（2.14.7；源码事实，未作为 ASAM 运行实测）
minScale
必填：否；声明来源：上游声明。
默认值与来源
0.2（已安装运行时；已安装组件）固定上游文档默认：0.2（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0.2（2.14.7；源码事实，未作为 ASAM 运行实测）
maxScale
必填：否；声明来源：上游声明。
默认值与来源
7（已安装运行时；已安装组件）固定上游文档默认：7（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：7（2.14.7；源码事实，未作为 ASAM 运行实测）
showProgress
必填：否；声明来源：上游声明。
showProgress 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
crossorigin
必填：否；声明来源：上游声明。
crossorigin 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "anonymous" / "use-credentials"
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onLoad
必填：否；声明来源：上游声明。
onLoad 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): any
onShow
必填：否；声明来源：上游声明。
onShow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): any
onClose
必填：否；声明来源：上游声明。
onClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): any
onError
必填：否；声明来源：上游声明。
onError 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): any
onSwitch
必填：否；声明来源：上游声明。
onSwitch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(val: number): any
key
必填：否；声明来源：依赖声明。
ref
必填：否；声明来源：依赖声明。
ref 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void
ref.value:any— 依赖声明ref.__@RefSymbol@8854:true— 依赖声明仅用于区分类型：保留在公开声明中，通过私有 Symbol 避免出现在编辑器自动补全中。
枚举：
true
ref_for
必填：否；声明来源：依赖声明。
ref_for 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
ref_key
必填：否；声明来源：依赖声明。
onVnodeBeforeMount
必填：否；声明来源：依赖声明。
onVnodeBeforeMount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeMounted
必填：否；声明来源：依赖声明。
onVnodeMounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUpdate
必填：否；声明来源：依赖声明。
onVnodeBeforeUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUpdated
必填：否；声明来源：依赖声明。
onVnodeUpdated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUnmount
必填：否；声明来源：依赖声明。
onVnodeBeforeUnmount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUnmounted
必填：否；声明来源：依赖声明。
onVnodeUnmounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
class
必填：否；声明来源：依赖声明。
style
必填：否；声明来源：依赖声明。
alt
必填：否；声明来源：ASAM 声明。
referrerpolicy
必填：否；声明来源：ASAM 声明。
AsamImageProps 公开类型视图
import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamImageProps, AsamImageFitType, AsamImageCrossorigin, AsamImageExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamImageProps
type PublicContract = {
readonly "hideOnClickModal"?: boolean | undefined;
readonly "src"?: string | undefined;
readonly "fit"?: AsamImageFitType | undefined;
readonly "loading"?: "lazy" | "eager" | undefined;
readonly "lazy"?: boolean | undefined;
readonly "scrollContainer"?: string | HTMLElement | undefined;
readonly "previewSrcList"?: string[] | undefined;
readonly "previewTeleported"?: boolean | undefined;
readonly "zIndex"?: number | undefined;
readonly "initialIndex"?: number | undefined;
readonly "infinite"?: boolean | undefined;
readonly "closeOnPressEscape"?: boolean | undefined;
readonly "zoomRate"?: number | undefined;
readonly "scale"?: number | undefined;
readonly "minScale"?: number | undefined;
readonly "maxScale"?: number | undefined;
readonly "showProgress"?: boolean | undefined;
readonly "crossorigin"?: AsamImageCrossorigin | undefined;
readonly "onLoad"?: ((evt: Event) => any) | undefined;
readonly "onShow"?: (() => any) | undefined;
readonly "onClose"?: (() => any) | undefined;
readonly "onError"?: ((evt: Event) => any) | undefined;
readonly "onSwitch"?: ((val: number) => any) | undefined;
"key"?: PropertyKey | undefined;
"ref"?: VNodeRef | undefined;
"ref_for"?: boolean | undefined;
"ref_key"?: string | undefined;
"onVnodeBeforeMount"?: (AsamImageProps)["onVnodeBeforeMount"];
"onVnodeMounted"?: (AsamImageProps)["onVnodeMounted"];
"onVnodeBeforeUpdate"?: (AsamImageProps)["onVnodeBeforeUpdate"];
"onVnodeUpdated"?: (AsamImageProps)["onVnodeUpdated"];
"onVnodeBeforeUnmount"?: (AsamImageProps)["onVnodeBeforeUnmount"];
"onVnodeUnmounted"?: (AsamImageProps)["onVnodeUnmounted"];
"class"?: unknown;
"style"?: unknown;
"alt"?: string | undefined;
"referrerpolicy"?: string | undefined;
};完整的上游实例，包含全部公开方法与响应式状态。
参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: "load", ...args: [evt: globalThis.Event]): void
事件参数：(event: "error", ...args: [evt: globalThis.Event]): void
事件参数完整签名见公开类型视图：((event: "load", evt: Event) => void) & ((event: "error", evt: Event) => void) & ((event: "show") => void) & ((event: "close") => void) & ((event: "switch", val: number) => void)。
事件参数完整签名见公开类型视图：((event: "load", evt: Event) => void) & ((event: "error", evt: Event) => void) & ((event: "show") => void) & ((event: "close") => void) & ((event: "switch", val: number) => void)。
事件参数：(event: "switch", ...args: [val: number]): void
$el
必填：是；声明来源：依赖声明。
$options
必填：是；声明来源：依赖声明。
$forceUpdate
必填：是；声明来源：依赖声明。
$forceUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$nextTick
必填：是；声明来源：依赖声明。
$nextTick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): Promise<void>
事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$watch
必填：是；声明来源：依赖声明。
$watch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamImageExpose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
infinite
必填：是；声明来源：上游声明。
infinite 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
scale
必填：是；声明来源：上游声明。
src
必填：是；声明来源：上游声明。
fit
必填：是；声明来源：上游声明。
fit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "fill" / "contain" / "cover" / "none" / "scale-down"
initialIndex
必填：是；声明来源：上游声明。
closeOnPressEscape
必填：是；声明来源：上游声明。
closeOnPressEscape 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
previewSrcList
必填：是；声明来源：上游声明。
previewSrcList 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
zoomRate
必填：是；声明来源：上游声明。
minScale
必填：是；声明来源：上游声明。
maxScale
必填：是；声明来源：上游声明。
zIndex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
lazy
必填：否；声明来源：上游声明。
lazy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
onError
必填：否；声明来源：上游声明。
onError 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): any
hideOnClickModal
必填：否；声明来源：上游声明。
hideOnClickModal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
loading
必填：否；声明来源：上游声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："lazy" / "eager"
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
scrollContainer
必填：否；声明来源：上游声明。
scrollContainer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
previewTeleported
必填：否；声明来源：上游声明。
previewTeleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
showProgress
必填：否；声明来源：上游声明。
showProgress 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
crossorigin
必填：否；声明来源：上游声明。
crossorigin 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "anonymous" / "use-credentials"
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onLoad
必填：否；声明来源：上游声明。
onLoad 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): any
onShow
必填：否；声明来源：上游声明。
onShow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): any
onClose
必填：否；声明来源：上游声明。
onClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): any
onSwitch
必填：否；声明来源：上游声明。
onSwitch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(val: number): any
showPreview
必填：是；声明来源：上游声明。
showPreview 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamImageExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamImageExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamImageExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "params">— 依赖声明从 path 提取并解码后的参数对象。
$route.redirectedFrom.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$route.redirectedFrom.replace:boolean | undefined— 依赖声明替换当前历史记录，而不是添加新记录。
枚举：
false/true$route.redirectedFrom.force:boolean | undefined— 依赖声明即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
枚举：
false/true$route.redirectedFrom.state:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamImageExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamImageExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamImageExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]— 依赖声明路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
$router.options.history.base:string— 依赖声明添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.location:string— 依赖声明当前历史记录位置。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.state:(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.go:(delta: number, triggerListeners?: boolean) => void— 依赖声明按指定方向遍历历史记录。
事件参数：
(delta: number, triggerListeners?: boolean | undefined): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.listen:(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamImageExpose["src"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamImageExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string$router.options.linkActiveClass:string | undefined— 依赖声明应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
$router.options.linkExactActiveClass:string | undefined— 依赖声明应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
$router.options.end:boolean | undefined— 依赖声明是否在表达式末尾添加 $，使其匹配到路径结尾。
声明默认：
`true`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.sensitive:boolean | undefined— 依赖声明使正则表达式区分大小写。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.strict:boolean | undefined— 依赖声明是否禁止路径末尾的斜杠。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true
$router.addRoute:(NonNullable<AsamImageExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamImageExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamImageExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamImageExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamImageExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamImageExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamImageExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamImageExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>$router.back:() => void— 依赖声明通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：
(): void$router.forward:() => void— 依赖声明通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：
(): void$router.go:(delta: number) => void— 依赖声明通过调用 history.go() 在历史记录中前进或后退。
事件参数：
(delta: number): void$router.beforeEach:(NonNullable<AsamImageExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamImageExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamImageExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamImageExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void$router.isReady:() => Promise<void>— 依赖声明返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：
(): Promise<void>$router.install:(app: App) => void— 依赖声明由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：
(app: App<any>): void
AsamImageExpose 公开类型视图
import type { VNodeProps, AllowedComponentProps, ComponentCustomProps, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamImageExpose, AsamTableColumnExpose, AsamImageFitType, AsamImageCrossorigin, AsamImageNativeAttributes, AsamImageSlots, AsamImageProps } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamImageExpose
type PublicContract = {
"$": AsamImageExpose["$"];
"$data": AsamTableColumnExpose;
"$props": { readonly hideOnClickModal?: boolean | undefined; readonly src?: string | undefined; readonly fit?: AsamImageFitType | undefined; readonly loading?: "eager" | "lazy" | undefined; readonly lazy?: boolean | undefined; readonly scrollContainer?: (string | HTMLElement) | undefined; readonly previewSrcList?: string[] | undefined; readonly previewTeleported?: boolean | undefined; readonly zIndex?: number | undefined; readonly initialIndex?: number | undefined; readonly infinite?: boolean | undefined; readonly closeOnPressEscape?: boolean | undefined; readonly zoomRate?: number | undefined; readonly scale?: number | undefined; readonly minScale?: number | undefined; readonly maxScale?: number | undefined; readonly showProgress?: boolean | undefined; readonly crossorigin?: AsamImageCrossorigin | undefined; readonly onLoad?: ((evt: Event) => any) | undefined | undefined; readonly onShow?: (() => any) | undefined | undefined; readonly onClose?: (() => any) | undefined | undefined; readonly onError?: ((evt: Event) => any) | undefined | undefined; readonly onSwitch?: ((val: number) => any) | undefined | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & AsamImageNativeAttributes;
"$attrs": AsamImageExpose["$attrs"];
"$refs": AsamImageExpose["$refs"];
"$slots": AsamImageSlots;
"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$host": Element | null;
"$emit": ((event: "load", evt: Event) => void) & ((event: "error", evt: Event) => void) & ((event: "show") => void) & ((event: "close") => void) & ((event: "switch", val: number) => void);
"$el": any;
"$options": (AsamImageExpose)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamImageExpose)["$nextTick"];
"$watch": (AsamImageExpose)["$watch"];
readonly "infinite": boolean;
readonly "scale": number;
readonly "src": string;
readonly "fit": AsamImageFitType;
readonly "initialIndex": number;
readonly "closeOnPressEscape": boolean;
readonly "previewSrcList": string[];
readonly "zoomRate": number;
readonly "minScale": number;
readonly "maxScale": number;
readonly "zIndex"?: number | undefined;
readonly "lazy"?: boolean | undefined;
readonly "onError"?: ((evt: Event) => any) | undefined;
readonly "hideOnClickModal"?: boolean | undefined;
readonly "loading"?: "lazy" | "eager" | undefined;
readonly "scrollContainer"?: string | HTMLElement | undefined;
readonly "previewTeleported"?: boolean | undefined;
readonly "showProgress"?: boolean | undefined;
readonly "crossorigin"?: AsamImageCrossorigin | undefined;
readonly "onLoad"?: ((evt: Event) => any) | undefined;
readonly "onShow"?: (() => any) | undefined;
readonly "onClose"?: (() => any) | undefined;
readonly "onSwitch"?: ((val: number) => any) | undefined;
"showPreview": () => void;
"$route": AsamImageExpose["$route"];
"$router": AsamImageExpose["$router"];
};参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: "load", ...args: [evt: globalThis.Event]): void
事件参数：(event: "error", ...args: [evt: globalThis.Event]): void
事件参数完整签名见公开类型视图：((event: "load", evt: Event) => void) & ((event: "error", evt: Event) => void) & ((event: "show") => void) & ((event: "close") => void) & ((event: "switch", val: number) => void)。
事件参数完整签名见公开类型视图：((event: "load", evt: Event) => void) & ((event: "error", evt: Event) => void) & ((event: "show") => void) & ((event: "close") => void) & ((event: "switch", val: number) => void)。
事件参数：(event: "switch", ...args: [val: number]): void
$el
必填：是；声明来源：依赖声明。
$options
必填：是；声明来源：依赖声明。
$forceUpdate
必填：是；声明来源：依赖声明。
$forceUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$nextTick
必填：是；声明来源：依赖声明。
$nextTick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): Promise<void>
事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$watch
必填：是；声明来源：依赖声明。
$watch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamImageInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
infinite
必填：是；声明来源：上游声明。
infinite 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
scale
必填：是；声明来源：上游声明。
src
必填：是；声明来源：上游声明。
fit
必填：是；声明来源：上游声明。
fit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "fill" / "contain" / "cover" / "none" / "scale-down"
initialIndex
必填：是；声明来源：上游声明。
closeOnPressEscape
必填：是；声明来源：上游声明。
closeOnPressEscape 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
previewSrcList
必填：是；声明来源：上游声明。
previewSrcList 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
zoomRate
必填：是；声明来源：上游声明。
minScale
必填：是；声明来源：上游声明。
maxScale
必填：是；声明来源：上游声明。
zIndex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
lazy
必填：否；声明来源：上游声明。
lazy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
onError
必填：否；声明来源：上游声明。
onError 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): any
hideOnClickModal
必填：否；声明来源：上游声明。
hideOnClickModal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
loading
必填：否；声明来源：上游声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："lazy" / "eager"
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
scrollContainer
必填：否；声明来源：上游声明。
scrollContainer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
previewTeleported
必填：否；声明来源：上游声明。
previewTeleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
showProgress
必填：否；声明来源：上游声明。
showProgress 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
crossorigin
必填：否；声明来源：上游声明。
crossorigin 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "anonymous" / "use-credentials"
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onLoad
必填：否；声明来源：上游声明。
onLoad 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): any
onShow
必填：否；声明来源：上游声明。
onShow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): any
onClose
必填：否；声明来源：上游声明。
onClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): any
onSwitch
必填：否；声明来源：上游声明。
onSwitch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(val: number): any
showPreview
必填：是；声明来源：上游声明。
showPreview 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamImageExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamImageExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamImageExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "params">— 依赖声明从 path 提取并解码后的参数对象。
$route.redirectedFrom.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$route.redirectedFrom.replace:boolean | undefined— 依赖声明替换当前历史记录，而不是添加新记录。
枚举：
false/true$route.redirectedFrom.force:boolean | undefined— 依赖声明即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
枚举：
false/true$route.redirectedFrom.state:PublicMember<NonNullable<(NonNullable<AsamImageExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamImageExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamImageExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamImageExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]— 依赖声明路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
$router.options.history.base:string— 依赖声明添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.location:string— 依赖声明当前历史记录位置。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.state:(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.go:(delta: number, triggerListeners?: boolean) => void— 依赖声明按指定方向遍历历史记录。
事件参数：
(delta: number, triggerListeners?: boolean | undefined): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.listen:(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamImageExpose["src"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamImageExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string$router.options.linkActiveClass:string | undefined— 依赖声明应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
$router.options.linkExactActiveClass:string | undefined— 依赖声明应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
$router.options.end:boolean | undefined— 依赖声明是否在表达式末尾添加 $，使其匹配到路径结尾。
声明默认：
`true`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.sensitive:boolean | undefined— 依赖声明使正则表达式区分大小写。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.strict:boolean | undefined— 依赖声明是否禁止路径末尾的斜杠。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true
$router.addRoute:(NonNullable<AsamImageExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamImageExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamImageExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamImageExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamImageExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamImageExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamImageExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamImageExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>$router.back:() => void— 依赖声明通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：
(): void$router.forward:() => void— 依赖声明通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：
(): void$router.go:(delta: number) => void— 依赖声明通过调用 history.go() 在历史记录中前进或后退。
事件参数：
(delta: number): void$router.beforeEach:(NonNullable<AsamImageExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamImageExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamImageExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamImageExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamImageExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void$router.isReady:() => Promise<void>— 依赖声明返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：
(): Promise<void>$router.install:(app: App) => void— 依赖声明由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：
(app: App<any>): void
AsamImageInstance 公开类型视图
import type { VNodeProps, AllowedComponentProps, ComponentCustomProps, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamImageInstance, AsamImageExpose, AsamTableColumnExpose, AsamImageFitType, AsamImageCrossorigin, AsamImageNativeAttributes, AsamImageSlots, AsamImageProps } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamImageInstance
type PublicContract = {
"$": AsamImageExpose["$"];
"$data": AsamTableColumnExpose;
"$props": { readonly hideOnClickModal?: boolean | undefined; readonly src?: string | undefined; readonly fit?: AsamImageFitType | undefined; readonly loading?: "eager" | "lazy" | undefined; readonly lazy?: boolean | undefined; readonly scrollContainer?: (string | HTMLElement) | undefined; readonly previewSrcList?: string[] | undefined; readonly previewTeleported?: boolean | undefined; readonly zIndex?: number | undefined; readonly initialIndex?: number | undefined; readonly infinite?: boolean | undefined; readonly closeOnPressEscape?: boolean | undefined; readonly zoomRate?: number | undefined; readonly scale?: number | undefined; readonly minScale?: number | undefined; readonly maxScale?: number | undefined; readonly showProgress?: boolean | undefined; readonly crossorigin?: AsamImageCrossorigin | undefined; readonly onLoad?: ((evt: Event) => any) | undefined | undefined; readonly onShow?: (() => any) | undefined | undefined; readonly onClose?: (() => any) | undefined | undefined; readonly onError?: ((evt: Event) => any) | undefined | undefined; readonly onSwitch?: ((val: number) => any) | undefined | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & AsamImageNativeAttributes;
"$attrs": AsamImageExpose["$attrs"];
"$refs": AsamImageExpose["$refs"];
"$slots": AsamImageSlots;
"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$host": Element | null;
"$emit": ((event: "load", evt: Event) => void) & ((event: "error", evt: Event) => void) & ((event: "show") => void) & ((event: "close") => void) & ((event: "switch", val: number) => void);
"$el": any;
"$options": (AsamImageInstance)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamImageInstance)["$nextTick"];
"$watch": (AsamImageInstance)["$watch"];
readonly "infinite": boolean;
readonly "scale": number;
readonly "src": string;
readonly "fit": AsamImageFitType;
readonly "initialIndex": number;
readonly "closeOnPressEscape": boolean;
readonly "previewSrcList": string[];
readonly "zoomRate": number;
readonly "minScale": number;
readonly "maxScale": number;
readonly "zIndex"?: number | undefined;
readonly "lazy"?: boolean | undefined;
readonly "onError"?: ((evt: Event) => any) | undefined;
readonly "hideOnClickModal"?: boolean | undefined;
readonly "loading"?: "lazy" | "eager" | undefined;
readonly "scrollContainer"?: string | HTMLElement | undefined;
readonly "previewTeleported"?: boolean | undefined;
readonly "showProgress"?: boolean | undefined;
readonly "crossorigin"?: AsamImageCrossorigin | undefined;
readonly "onLoad"?: ((evt: Event) => any) | undefined;
readonly "onShow"?: (() => any) | undefined;
readonly "onClose"?: (() => any) | undefined;
readonly "onSwitch"?: ((val: number) => any) | undefined;
"showPreview": () => void;
"$route": AsamImageExpose["$route"];
"$router": AsamImageExpose["$router"];
};作用域插槽保留上游实例契约。
参数与事件说明
error
必填：否；声明来源：上游声明。
error 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: AsamTableColumnExpose): any
placeholder
必填：否；声明来源：上游声明。
placeholder 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: AsamTableColumnExpose): any
viewer
必填：否；声明来源：上游声明。
viewer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: AsamTableColumnExpose): any
progress
必填：否；声明来源：上游声明。
progress 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { activeIndex: number; total: number; }): any
toolbar
必填：否；声明来源：上游声明。
toolbar 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { actions: (action: AsamImageViewerAction, options?: {}) => void; prev: () => void; next: () => void; reset: () => void; activeIndex: number; setActiveItem: (index: number) => void; }): any
viewer-error
必填：否；声明来源：上游声明。
viewer-error 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: {
/** The complete upstream instance, including every exposed method and reactive state. */
activeIndex: number; src: string; }): any
AsamImageSlots 公开类型视图
import type { AsamImageSlots, AsamImageExpose, AsamTableColumnExpose, AsamImageViewerAction } from '@asam-ui/ui';
// AsamImageSlots
type PublicContract = {
"error"?: (AsamImageSlots)["error"];
"placeholder"?: (AsamImageSlots)["placeholder"];
"viewer"?: (AsamImageSlots)["viewer"];
"progress"?: (AsamImageSlots)["progress"];
"toolbar"?: (AsamImageSlots)["toolbar"];
"viewer-error"?: (AsamImageSlots)["viewer-error"];
readonly [key: string]: import("vue").Slot<any> | undefined;
};组合契约按分支生效；请同时查看公开类型。
AsamImageCrossorigin 公开类型视图
import type { AsamImageCrossorigin } from '@asam-ui/ui';
// AsamImageCrossorigin
type PublicContract = AsamImageCrossorigin;参数与事件说明
load
必填：是；声明来源：上游声明。
load 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): boolean
error
必填：是；声明来源：上游声明。
error 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): boolean
switch
必填：是；声明来源：上游声明。
switch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(val: number): boolean
close
必填：是；声明来源：上游声明。
close 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): boolean
show
必填：是；声明来源：上游声明。
show 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): boolean
AsamImageEmits 公开类型视图
import type { AsamImageEmits, AsamImageExpose } from '@asam-ui/ui';
// AsamImageEmits
type PublicContract = {
"load": (evt: Event) => boolean;
"error": (evt: Event) => boolean;
"switch": (val: number) => boolean;
"close": () => boolean;
"show": () => boolean;
};组合契约按分支生效；请同时查看公开类型。
AsamImageFitType 公开类型视图
import type { AsamImageFitType } from '@asam-ui/ui';
// AsamImageFitType
type PublicContract = AsamImageFitType;参数与事件说明
zIndex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
fit
必填：否；声明来源：上游声明。
fit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "fill" / "contain" / "cover" / "none" / "scale-down"
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
lazy
必填：否；声明来源：上游声明。
lazy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
src
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
initialIndex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
hideOnClickModal
必填：否；声明来源：上游声明。
hideOnClickModal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
loading
必填：否；声明来源：上游声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："lazy" / "eager"
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
scrollContainer
必填：否；声明来源：上游声明。
scrollContainer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
previewSrcList
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码工厂（未执行）：() => mutable([] as const)（2.14.7；源码事实，未作为 ASAM 运行实测）
previewTeleported
必填：否；声明来源：上游声明。
previewTeleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
infinite
必填：否；声明来源：上游声明。
infinite 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
closeOnPressEscape
必填：否；声明来源：上游声明。
closeOnPressEscape 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
zoomRate
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：1.2（2.14.7；源码事实，未作为 ASAM 运行实测）
scale
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：1（2.14.7；源码事实，未作为 ASAM 运行实测）
minScale
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：0.2（2.14.7；源码事实，未作为 ASAM 运行实测）
maxScale
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：7（2.14.7；源码事实，未作为 ASAM 运行实测）
showProgress
必填：否；声明来源：上游声明。
showProgress 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
crossorigin
必填：否；声明来源：上游声明。
crossorigin 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "anonymous" / "use-credentials"
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
alt
必填：否；声明来源：ASAM 声明。
referrerpolicy
必填：否；声明来源：ASAM 声明。
AsamImagePropsPublic 公开类型视图
import type { AsamImagePropsPublic, AsamImageProps, AsamImageCrossorigin } from '@asam-ui/ui';
// AsamImagePropsPublic
type PublicContract = {
readonly "zIndex"?: number | undefined;
readonly "fit"?: (AsamImagePropsPublic)["fit"];
readonly "lazy"?: boolean | undefined;
readonly "src"?: string | undefined;
readonly "initialIndex"?: number | undefined;
readonly "hideOnClickModal"?: boolean | undefined;
readonly "loading"?: (AsamImagePropsPublic)["loading"];
readonly "scrollContainer"?: (AsamImagePropsPublic)["scrollContainer"];
readonly "previewSrcList"?: string[] | undefined;
readonly "previewTeleported"?: boolean | undefined;
readonly "infinite"?: (AsamImagePropsPublic)["infinite"];
readonly "closeOnPressEscape"?: (AsamImagePropsPublic)["closeOnPressEscape"];
readonly "zoomRate"?: number | undefined;
readonly "scale"?: number | undefined;
readonly "minScale"?: number | undefined;
readonly "maxScale"?: number | undefined;
readonly "showProgress"?: boolean | undefined;
readonly "crossorigin"?: (AsamImagePropsPublic)["crossorigin"];
"alt"?: string | undefined;
"referrerpolicy"?: string | undefined;
};