涂色题

闫增涛

2024-06-26 172199d84e17b2285aef2c1112fbed3c6f25f27c

 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>