uni-app 门票日历选择器

界面:
uni-app 门票日历选择器_第1张图片

原始组件: uni-calendar
uni-app 门票日历选择器_第2张图片

pages/calendar/calendar.nvue

<template>
	···
	<view>
		<!-- 插入模式 -->
		<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" change="change" @monthSwitch="monthSwitch" />
	</view>
	···
</template>

<script>
	···
	data() {
   
		return {
   
			showCalendar: false,
			info: {
   
				lunar: true,
				range: true,
				insert: false,
				selected: []
			},
			priceDate: [
				{
   date:"2020-12-22",month:"12",days:"22",price:50,surplus:5},
				{
   date:"2020-12-23",month:"12",days:"23",price:60,surplus:12},
				{
   date:"2020-12-24",month:"12",days:"24",price:55,surplus:6},
				{
   date:"2020-12-25",month:"12",days:"25",

你可能感兴趣的:(uni-app,uni-app,前端)