From 6aac0dd9c6d6bd3de148f3d6e123f9c91b1aab4b Mon Sep 17 00:00:00 2001 From: user1 <10901603+no-distractions1@user.noreply.gitee.com> Date: 星期二, 02 七月 2024 09:31:04 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/components/graffiti/components/brushSize.vue | 22 +++++++++++++++++----- 1 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/graffiti/components/brushSize.vue b/src/components/graffiti/components/brushSize.vue index 52d103b..ec5043a 100644 --- a/src/components/graffiti/components/brushSize.vue +++ b/src/components/graffiti/components/brushSize.vue @@ -1,15 +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)" /> - <el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker> + </div> + + <!-- <el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker> --> + <div> + <input type="color" v-model="checkColor" @input="onChangeColor"> + </div> + </div> </template> @@ -32,8 +40,8 @@ } }, methods:{ - onChangeColor(color) { - this.$emit("change-color", color); + onChangeColor(e) { + this.$emit("change-color", e.srcElement.value); }, } }; @@ -41,9 +49,13 @@ // const brushSize = computed(() => props.size); </script> <style lang="less" scoped> +.brushSize { + display: flex; +} .wrap-range { display: flex; align-items: center; + margin-right: 10px; .el-color-picker { margin-left: 20px; } -- Gitblit v1.9.1