67 lines
1.4 KiB
Vue
67 lines
1.4 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
tool: {
|
|
type: String,
|
|
default: 'brush',
|
|
},
|
|
});
|
|
const emit = defineEmits(['change-tool']);
|
|
|
|
const toolSelected = computed(() => props.tool);
|
|
|
|
const toolList = ref([
|
|
{ name: 'brush', title: '画笔', icon: 'icon-qianbi' },
|
|
{ name: 'eraser', title: '橡皮擦', icon: 'icon-xiangpi' },
|
|
{ name: 'clear', title: '清空', icon: 'icon-qingchu' },
|
|
{ name: 'undo', title: '撤销', icon: 'icon-chexiao' },
|
|
{ name: 'save', title: '保存', icon: 'icon-fuzhi' },
|
|
]);
|
|
|
|
function onChangeTool(tool) {
|
|
emit('change-tool', tool);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tools">
|
|
<button
|
|
v-for="item of toolList"
|
|
:class="{ active: toolSelected === item.name }"
|
|
:title="item.title"
|
|
@click="onChangeTool(item.name)"
|
|
>
|
|
<i :class="['iconfont', item.icon]"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tools button {
|
|
/* border-radius: 50%; */
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
border: 1px solid #eee;
|
|
outline: none;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
margin: 0 8px;
|
|
padding: 0;
|
|
text-align: center;
|
|
color: #ccc;
|
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.tools button.active,
|
|
.tools button:active {
|
|
/* box-shadow: 0 0 15px #00CCFF; */
|
|
color: #00ccff;
|
|
}
|
|
|
|
.tools button i {
|
|
font-size: 20px;
|
|
}
|
|
</style> |