LimeDateStrip 日期横条

• 用于展示周日历或一组日历信息
• 插件依赖lime-style,lime-shared不喜勿下

安装

导入即可，首次可能需要重新编译

代码演示

基础用法

通过v-model可以绑定选择的日历

<l-date-strip v-model="value" @change="onChange"></l-date-strip>

const value = new Date().getTime()

const onChange = (time: number) => {
	
}

切换方式

默认是以周为周期（swiper）的切换方式，通过switchMode设置为none可以换成scroll-view,这时是从minDate到maxDate的所有日期。

<l-date-strip switchMode="none" :minDate="minDate" :maxDate="maxDate"></l-date-strip>

const minDate: new Date(2022, 0, 10).getTime()
const maxDate: new Date(2027, 10, 27).getTime()

选中样式

通过 shape 可以设置为选中框的形状，可选值有:circle,square,none。

<l-date-strip shape="circle"></l-date-strip>

自定义样式

通过 bgColor 可以设置背景色，activeBgColor可设置选中的背景色。

<l-date-strip bgColor="yellow" activeBgColor="#000" ></l-date-strip>

自定义日期文案

通过传入 format 函数来对日历上每一格的内容进行格式化。

<l-date-strip :format="customFormat"></l-date-strip>

// uniapp 不需要设置类型
import { Day } from '@/uni_modules/lime-date-strip';
const customFormat = (day : Day) : Day => {
	const { date } = day;
	const year = date.getFullYear();
	const month = date.getMonth() + 1;
	const curDate = date.getDate();

	day.suffix = '¥60';

	if (year == 2025) {
		if (month == 2) {
			const map = new Map<number, string>([
				[1, '初一'],
				[2, '初二'],
				[3, '初三'],
				[14, '情人节'],
				[15, '元宵节'],
			])
			if (map.has(curDate)) {
				day.prefix = map.get(curDate)!;
				day.suffix = '¥100';
			}
		}
	}

	return day;
};

查看示例

• 导入后直接使用这个标签查看演示效果

 // 代码位于 uni_modules/lime-date-strip/compoents/lime-date-strip 
<lime-date-strip />

插件标签

• 默认 l-date-strip 为 component
• 默认 lime-date-strip 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Props

参数	说明	类型	默认值
v-modle	选中的日期	number	``
defaultValue	选中的日期	number	``
value	选中的日期	number	``
switchMode	切换模式： none 平铺展示所有日期，不展示切换按钮， week 按周方式切换	string	week
shape	选中框形状： square 方块，包含星期和日期， circle 圆形，只包含日期， none 文本高亮	string	square
minDate	可选择的最小日期	number
maxDate	可选择的最大日期	number	当前日期的31天
height	插件高度	string
gridWidth	每格日期宽度，仅switchMode为none生效	string
activeBgColor	选中框背景色	string
activeColor	选中框文本色	string
bgColor	横条背景色	string
radius	选中框圆角	string
firstDayOfWeek	第一天从星期几开始，默认 0 = 周日	0-6	0

Events

事件名	说明	回调参数
change	点击时触发	event: number
select	点击时触发	event: number

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。

名称	默认值	描述
--l-date-strip-bg-color:	$bg-color-container	-
--l-date-strip-height:	86px	-
--l-date-strip-padding:	8px 0	-
--l-date-strip-font-size:	16px	-
--l-date-strip-color:	$text-color-1	-
--l-date-strip-prefix-color:	$text-color-3	-
--l-date-strip-prefix-font-size:	14px	-
--l-date-strip-suffix-color:	$text-color-2	-
--l-date-strip-suffix-font-size:	12px	-
--l-date-strip-active-color:	$primary-color	-
--l-date-strip-square-radius:	5px	-
--l-date-strip-grid-width:	50px	-
--l-date-strip-grid-square-padding:	6px 0	-
--l-date-strip-grid-circle-radius:	99px	-

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码