From c8d1e1ed1d5c8d20a9aad8554d51001afb3c6312 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 20 十一月 2024 15:28:27 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TextbookReader
---
src/components/graffiti/components/toolBtns.vue | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 106 insertions(+), 0 deletions(-)
diff --git a/src/components/graffiti/components/toolBtns.vue b/src/components/graffiti/components/toolBtns.vue
new file mode 100644
index 0000000..9f608cd
--- /dev/null
+++ b/src/components/graffiti/components/toolBtns.vue
@@ -0,0 +1,106 @@
+<template>
+ <div class="tools">
+ <button v-for="(item, index) of toolList" :key="index" :class="{ active: toolSelected === item.name }"
+ :title="item.title" @click="onChangeTool(item.name, index)"
+ :style="{ boxShadow: index == num ? '0 0 15px #00ccff' : '' }">
+ <img :src="item.icon" alt="" class="giaffiti-btn" :style="{ width: index == 0 ? '18px' : '' }" />
+ </button>
+ </div>
+</template>
+
+<script>
+ import brush from '@/assets/images/graffiti/brush.png'
+ import rubber from '@/assets/images/graffiti/rubber.png'
+ import scrub from '@/assets/images/graffiti/scrub.png'
+ import revoke from '@/assets/images/graffiti/revoke.png'
+ import save from '@/assets/images/graffiti/save.png'
+ export default {
+ props: {
+ tool: {
+ type: String,
+ default: "brush",
+ },
+ },
+ computed: {
+ toolSelected() {
+ return this.tool;
+ },
+ },
+ data() {
+ return {
+ toolList: [
+ {
+ name: "brush",
+ title: "鐢荤瑪",
+ icon: brush,
+ },
+ {
+ name: "eraser",
+ title: "姗＄毊鎿�",
+ icon: rubber,
+ },
+ {
+ name: "clear",
+ title: "娓呯┖",
+ icon: scrub,
+ },
+ {
+ name: "undo",
+ title: "鎾ら攢",
+ icon: revoke,
+ },
+ {
+ name: "save",
+ title: "淇濆瓨",
+ icon: save,
+ },
+ ],
+ num: 0,
+ };
+ },
+ methods: {
+ onChangeTool(tool, index) {
+ if (index == 0 || index == 1) this.num = index;
+ this.$emit("change-tool", tool);
+ },
+ },
+ };
+</script>
+
+<style scoped>
+ .tools {
+ display: flex;
+ align-items: center;
+ }
+
+ .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;
+ }
+
+ .giaffiti-btn {
+ width: 24px;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.1