uni-app 门票日历选择器

最新推荐文章于 2024-08-07 10:28:48 发布

qq_28404381

最新推荐文章于 2024-08-07 10:28:48 发布

阅读量1.3k

点赞数 1

分类专栏： uni-app 文章标签： uni-app 前端

本文链接：https://blog.csdn.net/qq_28404381/article/details/111560867

版权

本文介绍如何在uni-app中使用和自定义`uni-calendar`组件，包括在`pages/calendar/calendar.nvue`页面及`components/uni-calendar/uni-calendar-item.vue`组件中的应用。

摘要由CSDN通过智能技术生成

界面：
在这里插入图片描述

原始组件： uni-calendar
在这里插入图片描述

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",price:6