35 lines
852 B
Vue
35 lines
852 B
Vue
<template>
|
|
<el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px">
|
|
<el-button link @click="zoomOut">
|
|
<el-icon :size="16" title="缩小"><ZoomOut /></el-icon>
|
|
</el-button>
|
|
<el-button link @click="zoomIn">
|
|
<el-icon :size="16" title="放大"><ZoomIn /></el-icon>
|
|
</el-button>
|
|
|
|
<el-divider direction="vertical" />
|
|
<el-button link @click="fitView">
|
|
<AppIcon iconName="app-fitview" title="适应"></AppIcon>
|
|
</el-button>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
lf: Object || String || null
|
|
})
|
|
|
|
function zoomIn() {
|
|
props.lf?.zoom(true, [0, 0])
|
|
}
|
|
function zoomOut() {
|
|
props.lf?.zoom(false, [0, 0])
|
|
}
|
|
function fitView() {
|
|
props.lf?.resetZoom()
|
|
props.lf?.resetTranslate()
|
|
props.lf?.fitView()
|
|
}
|
|
</script>
|
|
<style scoped></style>
|