按钮收回

lefengyang

2026-08-16 8fd32e992f0fe12a81712aea90513bf6a5fa2790

 ledApp/pages/addTemplate/addTemplate.vue

@@ -127,8 +127,13 @@
            <view class="back_btn" @click="popupAnimationClose">
               <uv-icon name="arrow-leftward" color="#333" size="30"></uv-icon>
            </view>
            <!-- 操作按钮 -->
            <view class="controls" style="left: 30rpx;">
               <uv-button type="primary" :plain="true" :text="showControls ? '收回' : '操作'" @click="toggleControls"></uv-button>
            </view>

            <!-- 动画按钮 -->
            <view class="controls">
            <view class="controls" v-if="showControls">
               <uv-button type="primary" :plain="true" text="分辨率" @click="changeRatio()"></uv-button>
               <uv-button type="primary" :plain="true" text="颜色" @click="changeColor()"></uv-button>
               <uv-button type="primary" :plain="true" text="添加文字" @click="addText()"></uv-button>
@@ -255,7 +260,8 @@
            previewFrameIndex: 0,
            previewTimer: null,
            previewWidth: 24,
            previewHeight: 12
            previewHeight: 12,
            showControls: false
            
         }
      },
@@ -584,6 +590,9 @@
            // 将所有像素点设置为空字符串
            this.pixelData = new Array(this.height * this.width).fill('')
         },
         toggleControls() {
            this.showControls = !this.showControls;
         },
         // 模版动画弹出框
         changeAnimation(e){
            //console.log('打开关闭模版动画弹窗触发---',e)
@@ -764,7 +773,7 @@
               ctx = uni.createCanvasContext('myCanvas', this);
         
               // 设置字体样式
               ctx.setFontSize(this.canvasHeight * 0.9);
               ctx.setFontSize(this.canvasHeight);
               ctx.setFillStyle('#000')
               ctx.setTextAlign('center')
               ctx.setTextBaseline('middle')
@@ -773,7 +782,7 @@
               // 水平居中
               const x = this.canvasWidth / 2;
               // 垂直居中，稍微向上偏移一点
               const y = this.canvasHeight / 2;
               const y = this.canvasHeight / 2 + 10;
         
               // 绘制文字
               ctx.fillText(char, x, y);
@@ -903,7 +912,8 @@
         startPreviewAnimation() {
            this.stopPreviewAnimation();
            if (!this.speed || this.speed <= 0 || this.previewFrames.length === 0) return;
            const interval = 1000 / this.speed;
            const interval = this.speed * 2.8;
            console.log('interval', interval)
            this.previewTimer = setInterval(() => {
               this.previewFrameIndex = (this.previewFrameIndex + 1) % this.previewFrames.length;
            }, interval);
@@ -981,10 +991,20 @@
      }
   }
   
   .controls {
   .action_btn {
      position: absolute;
      bottom: 10px;
      left: 50px;
      z-index: 10;
      background: linear-gradient(142deg, #6FD2FF 0%, #268DFF 100%);
      padding: 12px 24px;
      border-radius: 30px;
      box-shadow: 0 4px 12px rgba(38, 141, 255, 0.4);
   }
   .controls {
      position: absolute;
      bottom: 10px;
      left: 130px;
      display: flex;
      gap: 20px;
      z-index: 9;