<template>
|
<el-header>
|
<div class="left">
|
<el-divider direction="vertical" />
|
|
<!-- 导入 -->
|
<!-- <import-Json></import-Json> -->
|
<!-- <Divider type="vertical" /> -->
|
<!-- <import-file></import-file> -->
|
<!-- <Divider type="vertical" /> -->
|
<!-- <Button type="text" to="/template" target="_blank">全部模板</Button>
|
<Divider type="vertical" /> -->
|
|
<!-- <myTemplName></myTemplName> -->
|
<!-- 标尺开关 -->
|
<el-tooltip :content="'网格'">
|
<el-switch v-model="toggleModel" size="small" class="switch"></el-switch>
|
</el-tooltip>
|
<el-divider direction="vertical" />
|
<!-- <history></history> -->
|
</div>
|
|
<div class="center" v-if="templateImageList.length > 0">
|
<el-pagination
|
layout="prev, pager, next"
|
:page-count="templateImageList.length"
|
:current-page="templateEditState.currentImageIndex + 1"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
|
<div class="right">
|
<!-- <a href="https://pro.kuaitu.cc/" target="_blank" alt="商业版">
|
<img width="15" :src="proIcon" alt="vue-fbric-editor" />
|
</a> -->
|
<!-- 管理员模式 -->
|
<!-- <admin /> -->
|
<!-- 预览 -->
|
<!-- <previewCurrent /> -->
|
<!-- <waterMark /> -->
|
<saveV2></saveV2>
|
<!-- <login></login> -->
|
<!-- <lang></lang> -->
|
</div>
|
</el-header>
|
</template>
|
|
<script name="Top" setup lang="ts">
|
import history from '@/fabric-editor/components/history.vue';
|
import saveV2 from '@/fabric-editor/components/saveV2.vue';
|
import { useTemplateDetailContext, useCanvasActions } from '../../hooks/context';
|
|
const props = defineProps(['ruler']);
|
const emit = defineEmits(['update:ruler']);
|
|
const toggleModel = computed({
|
get() {
|
return props.ruler;
|
},
|
set(value) {
|
emit('update:ruler', value);
|
},
|
});
|
|
const { templateImageList, templateEditState } = useTemplateDetailContext();
|
const { toggleCanvas } = useCanvasActions();
|
|
function handleCurrentChange(val: number) {
|
toggleCanvas(val - 1);
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.left,
|
.right {
|
display: flex;
|
align-items: center;
|
|
img {
|
display: block;
|
margin-right: 10px;
|
}
|
}
|
|
.center {
|
display: flex;
|
align-items: center;
|
}
|
</style>
|
