颜色选择器

lefengyang

2026-08-27 c7bbc2936d13523042187b112e72ea9b5b5566a2

 ledApp/pages/addTemplate/addTemplate.vue

@@ -151,9 +151,10 @@

            <!-- 动画按钮 -->
            <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="changeRatio()"></uv-button> -->
               <uv-button type="primary" :plain="true" text="颜色" @click="changeColor()"></uv-button>
               <uv-button type="primary" :plain="true" text="左移" @click="shiftLeft()"></uv-button>
               <uv-button type="primary" :plain="true" text="下移" @click="shiftDown()"></uv-button>
               <uv-button type="primary" :plain="true" text="右移" @click="shiftRight()"></uv-button>
               <uv-button type="primary" :plain="true" text="文字" @click="addText()"></uv-button>
               <uv-button type="primary" :plain="true" text="清除" @click="clear()"></uv-button>
@@ -192,11 +193,21 @@
      <!-- 分辨率 -->
      <uv-picker ref="pickerRatio" :columns="columnsRatio" @confirm="confirmRatio"></uv-picker>
      
      <!-- 颜色 -->
      <!-- 颜色选择器 -->
      <uv-popup ref="pickerColor" mode="bottom" round="10" :closeable="true">
         <view class="color_list">
            <view class="color_item" v-for="(item, index) in colorList" :class="{ hover: color === item }" :key="index" :style="{ backgroundColor: item }" @click="clickColor(item)"></view>
         </view>
         <scroll-view scroll-y :show-scrollbar="false" class="color-picker-scroll">
            <view class="color-picker-wrapper">
               <view class="color-picker-inner">
                  <x-color-picker
                     v-model="color"
                     :show-alpha="false"
                     :save-history="true"
                     :options="pickerOptions"
                     @confirm="onColorConfirm"
                     @cancel="onColorCancel" />
               </view>
            </view>
         </scroll-view>
      </uv-popup>
      
      <!-- 添加文字弹窗 -->
@@ -304,17 +315,11 @@
            // columnsRatio: [
            //    ['12*24']
            // ],
            colorList: [
               '#FF0000',
               '#00FF00',
               '#0000FF',
               '#FFFF00',
               '#FFA500',
               '#800080',
               '#00FFFF',
               '#FFC0CB'
            ],
            fpsIndex: 0,
            color: '#FF0000',
            gridRect: null,
            pickerOptions: {
               width: 680,
            },
            fpsList: [],
            tId: '',
            tempInfo:{},
@@ -604,9 +609,11 @@
         changeColor() {
            this.$refs.pickerColor.open();
         },
         clickColor(item) {
            console.log('confirmColor---', item);
            this.color = item;
         onColorConfirm(colorObj) {
            this.color = colorObj.hex;
            this.$refs.pickerColor.close();
         },
         onColorCancel() {
            this.$refs.pickerColor.close();
         },
         changeRatio() {
@@ -724,6 +731,21 @@
               }
            }
         },
         shiftDown() {
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            const lastRowStart = (this.height - 1) * colCount
            const lastRow = this.pixelData.slice(lastRowStart, lastRowStart + colCount)
            for (let r = this.height - 1; r > 0; r--) {
               const currentStart = r * colCount
               const prevStart = (r - 1) * colCount
               for (let c = 0; c < colCount; c++) {
                  this.$set(this.pixelData, currentStart + c, this.pixelData[prevStart + c])
               }
            }
            for (let c = 0; c < colCount; c++) {
               this.$set(this.pixelData, c, lastRow[c])
            }
         },
         toggleControls() {
            this.showControls = !this.showControls;
         },
@@ -1225,20 +1247,17 @@
      justify-content: center;
      margin-bottom: 15rpx;
   }
   .color_list {
      width: 100%;
   .color_picker_wrapper {
      padding: 30rpx 0;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30rpx;
   }
   .color-picker-scroll {
      max-height: 90vh;
      box-sizing: border-box;
      padding: 50rpx;
	
      .color_item {
         width: 30rpx;
         height: 30rpx;
         border-radius: 5rpx;
      }
   }
   .color-picker-wrapper {
      //zoom: 0.5;
   }
   
   .action_btn {