颜色选择器

lefengyang

2026-08-27 3701d6995db5ee2bc87c3ee606febd6544cf0ea4

颜色选择器

 ledApp/pages/addTemplate/addTemplate.vue

@@ -192,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>
            <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 +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:{},
@@ -604,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() {
@@ -1225,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;
        box-sizing: border-box;
        padding: 50rpx;
	
        .color_item {
            width: 30rpx;
            height: 30rpx;
            border-radius: 5rpx;
        }
    .color-picker-scroll {
        max-height: 90vh;
        box-sizing: border-box;
    }
    .color-picker-wrapper {
        zoom: 0.5;
        padding: 0 25%;
    }
    
    .action_btn {