<template>
|
<div style="display: inline-block">
|
<!-- 后退 -->
|
<el-tooltip :content="'撤销' + `(${canUndo})`">
|
<el-button @click="undo" text size="small" :disabled="!canUndo">
|
<el-icon :size="20"><DArrowLeft /></el-icon>
|
</el-button>
|
</el-tooltip>
|
|
<!-- 重做 -->
|
<el-tooltip :content="'重做' + `(${canRedo})`">
|
<el-button @click="redo" text size="small" :disabled="!canRedo">
|
<el-icon :size="20"><DArrowRight /></el-icon>
|
</el-button>
|
</el-tooltip>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import useSelect from '@/fabric-editor/hooks/select';
|
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
|
const { canvasEditor } = useSelect() as { canvasEditor: any };
|
const canUndo = ref(0);
|
const canRedo = ref(0);
|
// 后退
|
const undo = () => {
|
canvasEditor.undo();
|
};
|
// 重做
|
const redo = () => {
|
canvasEditor.redo();
|
};
|
|
onMounted(() => {
|
canvasEditor.on('historyUpdate', (canUndoParam: number, canRedoParam: number) => {
|
canUndo.value = canUndoParam;
|
canRedo.value = canRedoParam;
|
});
|
});
|
</script>
|
|
<style scoped lang="scss">
|
span.active {
|
svg.icon {
|
fill: #2d8cf0;
|
}
|
}
|
|
.time {
|
color: #c1c1c1;
|
}
|
</style>
|
|
<script lang="ts">
|
export default {
|
name: 'ToolBar',
|
};
|
</script>
|
