first

components/my-components/my-time-area-pickerview.vue

@@ -0,0 +1,49 @@
+<template>
+	<myPickerview :list="list" :isLink="false" @confirm="confirm" ref="picker"></myPickerview>
+</template>
+
+<script setup>
+	import {
+		reactive,
+		ref
+	} from "vue";
+	import myPickerview from './my-pickerview'
+	const picker = ref(null)
+	function generateString(length, char) {
+	    return char.repeat(length);
+	}
+	function createNumberArr(len) {
+		return new Array(len).fill(1).map((v, index) => {
+			return `${generateString(`${len}`.length-1,'0')}${index}`.slice(-2)
+		})
+	}
+
+	const $HOURS =createNumberArr(24)
+	const $MINUTES = createNumberArr(60)
+	const list = reactive(
+		[
+			$HOURS,
+			[':'],
+			$MINUTES,
+			['至'],
+			$HOURS,
+			[':'],
+			$MINUTES
+		]
+	)
+	const emits=defineEmits(['confirm'])
+
+	function open() {
+		picker.value.open()
+	}
+	function confirm(e){
+		const val=e.join('').replace('至','-')
+		emits('confirm',val)
+	}
+	defineExpose({
+		open
+	})
+</script>
+
+<style lang="scss" scoped>
+</style>