颜色选择器

lefengyang

2026-08-27 3701d6995db5ee2bc87c3ee606febd6544cf0ea4

 ledApp/pages/addTemplate/addTemplate.vue

@@ -37,7 +37,11 @@
            </view>
            <view class="item">
               <uv-radio-group v-model="selectedPreset" placement="column" @change="changePreset" labelSize="26rpx">
                  <uv-radio class="spec_radio" v-for="(item, index) in presetList" :key="index" :label="'预制动画：'+item.name"
                  <uv-radio
                     class="spec_radio"
                     v-for="(item, index) in presetList"
                     :key="index"
                     :label="'预制动画：'+item.name+'（'+item.fpsTotal+'帧）'"
                     :name="item.name">
                  </uv-radio>
               </uv-radio-group>
@@ -103,6 +107,7 @@
            </view>
            <view class="item">
               <uv-button text="编辑" @click="popupAnimationOpen(index)" shape="circle" size="small" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)"></uv-button>
               <uv-button text="复制" @click="copyFrame(index)" shape="circle" size="small" color="linear-gradient( 142deg, #FFB347 0%, #FF8C00 100%)"></uv-button>
            </view>
         </view>
      </view>
@@ -187,11 +192,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>
      
      <!-- 添加文字弹窗 -->
@@ -299,17 +314,11 @@
            // columnsRatio: [
            //    ['12*24']
            // ],
            colorList: [
               '#FF0000',
               '#00FF00',
               '#0000FF',
               '#FFFF00',
               '#FFA500',
               '#800080',
               '#00FFFF',
               '#FFC0CB'
            ],
            fpsIndex: 0,
            color: '#FF0000',
            gridRect: null,
            pickerOptions: {
               width: '50%',
            },
            fpsList: [],
            tId: '',
            tempInfo:{},
@@ -599,9 +608,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() {
@@ -761,6 +772,26 @@
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            this.pixelData = new Array(this.height * colCount).fill('')
         },
         // 复制当前帧
         copyFrame(index) {
            uni.showModal({
               title: '提示',
               content: '确定要复制当前帧吗？',
               success: (res) => {
                  if (res.confirm) {
                     const source = this.fpsList[index];
                     const copy = source ? [...source] : null;
                     this.fpsList.splice(index + 1, 0, copy);
                     this.total = this.fpsList.length;
                     uni.showToast({
                        title: '复制成功',
                        icon: 'success',
                        duration: 1500
                     });
                  }
               }
            });
         },
         // 屏幕规格
         changeSpec(e) {
            const ratio = e.split('*');
@@ -1200,20 +1231,18 @@
      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;
      padding: 0 25%;
   }
   
   .action_btn {
@@ -1399,7 +1428,11 @@

         }

         .item {}
         .item {
            flex-direction:row;
            gap:20rpx;
            display:flex;
         }
      }

      .temp_item {