uniapp 周選擇範圍時間

罗砂發表於2024-05-10
APP

css 使用 點選檢視下載css庫

css自定義的樣式:

/* 亮高 */
.box-blue {
    background-color: #409EFF;
    color: white;
    border-radius: 10rpx;
}
/* 中間連線 背景顏色 */
.bg-light-blue {
    width: 80rpx;
    height: 80rpx;
    background-color: #e7f2ff;
}

/* 中間未連線的 背景顏色 */
.bg-light-fff {
    width: 80rpx;
    height: 80rpx;
    background-color: #fff;
}

html

<!-- 一到七 -->
                <view class=" jh-w-p-100; jh-h-140;jh-flex;  jh-p-30" style="margin: 0 10%;">
                    <view v-for="(item,index) in numData" :key="index" class="jh-text-center; jh-l-h-80"
                        :class="index < maxNum && index > minNum ? 'bg-light-blue':'bg-light-fff'">
                        <view class=" jh-w-80; jh-h-80" :class="{ 'box-blue': numValue.indexOf(index)!=-1,  }"
                            :key="isKey" @click="numClick(item,index)">
                            {{item}}
                        </view>
                    </view>
                </view>

js

data資料:

// 選中的最小值
minNum: null,
// 選中的最大值
maxNum: null,
// 選中最多兩位數的 資料
numValue: [0, 4],
// 一到七
numData: ['一', '二', '三', '四', '五', '六', '日'],
在onLoad設定預設顯示
onLoad() {
            if (this.numValue.length == 2) {
                // 找出最小值
                this.minNum = Math.min(this.numValue[0], this.numValue[1]);
                // 找出最大值
                this.maxNum = Math.max(this.numValue[0], this.numValue[1]);
            }
        },

點選事件 methods：

// 點選一到七
            numClick(item, index) {
                if (this.numValue.length == 2) {
                    this.numValue = []
                    this.minNum = -1
                    this.maxNum = -1
                } else {
                    this.numValue.push(index)
                    if (this.numValue.length == 2) {
                        // 找出最小值
                        this.minNum = Math.min(this.numValue[0], this.numValue[1]);
                        // 找出最大值
                        this.maxNum = Math.max(this.numValue[0], this.numValue[1]);
                    }
                }
                console.log('this.numValue', this.numValue);
            },

相關文章