61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<template>
|
|
<div class="LayerControl">
|
|
<a-button type="primary" class="blue line-up" @click="drawClick" :icon="h(EditOutlined)"
|
|
>绘制</a-button
|
|
>
|
|
<a-button type="primary" class="blue line-up" :icon="h(FormOutlined)">编辑</a-button>
|
|
<a-button type="primary" class="blue last-line-up" :icon="h(BlockOutlined)">合并</a-button>
|
|
<a-button type="primary" class="orange line-up" :icon="h(SplitCellsOutlined)">分割</a-button>
|
|
<a-button type="primary" class="orange last-line-up" :icon="h(DeleteOutlined)">删除</a-button>
|
|
<a-button type="primary" class="green line-up" :icon="h(DragOutlined)">移动</a-button>
|
|
<a-button type="primary" class="green line-up" :icon="h(RollbackOutlined)">撤回</a-button>
|
|
<a-button type="primary" class="green" :icon="h(CloseCircleOutlined)">取消</a-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
EditOutlined,
|
|
FormOutlined,
|
|
BlockOutlined,
|
|
SplitCellsOutlined,
|
|
DragOutlined,
|
|
DeleteOutlined,
|
|
RollbackOutlined,
|
|
CloseCircleOutlined,
|
|
} from '@ant-design/icons-vue';
|
|
import { h } from 'vue';
|
|
const emit = defineEmits(['draw']);
|
|
function drawClick() {
|
|
emit('draw');
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.LayerControl {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 386px;
|
|
background-color: #fff;
|
|
padding: 13px 13px 8px 13px;
|
|
button {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
.blue {
|
|
background-color: #0081ff;
|
|
}
|
|
.orange {
|
|
background-color: #ff8a48;
|
|
}
|
|
.green {
|
|
background-color: #09b66d;
|
|
}
|
|
.line-up {
|
|
margin-right: 10px;
|
|
}
|
|
.last-line-up {
|
|
margin-right: 15px;
|
|
}
|
|
</style>
|