From 172199d84e17b2285aef2c1112fbed3c6f25f27c Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 26 六月 2024 19:51:22 +0800
Subject: [PATCH] 涂色题
---
src/components/graffiti/components/toolBtns.vue | 57 ++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 46 insertions(+), 11 deletions(-)
diff --git a/src/components/graffiti/components/toolBtns.vue b/src/components/graffiti/components/toolBtns.vue
index aad1a3f..83e91d7 100644
--- a/src/components/graffiti/components/toolBtns.vue
+++ b/src/components/graffiti/components/toolBtns.vue
@@ -5,9 +5,15 @@
:key="index"
:class="{ active: toolSelected === item.name }"
:title="item.title"
- @click="onChangeTool(item.name)"
+ @click="onChangeTool(item.name, index)"
+ :style="{ boxShadow: index == num ? '0 0 15px #00ccff' : '' }"
>
- <i :class="['iconfont', item.icon]"></i>
+ <img
+ :src="item.icon"
+ alt=""
+ class="giaffiti-btn"
+ :style="{ width: index == 0 ? '18px' : '' }"
+ />
</button>
</div>
</template>
@@ -20,24 +26,46 @@
default: "brush",
},
},
- computed:{
+ computed: {
toolSelected() {
- return this.tool
- }
+ return this.tool;
+ },
},
data() {
return {
toolList: [
- { 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" },
+ {
+ name: "brush",
+ title: "鐢荤瑪",
+ icon: require("@/assets/images/brush.png"),
+ },
+ {
+ name: "eraser",
+ title: "姗＄毊鎿�",
+ icon: require("@/assets/images/rubber.png"),
+ },
+ {
+ name: "clear",
+ title: "娓呯┖",
+ icon: require("@/assets/images/scrub.png"),
+ },
+ {
+ name: "undo",
+ title: "鎾ら攢",
+ icon: require("@/assets/images/revoke.png"),
+ },
+ {
+ name: "save",
+ title: "淇濆瓨",
+ icon: require("@/assets/images/save.png"),
+ },
],
+ num: 0,
};
},
methods: {
- onChangeTool(tool) {
+ onChangeTool(tool, index) {
+ if (index == 0 || index == 1) this.num = index;
this.$emit("change-tool", tool);
},
},
@@ -45,6 +73,10 @@
</script>
<style scoped>
+.tools {
+ display: flex;
+ align-items: center;
+}
.tools button {
/* border-radius: 50%; */
width: 32px;
@@ -71,4 +103,7 @@
.tools button i {
font-size: 20px;
}
+.giaffiti-btn {
+ width: 24px;
+}
</style>
--
Gitblit v1.9.1