亮度调节功能，宽高调节功能，

亮度调节功能组件bug修改

src/components/DragLine.vue

@@ -1,8 +1,7 @@
 <template>
   <div>
     <div class="slider" ref="slider">
-      <div class="process" :style="{ width: width + 'px' }"></div>
-
+      <div class="process" :style="{ width }"></div>
       <div class="thunk" ref="trunk" :style="{ left }">
         <div class="block"></div>
       </div>
@@ -22,7 +21,7 @@
  * */
 
 export default {
-  props: ["min", "max", "value", "width"],
+  props: ["min", "max", "value"],
 
   data() {
     return {
@@ -66,7 +65,7 @@ export default {
         _this.per = Math.max(_this.per, _this.min);
 
         _this.per = Math.min(_this.per, _this.max);
-
+        
         _this.$emit("input", _this.per);
       };
 
@@ -84,7 +83,13 @@ export default {
     // 对应公式为 当前值-最小值/最大值-最小值 = slider进度width / slider总width
 
     // trunk left = slider进度width + trunk宽度/2
-
+    width() {
+      if (this.slider) {
+        return this.slider.offsetWidth * this.scale + "px";
+      } else {
+        return 0 + "px";
+      }
+    },
     scale() {
       return (this.per - this.min) / (this.max - this.min);
     },

src/views/CalligraphyMaster/cread.vue

@@ -9,18 +9,43 @@
             <div>
               <span>长度</span>
               <el-input
-                v-model="form.width"
+                :readonly="true"
+                v-model="form.heightText"
                 style="width: 60px"
-                onkeyup="value=value.replace(/^0+(\d)|[^\d]+/g,'')"
               ></el-input>
+              <div class="add_remove">
+                <img
+                  @click="addCanvasWH('H')"
+                  src="../../assets/teacherdev/sfds-canvas-add.png"
+                  alt=""
+                />
+                <img
+                  @click="removeCanvasWH('H')"
+                  src="../../assets/teacherdev/sfds-canvas-remove.png"
+                  alt=""
+                />
+              </div>
             </div>
             <div>
+              <img src="../../assets/teacherdev/sfds-canvas-line.png" alt="" />
               <span>宽度</span>
               <el-input
-                v-model="form.height"
+                :readonly="true"
+                v-model="form.widthText"
                 style="width: 60px"
-                onkeyup="value=value.replace(/^0+(\d)|[^\d]+/g,'')"
               ></el-input>
+              <div class="add_remove">
+                <img
+                  @click="addCanvasWH('W')"
+                  src="../../assets/teacherdev/sfds-canvas-add.png"
+                  alt=""
+                />
+                <img
+                  @click="removeCanvasWH('W')"
+                  src="../../assets/teacherdev/sfds-canvas-remove.png"
+                  alt=""
+                />
+              </div>
             </div>
             <div>
               <span>背景颜色</span>
@@ -135,8 +160,14 @@
                 <img src="../../assets/teacherdev/font-right.png" alt="" />
               </div>
               <div class="img_dv" style="margin-left: 8px">
-                <img src="../../assets/teacherdev/font-line-left-right.png" alt="" />
-                <img src="../../assets/teacherdev/font-line-top-bottom.png" alt="" />
+                <img
+                  src="../../assets/teacherdev/font-line-left-right.png"
+                  alt=""
+                />
+                <img
+                  src="../../assets/teacherdev/font-line-top-bottom.png"
+                  alt=""
+                />
               </div>
               <div class="img_dv" style="margin-left: 8px">
                 <img src="../../assets/teacherdev/font-italic.png" alt="" />
@@ -146,15 +177,14 @@
           </template>
           <template v-else-if="changeType == 'luminance'">
             <div class="luminance-operation">
-              <img src="../../assets/teacherdev/sun.png" alt="" />
+              <img
+                :style="{ filter: `brightness(${changeluminanceNumber()})` }"
+                src="../../assets/teacherdev/sun.png"
+                alt=""
+              />
               <div class="line-text">
                 <div class="DragLine">
-                  <DragLine
-                    :min="-100"
-                    :max="100"
-                    :width="400"
-                    v-model="luminanceNumber"
-                  />
+                  <DragLine :min="-100" :max="100" v-model="luminanceNumber" />
                 </div>
                 <div class="text">
                   <span>-100</span>
@@ -210,8 +240,10 @@ export default {
     //这里存放数据
     return {
       form: {
-        width: "",
-        height: "",
+        width: 500,
+        widthText: "500mm",
+        height: 500,
+        heightText: "500mm",
         bg_color: "#FF3F3F",
       },
       BoutiqueFontList: [
@@ -307,6 +339,40 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 增加画布宽或高
+    addCanvasWH(type) {
+      if (type == "W") {
+        if (this.form.width == 500) {
+          this.$message.warning("已达到上限");
+          return;
+        }
+        this.form.width++;
+        this.form.widthText = this.form.width + "mm";
+      } else {
+        if (this.form.height == 500) {
+          this.$message.warning("已达到上限");
+          return;
+        }
+        this.form.height++;
+        this.form.heightText = this.form.height + "mm";
+      }
+    },
+    // 减少画布宽或高
+    removeCanvasWH(type) {
+      if (type == "W") {
+        if (this.form.width == 0) {
+          return;
+        }
+        this.form.width--;
+        this.form.widthText = this.form.width + "mm";
+      } else {
+        if (this.form.height == 0) {
+          return;
+        }
+        this.form.height--;
+        this.form.heightText = this.form.height + "mm";
+      }
+    },
     // 添加文字
     addText() {
       this.changeType = "text";
@@ -315,6 +381,17 @@ export default {
     changeluminance() {
       this.changeType = "luminance";
     },
+    // 计算css所需亮度
+    changeluminanceNumber() {
+      if (this.luminanceNumber == 0) {
+        return 1;
+      }
+      if (this.luminanceNumber > 0) {
+        return 1 + (this.luminanceNumber / 100) * 2;
+      } else {
+        return Math.abs(Math.abs(this.luminanceNumber) - 100) / 100;
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -364,6 +441,26 @@ export default {
             display: flex;
             align-items: center;
             margin-right: 8px;
+            > img {
+              width: 16px;
+              height: 16px;
+              margin-right: 8px;
+            }
+            .add_remove {
+              display: flex;
+              flex-wrap: wrap;
+              align-items: center;
+              width: 10px;
+              margin-left: 8px;
+              img {
+                width: 10px;
+                height: 10px;
+                cursor: pointer;
+              }
+              > :nth-child(1) {
+                margin-bottom: 1px;
+              }
+            }
           }
           span {
             margin-right: 8px;
@@ -570,6 +667,9 @@ export default {
 .CalligraphyMaster-cread {
   .main-top {
     .left {
+      .el-input__inner {
+        padding: 0 5px;
+      }
       .el-color-picker__color {
         border: none;
       }