woRangeSelector是一款范围选择器,可用于时间选择器,段落选择器等应用场景

采用uniapp-vue3实现, 是一款支持范围选择的组件,支持H5、微信小程序(其他小程序未测试过,可自行尝试)

可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id=16686

  • 使用示例

请添加图片描述

<template>
	<view>
		<view class="card">
			<view class="title">示例-时间段选择(携带副标题){{ state.selectedTime1 }}</view>
			<wo-range-selector @change-time="onChangeTime1" v-model:selected-time="state.defaultValue" v-model:options="state.timeNumberList1"></wo-range-selector>
			<view class="title">示例-时间段选择:</view>
			<wo-range-selector v-model:selected-time="state.defaultValue" v-model:options="state.timeNumberList2"></wo-range-selector>
			<view class="title">示例-日期预约:</view>
			<wo-range-selector v-model:selected-time="state.defaultValue" v-model:options="state.timeNumberList3"></wo-range-selector>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	const generateArray = (start: number, end: number) => {
	  return Array.from(new Array(end + 1).keys()).slice(start);
	};
	const genTestOptions1 = () => {
		const disabledList = [0, 1, 2, 3, 4, 13, 14]
		const timeOptions = [];
		const allNumber = generateArray(0, 23);
		allNumber.forEach((item) => {
		  if (disabledList.includes(item)) {
		    timeOptions.push({
		      disabled: true,
		      label: `${item}:00`,
					subtitle: `${item + 1}:00`,
					value: item
		    });
		  } else {
		    timeOptions.push({
		      disabled: false,
		      label: `${item}:00`,
		      subtitle: `${item + 1}:00`,
					value: item
		    });
		  }
		});
		return timeOptions
	}
	const genTestOptions2 = () => {
		const timeOptions = [];
		const allNumber = generateArray(0, 23);
		allNumber.forEach((item, index) => {
		  timeOptions.push({
		    disabled: false,
		    label: `${item}:00`,
		  	value: item
		  });
		});
		return timeOptions
	}
	const genTestOptions3 = () => {
		const disabledList = [4, 5, 6, 13, 14, 15]
		const timeOptions = [];
		const allNumber = generateArray(1, 30);
		allNumber.forEach((item, index) => {
		  if (disabledList.includes(item)) {
		    timeOptions.push({
		      disabled: true,
		      label: item,
					subtitle: '约满',
					value: item
		    });
		  } else {
		    timeOptions.push({
		      disabled: false,
		      label: item,
		      subtitle: '预约',
					value: item
		    });
		  }
		});
		return timeOptions
	}
	const state = reactive({
	  defaultValue: [9, 11] as any[],
		timeNumberList1: genTestOptions1(),
		timeNumberList2: genTestOptions2(),
		timeNumberList3: genTestOptions3(),
	  nowDay: new Date(),
		selectedTime1: [9, 11] as any[],
	});
	const onChangeTime1 = (e: any) => {
	  if (e.length) {
	    state.selectedTime1 = e;
	  }
	};
</script>

<style lang="scss" scoped>
	.card {
		margin: 20rpx;
		.title {
			margin-top: 40rpx;
			font-size: 28rpx;
			font-weight: 600;
			padding: 20rpx;
		}
	}
</style>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狼性书生

谢谢鼓励!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值