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/brushSize.vue | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 113 insertions(+), 0 deletions(-)
diff --git a/src/components/graffiti/components/brushSize.vue b/src/components/graffiti/components/brushSize.vue
new file mode 100644
index 0000000..ec5043a
--- /dev/null
+++ b/src/components/graffiti/components/brushSize.vue
@@ -0,0 +1,113 @@
+<template>
+ <div class="brushSize">
+ <!-- 涓轰簡涓嶅湪瀛愮粍浠朵腑鍙樻洿鍊硷紝涓嶇敤v-model -->
+ <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>
+
+<script>
+export default {
+ props: {
+ size: {
+ type: Number,
+ default: 5,
+ },
+ },
+ computed:{
+ 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 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;
+ margin: 0;
+ transform-origin: 75px 75px;
+ border-radius: 15px;
+ -webkit-appearance: none;
+ appearance: none;
+ outline: none;
+ position: relative;
+}
+
+.wrap-range input::after {
+ display: block;
+ content: "";
+ width: 0;
+ height: 0;
+ border: 5px solid transparent;
+ border-right: 150px solid #00ccff;
+ border-left-width: 0;
+ position: absolute;
+ left: 0;
+ top: 5px;
+ border-radius: 15px;
+ z-index: 0;
+}
+
+.wrap-range input[type="range"]::-webkit-slider-thumb,
+.wrap-range input[type="range"]::-moz-range-thumb {
+ -webkit-appearance: none;
+}
+
+.wrap-range input[type="range"]::-webkit-slider-runnable-track,
+.wrap-range input[type="range"]::-moz-range-track {
+ height: 10px;
+ border-radius: 10px;
+ box-shadow: none;
+}
+
+.wrap-range input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ height: 20px;
+ width: 20px;
+ margin-top: -1px;
+ background: #ffffff;
+ border-radius: 50%;
+ box-shadow: 0 0 8px #00ccff;
+ position: relative;
+ z-index: 999;
+}
+</style>
--
Gitblit v1.9.1