tui-week-date 周日期选择 会员组件

介绍

周日期选择，可指定显示日期。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiWeekDate from "@/components/thorui/tui-week-date/tui-week-date.vue"
export default {
	components:{
		tuiWeekDate
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "navigationBarTitleText": "周日期选择",
  "usingComponents": {
    "tui-week-date": "/components/thorui/tui-week-date/tui-week-date"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

<!--uni-app-->
<tui-week-date @click="dateClick"></tui-week-date>

<!--微信小程序-->
<tui-week-date bindclick="dateClick"></tui-week-date>

dateClick(e) {
	console.log(e)
}

调整样式

<!--uni-app-->
<tui-week-date activeBackground="#eb0909" :arrow="false" @click="dateClick">
	<template v-slot:left>
		<tui-icon name="arrowleft" :size="24"></tui-icon>
	</template>
	<template v-slot:right>
		<tui-icon name="arrowright" :size="24"></tui-icon>
	</template>
</tui-week-date>

<!--微信小程序-->
 <tui-week-date activeBackground="#eb0909" arrow="{{false}}" bindclick="dateClick">
      <tui-icon slot="left" name="arrowleft" size="{{24}}"></tui-icon>
      <tui-icon slot="right" name="arrowright" size="{{24}}"></tui-icon>
</tui-week-date>

Slots

插槽名称	说明
left	左侧内容，如左箭头
right	右侧内容，如右箭头

Props

属性名	类型	说明	默认值
value	String	指定显示日期，格式：2022-10-01 或 2022/10/01	-
background	String	背景色	#fff
weekSize	Number, String	星期字体大小，单位rpx	26
weekColor	String	星期字体颜色	#888
dateSize	Number, String	日期字体大小，单位rpx	34
dateColor	String	日期字体颜色	#333
activeColor	String	选中后日期字体颜色	#fff
activeBackground	String	选中后日期背景颜色	#5677fc
arrow	Boolean	是否显示默认切换箭头，使用自定义箭头时将该值设为false	true
arrowColor	String	默认箭头颜色	#5677fc

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	点击日期时触发	{   year:年,   month:月,   day:日,   week:星期,   date:日期 }

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码