From 68eaac35edcdd45eba10cb3bff98839bd2ed1a97 Mon Sep 17 00:00:00 2001
From: litian <2804272236@qq.com>
Date: 星期五, 21 二月 2025 09:28:44 +0800
Subject: [PATCH] xueqianjiaoyu
---
src/components/graffiti/components/brushSize.vue | 36 +++++++++++++++++++++++++++++++++---
1 files changed, 33 insertions(+), 3 deletions(-)
diff --git a/src/components/graffiti/components/brushSize.vue b/src/components/graffiti/components/brushSize.vue
index 9c47a7c..ec5043a 100644
--- a/src/components/graffiti/components/brushSize.vue
+++ b/src/components/graffiti/components/brushSize.vue
@@ -1,14 +1,23 @@
<template>
- <div class="wrap-range">
+ <div class="brushSize">
<!-- 涓轰簡涓嶅湪瀛愮粍浠朵腑鍙樻洿鍊硷紝涓嶇敤v-model -->
- <input
+ <div class="wrap-range">
+ <input
type="range"
:value="brushSize"
min="1"
max="30"
title="璋冩暣绗斿埛绮楃粏"
+ class="input-brush"
@change="(event) => $emit('change-size', +event.target.value)"
/>
+ </div>
+
+ <!-- <el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker> -->
+ <div>
+ <input type="color" v-model="checkColor" @input="onChangeColor">
+ </div>
+
</div>
</template>
@@ -24,12 +33,33 @@
brushSize() {
return this.size
}
+ },
+ data() {
+ return {
+ checkColor:"#000000"
+ }
+ },
+ methods:{
+ onChangeColor(e) {
+ this.$emit("change-color", e.srcElement.value);
+ },
}
};
// const brushSize = computed(() => props.size);
</script>
-<style scoped>
+<style lang="less" scoped>
+.brushSize {
+ display: flex;
+}
+.wrap-range {
+ display: flex;
+ align-items: center;
+ margin-right: 10px;
+ .el-color-picker {
+ margin-left: 20px;
+ }
+}
.wrap-range input {
width: 150px;
height: 20px;
--
Gitblit v1.9.1