使用场景
为一组图片提供独立预览、切换、缩放和关闭交互。
基础用法与状态
下列示例只使用本入口的实际公开能力。
基础用法与状态
<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 vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const preview_svg_1: any = __importDefault(require("./preview.svg"));
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamImageViewerBasicDemo' },
__name: 'Demo',
setup(__props?: any) {
const open: any = (0, vue_3.ref)(false);
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)(vue_2.Fragment, null, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[0] || (_cache[0] = ($event?: any) => (open.value = true))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_2.createTextVNode)("打开独立图片预览", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(open.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamImageViewer), (0, vue_2.mergeProps)({ key: 0 }, { urlList: [(0, vue_2.unref)(preview_svg_1.default)], teleported: true }, {
onClose: _cache[1] || (_cache[1] = ($event?: any) => (open.value = false))
}), null, 16 /* FULL_PROPS */))
: (0, vue_2.createCommentVNode)("v-if", true)
], 64 /* STABLE_FRAGMENT */));
};
}
});
},
"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><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 vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const preview_svg_1 = __importDefault(require("./preview.svg"));
exports.default = Object.assign({ name: 'AsamImageViewerBasicDemo' }, {
__name: 'Demo',
setup(__props) {
const open = (0, vue_2.ref)(false);
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)(vue_1.Fragment, null, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[0] || (_cache[0] = $event => (open.value = true))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_1.createTextVNode)("打开独立图片预览", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(open.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamImageViewer), (0, vue_1.mergeProps)({ key: 0 }, { urlList: [(0, vue_1.unref)(preview_svg_1.default)], teleported: true }, {
onClose: _cache[1] || (_cache[1] = $event => (open.value = false))
}), null, 16 /* FULL_PROPS */))
: (0, vue_1.createCommentVNode)("v-if", true)
], 64 /* STABLE_FRAGMENT */));
};
}
});
},
"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>独立实例、缩放输入与关闭策略
下面的完整 TS/JS SFC 直接挂载 AsamImageViewer，展示全部公开实例、四个事件和四个插槽。前两张图片为本地 data URL，第三张故意加载失败，供观察 error 与 viewer-error。
打开前配置图片列表、缩放范围与关闭方式，打开后可通过实例控制。 完整说明。
ref<AsamImageViewerInstance>() 的公开 setActiveItem(index): void 用于手动切换。 完整说明。
scale 是父级输入，不是 v-model；2.14.7 没有 scale 或 update:scale 事件。 完整说明。
公开实例、缩放输入、关闭策略与完整插槽
<template>
<div class="viewer-demo demo-layout-1">
<fieldset>
<legend>独立 Viewer 的初始配置</legend>
<label
>起始索引<AsamInputNumber v-model.number="initialIndex" :min="0" :max="2"
/></label>
<label>初始缩放<AsamInputNumber v-model.number="scale" :step="0.25" /></label>
<label
>缩放步长<AsamInputNumber v-model.number="zoomRate" :min="1.1" :step="0.1"
/></label>
<label
>最小缩放<AsamInputNumber v-model.number="minScale" :min="0.1" :step="0.1"
/></label>
<label
>最大缩放<AsamInputNumber v-model.number="maxScale" :min="1" :step="0.5"
/></label>
<label>层级<AsamInputNumber v-model.number="zIndex" /></label>
<AsamCheckboxItem v-model="teleported">挂载到 body</AsamCheckboxItem>
<AsamCheckboxItem v-model="infinite">循环切换</AsamCheckboxItem>
<AsamCheckboxItem v-model="closeOnPressEscape">Esc 关闭</AsamCheckboxItem>
<AsamCheckboxItem v-model="hideOnClickModal">遮罩关闭</AsamCheckboxItem>
<AsamCheckboxItem v-model="showProgress">原生进度</AsamCheckboxItem>
<AsamCheckboxItem v-model="customProgress">progress 插槽</AsamCheckboxItem>
<AsamCheckboxItem v-model="customToolbar">toolbar 插槽</AsamCheckboxItem>
</fieldset>
<AsamButton type="default" native-type="button" @click="open = true"
>打开完整独立预览</AsamButton
>
<output data-test="viewer-events">{{ events.join('；') || '尚无事件' }}</output>
<AsamImageViewer
v-if="open"
ref="viewer"
:url-list="urls"
:initial-index="initialIndex"
:infinite="infinite"
:scale="scale"
:zoom-rate="zoomRate"
:min-scale="minScale"
:max-scale="maxScale"
:close-on-press-escape="closeOnPressEscape"
:hide-on-click-modal="hideOnClickModal"
:teleported="teleported"
:z-index="zIndex"
:show-progress="showProgress"
crossorigin="anonymous"
@close="onClose"
@error="onError"
@switch="onSwitch"
@rotate="onRotate"
>
<template #default>
<div class="viewer-demo-panel" data-test="viewer-controls">
<p class="example-paragraph">default 插槽：父级输入与公开 ref</p>
<label
>实时 scale<AsamInputNumber
v-model.number="scale"
data-test="scale"
:step="0.25"
/></label>
<AsamCheckboxItem v-model="infinite" data-test="infinite"
>循环切换</AsamCheckboxItem
>
<AsamCheckboxItem v-model="closeOnPressEscape" data-test="escape"
>Esc 关闭</AsamCheckboxItem
>
<AsamCheckboxItem v-model="hideOnClickModal" data-test="mask"
>遮罩关闭</AsamCheckboxItem
>
<AsamCheckboxItem v-model="showProgress">原生进度</AsamCheckboxItem>
<AsamCheckboxItem v-model="customProgress">progress 插槽</AsamCheckboxItem>
<AsamCheckboxItem v-model="customToolbar">toolbar 插槽</AsamCheckboxItem>
<AsamButton type="default" native-type="button" @click="goTo(0)"
>ref：第一张</AsamButton
>
<AsamButton type="default" native-type="button" @click="goTo(1)"
>ref：第二张</AsamButton
>
<AsamButton type="default" native-type="button" @click="goTo(2)"
>ref：失败图片</AsamButton
>
<AsamButton type="default" native-type="button" @click="open = false"
>父级卸载 Viewer</AsamButton
>
<output data-test="viewer-return">setActiveItem 返回：{{ returnType }}</output>
<output>{{ events.join('；') || '尚无事件' }}</output>
</div>
</template>
<template v-if="customProgress" #progress="{ activeIndex, total }">
<span data-test="viewer-progress">第 {{ activeIndex + 1 }} / {{ total }} 张</span>
</template>
<template
v-if="customToolbar"
#toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
>
<div class="viewer-demo-toolbar">
<AsamButton type="default" native-type="button" @click="prev()"
>上一张</AsamButton
>
<AsamButton type="default" native-type="button" @click="next()"
>下一张</AsamButton
>
<AsamButton type="default" native-type="button" @click="setActiveItem(0)"
>slot：第一张</AsamButton
>
<AsamButton
type="default"
native-type="button"
@click="actions('zoomOut', { enableTransition: false })"
>
缩小
</AsamButton>
<AsamButton
type="default"
native-type="button"
@click="actions('zoomIn', { enableTransition: false })"
>
放大
</AsamButton>
<AsamButton type="default" native-type="button" @click="actions('clockwise')"
>顺时针旋转</AsamButton
>
<AsamButton
type="default"
native-type="button"
@click="actions('anticlockwise')"
>逆时针旋转</AsamButton
>
<AsamButton type="default" native-type="button" @click="reset()"
>切换原始尺寸/适应</AsamButton
>
<span>slot.activeIndex={{ activeIndex }}</span>
</div>
</template>
<template #viewer-error="{ activeIndex, src }">
<div class="viewer-demo-error" data-test="viewer-error">
<p class="example-paragraph">第 {{ activeIndex + 1 }} 张加载失败：{{ src }}</p>
<AsamButton type="default" native-type="button" @click="goTo(0)"
>通过公开 ref 返回第一张</AsamButton
>
</div>
</template>
</AsamImageViewer>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamInputNumber, AsamCheckboxItem, AsamButton, AsamImageViewer } from '@asam-ui/ui';
import type { AsamImageViewerInstance } from '@asam-ui/ui';
defineOptions({ name: 'AsamImageViewerStandaloneDemo' });
const viewer = ref<AsamImageViewerInstance>();
const open = ref(false);
const initialIndex = ref(0);
const infinite = ref(false);
const scale = ref(1);
const zoomRate = ref(1.5);
const minScale = ref(0.5);
const maxScale = ref(2);
const closeOnPressEscape = ref(true);
const hideOnClickModal = ref(false);
const teleported = ref(true);
const zIndex = ref(2100);
const showProgress = ref(true);
const customProgress = ref(true);
const customToolbar = ref(true);
const events = ref<string[]>([]);
const returnType = ref('尚未调用');
const image = (color: string) =>
'data:image/svg+xml,' +
encodeURIComponent(
`<svg xmlns="http://www.w3.org/2000/svg" width="320" height="220"><rect width="320" height="220" fill="${color}"/></svg>`
);
const urls = [image('royalblue'), image('seagreen'), 'data:image/png;base64,broken'];
function goTo(index: number): void {
returnType.value = typeof viewer.value?.setActiveItem(index);
}
function onClose(): void {
events.value.push('close');
open.value = false;
}
function onError(event: Event): void {
events.value.push(`error:${event.type}`);
}
function onSwitch(index: number): void {
events.value.push(`switch:${index}`);
}
function onRotate(degrees: number): void {
events.value.push(`rotate:${degrees}`);
}
</script>
<style scoped>
.viewer-demo fieldset,
.viewer-demo-panel,
.viewer-demo-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm, 8px);
}
.viewer-demo label {
display: inline-flex;
gap: var(--asam-space-xs, 4px);
align-items: center;
}
.viewer-demo input[type='number'] {
width: 70px;
}
.viewer-demo-panel {
position: absolute;
top: var(--asam-space-md, 16px);
left: var(--asam-space-md, 16px);
width: min(520px, calc(100vw - 100px));
padding: var(--asam-space-sm, 8px);
background: var(--asam-color-surface);
color: var(--asam-color-text-primary);
z-index: 1;
}
.viewer-demo-panel p,
.viewer-demo-panel output {
flex-basis: 100%;
margin: 0;
}
.viewer-demo-error {
position: relative;
z-index: 1;
color: var(--asam-color-surface);
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<div class="viewer-demo demo-layout-1">
<fieldset>
<legend>独立 Viewer 的初始配置</legend>
<label
>起始索引<AsamInputNumber v-model.number="initialIndex" :min="0" :max="2"
/></label>
<label>初始缩放<AsamInputNumber v-model.number="scale" :step="0.25" /></label>
<label
>缩放步长<AsamInputNumber v-model.number="zoomRate" :min="1.1" :step="0.1"
/></label>
<label
>最小缩放<AsamInputNumber v-model.number="minScale" :min="0.1" :step="0.1"
/></label>
<label
>最大缩放<AsamInputNumber v-model.number="maxScale" :min="1" :step="0.5"
/></label>
<label>层级<AsamInputNumber v-model.number="zIndex" /></label>
<AsamCheckboxItem v-model="teleported">挂载到 body</AsamCheckboxItem>
<AsamCheckboxItem v-model="infinite">循环切换</AsamCheckboxItem>
<AsamCheckboxItem v-model="closeOnPressEscape">Esc 关闭</AsamCheckboxItem>
<AsamCheckboxItem v-model="hideOnClickModal">遮罩关闭</AsamCheckboxItem>
<AsamCheckboxItem v-model="showProgress">原生进度</AsamCheckboxItem>
<AsamCheckboxItem v-model="customProgress">progress 插槽</AsamCheckboxItem>
<AsamCheckboxItem v-model="customToolbar">toolbar 插槽</AsamCheckboxItem>
</fieldset>
<AsamButton type="default" native-type="button" @click="open = true"
>打开完整独立预览</AsamButton
>
<output data-test="viewer-events">{{ events.join('；') || '尚无事件' }}</output>
<AsamImageViewer
v-if="open"
ref="viewer"
:url-list="urls"
:initial-index="initialIndex"
:infinite="infinite"
:scale="scale"
:zoom-rate="zoomRate"
:min-scale="minScale"
:max-scale="maxScale"
:close-on-press-escape="closeOnPressEscape"
:hide-on-click-modal="hideOnClickModal"
:teleported="teleported"
:z-index="zIndex"
:show-progress="showProgress"
crossorigin="anonymous"
@close="onClose"
@error="onError"
@switch="onSwitch"
@rotate="onRotate"
>
<template #default>
<div class="viewer-demo-panel" data-test="viewer-controls">
<p class="example-paragraph">default 插槽：父级输入与公开 ref</p>
<label
>实时 scale<AsamInputNumber
v-model.number="scale"
data-test="scale"
:step="0.25"
/></label>
<AsamCheckboxItem v-model="infinite" data-test="infinite"
>循环切换</AsamCheckboxItem
>
<AsamCheckboxItem v-model="closeOnPressEscape" data-test="escape"
>Esc 关闭</AsamCheckboxItem
>
<AsamCheckboxItem v-model="hideOnClickModal" data-test="mask"
>遮罩关闭</AsamCheckboxItem
>
<AsamCheckboxItem v-model="showProgress">原生进度</AsamCheckboxItem>
<AsamCheckboxItem v-model="customProgress">progress 插槽</AsamCheckboxItem>
<AsamCheckboxItem v-model="customToolbar">toolbar 插槽</AsamCheckboxItem>
<AsamButton type="default" native-type="button" @click="goTo(0)"
>ref：第一张</AsamButton
>
<AsamButton type="default" native-type="button" @click="goTo(1)"
>ref：第二张</AsamButton
>
<AsamButton type="default" native-type="button" @click="goTo(2)"
>ref：失败图片</AsamButton
>
<AsamButton type="default" native-type="button" @click="open = false"
>父级卸载 Viewer</AsamButton
>
<output data-test="viewer-return">setActiveItem 返回：{{ returnType }}</output>
<output>{{ events.join('；') || '尚无事件' }}</output>
</div>
</template>
<template v-if="customProgress" #progress="{ activeIndex, total }">
<span data-test="viewer-progress">第 {{ activeIndex + 1 }} / {{ total }} 张</span>
</template>
<template
v-if="customToolbar"
#toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
>
<div class="viewer-demo-toolbar">
<AsamButton type="default" native-type="button" @click="prev()"
>上一张</AsamButton
>
<AsamButton type="default" native-type="button" @click="next()"
>下一张</AsamButton
>
<AsamButton type="default" native-type="button" @click="setActiveItem(0)"
>slot：第一张</AsamButton
>
<AsamButton
type="default"
native-type="button"
@click="actions('zoomOut', { enableTransition: false })"
>
缩小
</AsamButton>
<AsamButton
type="default"
native-type="button"
@click="actions('zoomIn', { enableTransition: false })"
>
放大
</AsamButton>
<AsamButton type="default" native-type="button" @click="actions('clockwise')"
>顺时针旋转</AsamButton
>
<AsamButton
type="default"
native-type="button"
@click="actions('anticlockwise')"
>逆时针旋转</AsamButton
>
<AsamButton type="default" native-type="button" @click="reset()"
>切换原始尺寸/适应</AsamButton
>
<span>slot.activeIndex={{ activeIndex }}</span>
</div>
</template>
<template #viewer-error="{ activeIndex, src }">
<div class="viewer-demo-error" data-test="viewer-error">
<p class="example-paragraph">第 {{ activeIndex + 1 }} 张加载失败：{{ src }}</p>
<AsamButton type="default" native-type="button" @click="goTo(0)"
>通过公开 ref 返回第一张</AsamButton
>
</div>
</template>
</AsamImageViewer>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamInputNumber, AsamCheckboxItem, AsamButton, AsamImageViewer } from '@asam-ui/ui';
defineOptions({ name: 'AsamImageViewerStandaloneDemo' });
const viewer = ref();
const open = ref(false);
const initialIndex = ref(0);
const infinite = ref(false);
const scale = ref(1);
const zoomRate = ref(1.5);
const minScale = ref(0.5);
const maxScale = ref(2);
const closeOnPressEscape = ref(true);
const hideOnClickModal = ref(false);
const teleported = ref(true);
const zIndex = ref(2100);
const showProgress = ref(true);
const customProgress = ref(true);
const customToolbar = ref(true);
const events = ref([]);
const returnType = ref('尚未调用');
const image = (color) =>
'data:image/svg+xml,' +
encodeURIComponent(
`<svg xmlns="http://www.w3.org/2000/svg" width="320" height="220"><rect width="320" height="220" fill="${color}"/></svg>`
);
const urls = [image('royalblue'), image('seagreen'), 'data:image/png;base64,broken'];
function goTo(index) {
returnType.value = typeof viewer.value?.setActiveItem(index);
}
function onClose() {
events.value.push('close');
open.value = false;
}
function onError(event) {
events.value.push(`error:${event.type}`);
}
function onSwitch(index) {
events.value.push(`switch:${index}`);
}
function onRotate(degrees) {
events.value.push(`rotate:${degrees}`);
}
</script>
<style scoped>
.viewer-demo fieldset,
.viewer-demo-panel,
.viewer-demo-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm, 8px);
}
.viewer-demo label {
display: inline-flex;
gap: var(--asam-space-xs, 4px);
align-items: center;
}
.viewer-demo input[type='number'] {
width: 70px;
}
.viewer-demo-panel {
position: absolute;
top: var(--asam-space-md, 16px);
left: var(--asam-space-md, 16px);
width: min(520px, calc(100vw - 100px));
padding: var(--asam-space-sm, 8px);
background: var(--asam-color-surface);
color: var(--asam-color-text-primary);
z-index: 1;
}
.viewer-demo-panel p,
.viewer-demo-panel output {
flex-basis: 100%;
margin: 0;
}
.viewer-demo-error {
position: relative;
z-index: 1;
color: var(--asam-color-surface);
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>事件、插槽与职责拆分
| 入口 | 独立 Viewer 示例中的用途 |
|---|---|
| close / error / switch / rotate | 记录无参数 close、原始 Event.type、图片索引和旋转角度，原生载荷不改写。 |
| default | 放置父级参数控制区与公开 ref 操作；Image 的内置预览不承接此插槽。 |
| progress | 使用 { activeIndex, total } 显示进度；关闭此插槽后可以独立观察 showProgress。 |
| toolbar | 使用 { actions, prev, next, reset, activeIndex, setActiveItem }；reset 按原生切换原始尺寸/适应模式，不是公开 ref 方法。 |
| viewer-error | 使用 { activeIndex, src } 展示故意失败的第三张图片，并用 ref 返回第一张。 |
图片加载和占位能力由 Image 提供；ImageViewer 负责查看、缩放与关闭。 完整说明。
使用约定
urlList 提供图片数组，initialIndex 设置起始图片，infinite 控制循环，zoomRate/minScale/maxScale 控制缩放范围。 完整说明。
缩放边界、键盘、切换和关闭遵循组件的公开行为。公开实例方法及其返回值以本页 API 为准。
局部与全局挂载
局部模式将遮罩限制在演示区域；全局模式使用默认视口范围。 开关显示当前模式，两个模式均可操作；关闭后可以再次切换。
局部与全局挂载
<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: "popup-mode" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const preview_svg_1: any = __importDefault(require("./preview.svg"));
const vue_4: any = require("vue");
const ui_2: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamImageViewerBasicDemo' },
__name: 'Demo',
setup(__props?: any) {
const open: any = (0, vue_3.ref)(false);
const globalPopup: any = (0, vue_4.ref)(true);
const mountTarget: any = (0, vue_4.ref)();
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", {
ref_key: "mountTarget",
ref: mountTarget,
class: (0, vue_2.normalizeClass)(["popup-stage", { local: !globalPopup.value }])
}, [
(0, vue_2.createElementVNode)("div", _hoisted_1, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_2.AsamSwitch), {
modelValue: globalPopup.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((globalPopup).value = $event)),
"active-text": "全局挂载到 body",
"inactive-text": "局部挂载到当前区域"
}, null, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = ($event?: any) => (open.value = true))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_2.createTextVNode)("打开独立图片预览", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
((0, vue_2.unref)(open))
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamImageViewer), (0, vue_2.mergeProps)({ key: 0 }, { urlList: [(0, vue_2.unref)(preview_svg_1.default)], teleported: true }, {
onClose: _cache[2] || (_cache[2] = ($event?: any) => (open.value = false)),
teleported: globalPopup.value
}), null, 16 /* FULL_PROPS */, ["teleported"]))
: (0, vue_2.createCommentVNode)("v-if", true)
], 2 /* CLASS */));
};
}
});
exports.default.__scopeId = "data-v-ee073db7";
},
"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>
.popup-stage[data-v-ee073db7] {
position: relative;
isolation: isolate;
min-height: 340px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode[data-v-ee073db7] {
margin-bottom: var(--asam-space-lg);
}
.popup-stage.local[data-v-ee073db7] .el-image-viewer__wrapper {
position: absolute;
}
</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: "popup-mode" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const preview_svg_1 = __importDefault(require("./preview.svg"));
const vue_3 = require("vue");
const ui_2 = require("@asam-ui/ui");
exports.default = Object.assign({ name: 'AsamImageViewerBasicDemo' }, {
__name: 'Demo',
setup(__props) {
const open = (0, vue_2.ref)(false);
const globalPopup = (0, vue_3.ref)(true);
const mountTarget = (0, vue_3.ref)();
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", {
ref_key: "mountTarget",
ref: mountTarget,
class: (0, vue_1.normalizeClass)(["popup-stage", { local: !globalPopup.value }])
}, [
(0, vue_1.createElementVNode)("div", _hoisted_1, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_2.AsamSwitch), {
modelValue: globalPopup.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((globalPopup).value = $event)),
"active-text": "全局挂载到 body",
"inactive-text": "局部挂载到当前区域"
}, null, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = $event => (open.value = true))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_1.createTextVNode)("打开独立图片预览", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
((0, vue_1.unref)(open))
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamImageViewer), (0, vue_1.mergeProps)({ key: 0 }, { urlList: [(0, vue_1.unref)(preview_svg_1.default)], teleported: true }, {
onClose: _cache[2] || (_cache[2] = $event => (open.value = false)),
teleported: globalPopup.value
}), null, 16 /* FULL_PROPS */, ["teleported"]))
: (0, vue_1.createCommentVNode)("v-if", true)
], 2 /* CLASS */));
};
}
});
exports.default.__scopeId = "data-v-441c5d4e";
},
"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>
.popup-stage[data-v-441c5d4e] {
position: relative;
isolation: isolate;
min-height: 340px;
padding: var(--asam-space-md);
border: 1px dashed var(--asam-color-border);
}
.popup-mode[data-v-441c5d4e] {
margin-bottom: var(--asam-space-lg);
}
.popup-stage.local[data-v-441c5d4e] .el-image-viewer__wrapper {
position: absolute;
}
</style>API
属性 AsamImageViewerProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
urlList | 用于预览的图片链接列表 | string[] | undefined | 工厂函数（每个实例创建） |
zIndex | 预览时遮罩层的 z-index | number | undefined | — |
initialIndex | 初始预览图像索引，小于 url-list 的长度 | number | undefined | 0 |
infinite | 是否可以无限循环预览 | boolean | undefined | true |
hideOnClickModal | 是否可以通过点击遮罩层关闭预览 | boolean | undefined | false |
teleported | image 自身是否插入至 body 元素上。嵌套的父元素属性会发生修改时应该将此属性设置为 true | boolean | undefined | false |
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"完整类型：AsamImageViewerCrossorigin | undefined | — |
onClose | — | (() => any) | undefined | — |
onError | — | ((evt: Event) => any) | undefined | — |
onRotate | — | ((deg: number) => any) | undefined | — |
onSwitch | — | ((index: number) => any) | undefined | — |
key | — | PropertyKey | undefined | — |
ref | — | VNodeRef | undefined | — |
ref_for | — | boolean | undefined | — |
ref_key | — | string | undefined | — |
onVnodeBeforeMount | — | (AsamImageViewerProps)["onVnodeBeforeMount"] | — |
onVnodeMounted | — | (AsamImageViewerProps)["onVnodeMounted"] | — |
onVnodeBeforeUpdate | — | (AsamImageViewerProps)["onVnodeBeforeUpdate"] | — |
onVnodeUpdated | — | (AsamImageViewerProps)["onVnodeUpdated"] | — |
onVnodeBeforeUnmount | — | (AsamImageViewerProps)["onVnodeBeforeUnmount"] | — |
onVnodeUnmounted | — | (AsamImageViewerProps)["onVnodeUnmounted"] | — |
class | — | unknown | — |
style | — | unknown | — |
实例方法与状态 AsamImageViewerExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamImageViewerExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | AsamImageViewerProps | — |
$attrs | — | AsamImageViewerExpose["$attrs"] | — |
$refs | — | AsamImageViewerExpose["$refs"] | — |
$slots | — | AsamImageViewerSlots | — |
$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: "error", evt: Event) => void) & ((event: "close") => void) & ((event: "switch", index: number) => void) & ((event: "rotate", deg: number) => void) | — |
$el | — | any | — |
$options | — | (AsamImageViewerExpose)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamImageViewerExpose)["$nextTick"] | — |
$watch | — | (AsamImageViewerExpose)["$watch"] | — |
infinite | — | boolean | — |
scale | — | number | — |
initialIndex | — | number | — |
closeOnPressEscape | — | boolean | — |
zoomRate | — | number | — |
minScale | — | number | — |
maxScale | — | number | — |
urlList | — | string[] | — |
zIndex | 预览时遮罩层的 z-index | number | undefined | — |
teleported | image 自身是否插入至 body 元素上。嵌套的父元素属性会发生修改时应该将此属性设置为 true | boolean | undefined | — |
onError | — | ((evt: Event) => any) | undefined | — |
hideOnClickModal | 是否可以通过点击遮罩层关闭预览 | boolean | undefined | — |
showProgress | 显示预览进度内容。 | boolean | undefined | — |
crossorigin | 设置原生 HTML crossorigin 属性。 | enum"" | "anonymous" | "use-credentials"完整类型：AsamImageViewerCrossorigin | undefined | — |
onClose | — | (() => any) | undefined | — |
onSwitch | — | ((index: number) => any) | undefined | — |
onRotate | — | ((deg: number) => any) | undefined | — |
setActiveItem | 手动切换图片 | (index: number) => void | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamImageViewerExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamImageViewerExpose["$router"] | — |
类型 AsamImageViewerInstance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamImageViewerExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | AsamImageViewerProps | — |
$attrs | — | AsamImageViewerExpose["$attrs"] | — |
$refs | — | AsamImageViewerExpose["$refs"] | — |
$slots | — | AsamImageViewerSlots | — |
$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: "error", evt: Event) => void) & ((event: "close") => void) & ((event: "switch", index: number) => void) & ((event: "rotate", deg: number) => void) | — |
$el | — | any | — |
$options | — | (AsamImageViewerInstance)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamImageViewerInstance)["$nextTick"] | — |
$watch | — | (AsamImageViewerInstance)["$watch"] | — |
infinite | — | boolean | — |
scale | — | number | — |
initialIndex | — | number | — |
closeOnPressEscape | — | boolean | — |
zoomRate | — | number | — |
minScale | — | number | — |
maxScale | — | number | — |
urlList | — | string[] | — |
zIndex | 预览时遮罩层的 z-index | number | undefined | — |
teleported | image 自身是否插入至 body 元素上。嵌套的父元素属性会发生修改时应该将此属性设置为 true | boolean | undefined | — |
onError | — | ((evt: Event) => any) | undefined | — |
hideOnClickModal | 是否可以通过点击遮罩层关闭预览 | boolean | undefined | — |
showProgress | 显示预览进度内容。 | boolean | undefined | — |
crossorigin | 设置原生 HTML crossorigin 属性。 | enum"" | "anonymous" | "use-credentials"完整类型：AsamImageViewerCrossorigin | undefined | — |
onClose | — | (() => any) | undefined | — |
onSwitch | — | ((index: number) => any) | undefined | — |
onRotate | — | ((deg: number) => any) | undefined | — |
setActiveItem | 手动切换图片 | (index: number) => void | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamImageViewerExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamImageViewerExpose["$router"] | — |
插槽 AsamImageViewerSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
progress | — | (AsamImageViewerSlots)["progress"] | — |
toolbar | — | (AsamImageViewerSlots)["toolbar"] | — |
viewer-error | — | (AsamImageViewerSlots)["viewer-error"] | — |
default | — | (AsamImageViewerSlots)["default"] | — |
类型 AsamImageViewerAction
类型 AsamImageViewerCrossorigin
事件 AsamImageViewerEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
close | — | () => boolean | — |
error | — | (evt: Event) => boolean | — |
switch | — | (index: number) => boolean | — |
rotate | — | (deg: number) => boolean | — |
类型 AsamImageViewerMode
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
name | — | string | — |
icon | — | (AsamImageViewerMode)["icon"] | — |
类型 AsamImageViewerPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
zIndex | — | number | undefined | — |
teleported | — | boolean | undefined | — |
initialIndex | — | number | undefined | — |
hideOnClickModal | — | boolean | undefined | — |
infinite | — | (AsamImageViewerPropsPublic)["infinite"] | — |
closeOnPressEscape | — | (AsamImageViewerPropsPublic)["closeOnPressEscape"] | — |
zoomRate | — | number | undefined | — |
scale | — | number | undefined | — |
minScale | — | number | undefined | — |
maxScale | — | number | undefined | — |
showProgress | — | boolean | undefined | — |
crossorigin | — | enum"" | "anonymous" | "use-credentials"完整类型：(AsamImageViewerPropsPublic)["crossorigin"] | — |
urlList | — | string[] | undefined | — |
用法与契约补充说明
独立实例、缩放输入与关闭策略
ref<AsamImageViewerInstance>() 的公开 setActiveItem(index): void 用于手动切换。示例中的“ref：第二张”调用真实 Viewer ref 并显示返回类型；它与 toolbar scope 的 setActiveItem 分别展示。原生上一张/下一张在 infinite=false 时保留首尾边界，infinite=true 时按原生规则循环。
独立实例、缩放输入与关闭策略
scale 是父级输入，不是 v-model；2.14.7 没有 scale 或 update:scale 事件。改动输入值观察原生显示；初始/动态 scale 的限制及 toolbar 的缩放步长均由依赖处理，ASAM 不新增缩放算法。关闭事件由原生 close、Esc 或允许的遮罩点击触发，宿主在 close handler 中卸载；“父级卸载 Viewer”直接改变 v-if，不伪造 close 事件。
使用约定
urlList 提供图片数组，initialIndex 设置起始图片，infinite 控制循环，zoomRate/minScale/maxScale 控制缩放范围。close/switch/rotate 等事件反馈交互；插槽名称及参数以公开 Slots 为准。宿主用 v-if 管理预览器存在状态并处理 close。teleported 决定挂载位置，zIndex 决定层级。本入口没有控件密度 size。
更多参数与事件说明
独立实例、缩放输入与关闭策略
打开前可设置 urlList、initialIndex、teleported、zIndex、infinite、zoomRate、scale、minScale、maxScale、closeOnPressEscape、hideOnClickModal、showProgress；本例还透传原生 crossorigin。打开后，default 插槽中的控制区可以动态修改 scale、关闭开关和循环策略。
事件、插槽与职责拆分
图片本身的 load、lazy、placeholder、error 和 showPreview 属于 AsamImage；其 cap-image-preview、cap-custom-toolbar、cap-custom-progress、cap-load-failed 示例展示从图片打开预览的路径。本页 standalone 独立承接 Viewer 的 ref、scale、关闭策略以及 default/progress/toolbar/viewer-error，不能用 Image 的 toolbar slot 方法替代 Viewer ref 的证明。
关联组件
参数与事件补充说明
公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。
参数与事件说明
urlList
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：[]（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => mutable([] as const)（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 运行实测）
hideOnClickModal
必填：否；声明来源：上游声明。
hideOnClickModal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
teleported
必填：否；声明来源：上游声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（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"
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onClose
必填：否；声明来源：上游声明。
onClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): any
onError
必填：否；声明来源：上游声明。
onError 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): any
onRotate
必填：否；声明来源：上游声明。
onRotate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(deg: number): any
onSwitch
必填：否；声明来源：上游声明。
onSwitch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: 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
必填：否；声明来源：依赖声明。
AsamImageViewerProps 公开类型视图
import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamImageViewerProps, AsamImageViewerCrossorigin, AsamImageViewerExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamImageViewerProps
type PublicContract = {
readonly "urlList"?: string[] | undefined;
readonly "zIndex"?: number | undefined;
readonly "initialIndex"?: number | undefined;
readonly "infinite"?: boolean | undefined;
readonly "hideOnClickModal"?: boolean | undefined;
readonly "teleported"?: 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"?: AsamImageViewerCrossorigin | undefined;
readonly "onClose"?: (() => any) | undefined;
readonly "onError"?: ((evt: Event) => any) | undefined;
readonly "onRotate"?: ((deg: number) => any) | undefined;
readonly "onSwitch"?: ((index: number) => any) | undefined;
"key"?: PropertyKey | undefined;
"ref"?: VNodeRef | undefined;
"ref_for"?: boolean | undefined;
"ref_key"?: string | undefined;
"onVnodeBeforeMount"?: (AsamImageViewerProps)["onVnodeBeforeMount"];
"onVnodeMounted"?: (AsamImageViewerProps)["onVnodeMounted"];
"onVnodeBeforeUpdate"?: (AsamImageViewerProps)["onVnodeBeforeUpdate"];
"onVnodeUpdated"?: (AsamImageViewerProps)["onVnodeUpdated"];
"onVnodeBeforeUnmount"?: (AsamImageViewerProps)["onVnodeBeforeUnmount"];
"onVnodeUnmounted"?: (AsamImageViewerProps)["onVnodeUnmounted"];
"class"?: unknown;
"style"?: unknown;
};完整的上游实例，包含全部公开方法与响应式状态。
参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: "error", ...args: [evt: globalThis.Event]): void
事件参数完整签名见公开类型视图：((event: "error", evt: Event) => void) & ((event: "close") => void) & ((event: "switch", index: number) => void) & ((event: "rotate", deg: number) => void)。
事件参数：(event: "switch", ...args: [index: number]): void
事件参数：(event: "rotate", ...args: [deg: 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<(AsamImageViewerExpose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
infinite
必填：是；声明来源：上游声明。
infinite 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
scale
必填：是；声明来源：上游声明。
initialIndex
必填：是；声明来源：上游声明。
closeOnPressEscape
必填：是；声明来源：上游声明。
closeOnPressEscape 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
zoomRate
必填：是；声明来源：上游声明。
minScale
必填：是；声明来源：上游声明。
maxScale
必填：是；声明来源：上游声明。
urlList
必填：是；声明来源：上游声明。
urlList 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
zIndex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
teleported
必填：否；声明来源：上游声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
onError
必填：否；声明来源：上游声明。
onError 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): any
hideOnClickModal
必填：否；声明来源：上游声明。
hideOnClickModal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
showProgress
必填：否；声明来源：上游声明。
showProgress 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
crossorigin
必填：否；声明来源：上游声明。
crossorigin 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "anonymous" / "use-credentials"
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onClose
必填：否；声明来源：上游声明。
onClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): any
onSwitch
必填：否；声明来源：上游声明。
onSwitch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number): any
onRotate
必填：否；声明来源：上游声明。
onRotate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(deg: number): any
setActiveItem
必填：是；声明来源：上游声明。
setActiveItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number): void
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamImageViewerExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamImageViewerExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamImageViewerExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$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<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamImageViewerExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamImageViewerExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamImageViewerExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamImageViewerExpose["$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<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$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<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamImageViewerMode["name"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamImageViewerExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$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<AsamImageViewerExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamImageViewerExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamImageViewerExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamImageViewerExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamImageViewerExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamImageViewerExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamImageViewerExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamImageViewerExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$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<AsamImageViewerExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamImageViewerExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamImageViewerExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamImageViewerExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$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
AsamImageViewerExpose 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamImageViewerExpose, AsamTableColumnExpose, AsamImageViewerProps, AsamImageViewerSlots, AsamImageViewerCrossorigin, AsamImageViewerMode } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamImageViewerExpose
type PublicContract = {
"$": AsamImageViewerExpose["$"];
"$data": AsamTableColumnExpose;
"$props": AsamImageViewerProps;
"$attrs": AsamImageViewerExpose["$attrs"];
"$refs": AsamImageViewerExpose["$refs"];
"$slots": AsamImageViewerSlots;
"$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: "error", evt: Event) => void) & ((event: "close") => void) & ((event: "switch", index: number) => void) & ((event: "rotate", deg: number) => void);
"$el": any;
"$options": (AsamImageViewerExpose)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamImageViewerExpose)["$nextTick"];
"$watch": (AsamImageViewerExpose)["$watch"];
readonly "infinite": boolean;
readonly "scale": number;
readonly "initialIndex": number;
readonly "closeOnPressEscape": boolean;
readonly "zoomRate": number;
readonly "minScale": number;
readonly "maxScale": number;
readonly "urlList": string[];
readonly "zIndex"?: number | undefined;
readonly "teleported"?: boolean | undefined;
readonly "onError"?: ((evt: Event) => any) | undefined;
readonly "hideOnClickModal"?: boolean | undefined;
readonly "showProgress"?: boolean | undefined;
readonly "crossorigin"?: AsamImageViewerCrossorigin | undefined;
readonly "onClose"?: (() => any) | undefined;
readonly "onSwitch"?: ((index: number) => any) | undefined;
readonly "onRotate"?: ((deg: number) => any) | undefined;
"setActiveItem": (index: number) => void;
"$route": AsamImageViewerExpose["$route"];
"$router": AsamImageViewerExpose["$router"];
};参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: "error", ...args: [evt: globalThis.Event]): void
事件参数完整签名见公开类型视图：((event: "error", evt: Event) => void) & ((event: "close") => void) & ((event: "switch", index: number) => void) & ((event: "rotate", deg: number) => void)。
事件参数：(event: "switch", ...args: [index: number]): void
事件参数：(event: "rotate", ...args: [deg: 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<(AsamImageViewerInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
infinite
必填：是；声明来源：上游声明。
infinite 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
scale
必填：是；声明来源：上游声明。
initialIndex
必填：是；声明来源：上游声明。
closeOnPressEscape
必填：是；声明来源：上游声明。
closeOnPressEscape 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
zoomRate
必填：是；声明来源：上游声明。
minScale
必填：是；声明来源：上游声明。
maxScale
必填：是；声明来源：上游声明。
urlList
必填：是；声明来源：上游声明。
urlList 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
zIndex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
teleported
必填：否；声明来源：上游声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
onError
必填：否；声明来源：上游声明。
onError 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): any
hideOnClickModal
必填：否；声明来源：上游声明。
hideOnClickModal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
showProgress
必填：否；声明来源：上游声明。
showProgress 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
crossorigin
必填：否；声明来源：上游声明。
crossorigin 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "anonymous" / "use-credentials"
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
onClose
必填：否；声明来源：上游声明。
onClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): any
onSwitch
必填：否；声明来源：上游声明。
onSwitch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number): any
onRotate
必填：否；声明来源：上游声明。
onRotate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(deg: number): any
setActiveItem
必填：是；声明来源：上游声明。
setActiveItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number): void
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamImageViewerExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamImageViewerExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamImageViewerExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamImageViewerExpose["$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<AsamImageViewerExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamImageViewerExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamImageViewerExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamImageViewerExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamImageViewerExpose["$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<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$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<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamImageViewerMode["name"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamImageViewerExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamImageViewerExpose["$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<AsamImageViewerExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamImageViewerExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamImageViewerExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamImageViewerExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamImageViewerExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamImageViewerExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamImageViewerExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamImageViewerExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$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<AsamImageViewerExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamImageViewerExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamImageViewerExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamImageViewerExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamImageViewerExpose["$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
AsamImageViewerInstance 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamImageViewerInstance, AsamImageViewerExpose, AsamTableColumnExpose, AsamImageViewerProps, AsamImageViewerSlots, AsamImageViewerCrossorigin, AsamImageViewerMode } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamImageViewerInstance
type PublicContract = {
"$": AsamImageViewerExpose["$"];
"$data": AsamTableColumnExpose;
"$props": AsamImageViewerProps;
"$attrs": AsamImageViewerExpose["$attrs"];
"$refs": AsamImageViewerExpose["$refs"];
"$slots": AsamImageViewerSlots;
"$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: "error", evt: Event) => void) & ((event: "close") => void) & ((event: "switch", index: number) => void) & ((event: "rotate", deg: number) => void);
"$el": any;
"$options": (AsamImageViewerInstance)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamImageViewerInstance)["$nextTick"];
"$watch": (AsamImageViewerInstance)["$watch"];
readonly "infinite": boolean;
readonly "scale": number;
readonly "initialIndex": number;
readonly "closeOnPressEscape": boolean;
readonly "zoomRate": number;
readonly "minScale": number;
readonly "maxScale": number;
readonly "urlList": string[];
readonly "zIndex"?: number | undefined;
readonly "teleported"?: boolean | undefined;
readonly "onError"?: ((evt: Event) => any) | undefined;
readonly "hideOnClickModal"?: boolean | undefined;
readonly "showProgress"?: boolean | undefined;
readonly "crossorigin"?: AsamImageViewerCrossorigin | undefined;
readonly "onClose"?: (() => any) | undefined;
readonly "onSwitch"?: ((index: number) => any) | undefined;
readonly "onRotate"?: ((deg: number) => any) | undefined;
"setActiveItem": (index: number) => void;
"$route": AsamImageViewerExpose["$route"];
"$router": AsamImageViewerExpose["$router"];
};作用域插槽保留上游实例契约。
参数与事件说明
progress
必填：否；声明来源：上游声明。
progress 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { activeIndex: number;
/** Scoped slots retain the upstream instance contract. */
total: number; }): any
toolbar
必填：否；声明来源：上游声明。
toolbar 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: Parameters<Extract<NonNullable<(AsamImageViewerSlots)["toolbar"]>, (...args: never[]) => unknown>>[0]): any
viewer-error
必填：否；声明来源：上游声明。
viewer-error 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { activeIndex: number; src: string; }): any
default
必填：否；声明来源：上游声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: AsamTableColumnExpose): any
AsamImageViewerSlots 公开类型视图
import type { AsamImageViewerSlots, AsamImageViewerExpose, AsamTableColumnExpose } from '@asam-ui/ui';
// AsamImageViewerSlots
type PublicContract = {
"progress"?: (AsamImageViewerSlots)["progress"];
"toolbar"?: (AsamImageViewerSlots)["toolbar"];
"viewer-error"?: (AsamImageViewerSlots)["viewer-error"];
"default"?: (AsamImageViewerSlots)["default"];
readonly [key: string]: import("vue").Slot<any> | undefined;
};组合契约按分支生效；请同时查看公开类型。
AsamImageViewerAction 公开类型视图
import type { AsamImageViewerAction } from '@asam-ui/ui';
// AsamImageViewerAction
type PublicContract = AsamImageViewerAction;组合契约按分支生效；请同时查看公开类型。
AsamImageViewerCrossorigin 公开类型视图
import type { AsamImageViewerCrossorigin } from '@asam-ui/ui';
// AsamImageViewerCrossorigin
type PublicContract = AsamImageViewerCrossorigin;参数与事件说明
close
必填：是；声明来源：上游声明。
close 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): boolean
error
必填：是；声明来源：上游声明。
error 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(evt: Event): boolean
switch
必填：是；声明来源：上游声明。
switch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number): boolean
rotate
必填：是；声明来源：上游声明。
rotate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(deg: number): boolean
AsamImageViewerEmits 公开类型视图
import type { AsamImageViewerEmits, AsamImageViewerExpose } from '@asam-ui/ui';
// AsamImageViewerEmits
type PublicContract = {
"close": () => boolean;
"error": (evt: Event) => boolean;
"switch": (index: number) => boolean;
"rotate": (deg: number) => boolean;
};参数与事件说明
name
必填：是；声明来源：上游声明。
icon
必填：是；声明来源：上游声明。
icon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamImageViewerMode)["icon"]>, (...args: never[]) => unknown>>[1]): any
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
AsamImageViewerMode 公开类型视图
import type { AsamImageViewerMode, AsamImageViewerExpose } from '@asam-ui/ui';
// AsamImageViewerMode
type PublicContract = {
"name": string;
"icon": (AsamImageViewerMode)["icon"];
};参数与事件说明
zIndex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
teleported
必填：否；声明来源：上游声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
initialIndex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
hideOnClickModal
必填：否；声明来源：上游声明。
hideOnClickModal 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：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 运行实测）
urlList
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码工厂（未执行）：() => mutable([] as const)（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamImageViewerPropsPublic 公开类型视图
import type { AsamImageViewerPropsPublic, AsamImageViewerProps, AsamImageViewerCrossorigin } from '@asam-ui/ui';
// AsamImageViewerPropsPublic
type PublicContract = {
readonly "zIndex"?: number | undefined;
readonly "teleported"?: boolean | undefined;
readonly "initialIndex"?: number | undefined;
readonly "hideOnClickModal"?: boolean | undefined;
readonly "infinite"?: (AsamImageViewerPropsPublic)["infinite"];
readonly "closeOnPressEscape"?: (AsamImageViewerPropsPublic)["closeOnPressEscape"];
readonly "zoomRate"?: number | undefined;
readonly "scale"?: number | undefined;
readonly "minScale"?: number | undefined;
readonly "maxScale"?: number | undefined;
readonly "showProgress"?: boolean | undefined;
readonly "crossorigin"?: (AsamImageViewerPropsPublic)["crossorigin"];
readonly "urlList"?: string[] | undefined;
};