TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
657
2.8m

时间周 xWeekbar ​

在线预览
在线模拟尺寸:

介绍 ​

样式丰富,非常精美,能够适应不同设计要求.

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-weekbar/x-weekbar.uvue

使用 ​

ts

<x-weekbar></x-weekbar>

Props 属性 ​

名称说明类型默认值
modelValue同步受控当前选中日期，空时不会自动选中。
string""
startDate开始的日期
string"1900-1-1"
endDate结束的日期
string"2100-1-1"
format格式展示在组件上的日期.
string"DD"
cn周上面显示的中文名称.'一', '二', '三', '四', '五', '六', '日'
由于有属性seekDay的原因这里的顺序你不允许自己排列，你只能按照0-6的顺序来排列。即周一至周日，内部会自动再排列以满足seekDay的值。
string[]() : string[] => [] as string[]
seekDay你当前的一周的第一天的索引值是几：0: 周一，1: 周二，2: 周三，3: 周四，4: 周五，5: 周六，6: 周日
number0
color背景
string"white"
darkColor暗黑时的背景,如果不提供使用sheet暗黑背景
string""
fontColor字号颜色
string"#333333"
fontSize字号颜色
string"14"
fontDarkColor暗黑时的字号颜色
string"#fbfbfb"
fontActiveColor激活时的字号颜色,不区分暗黑
string"white"
mode选中的样式.
rect和circular,none三种
string"rect"
rectRoundmode为rect时的选中背景圆角
string"5"
round组件圆角
string"0"
activeBgColor激活时的背景,不区分暗黑,不填充默认是全局主题色
string""
topHeight上部分标题的高
string"32"
bottomHeight下部分日期的高.
string"42"
padding左右,上下的间隙
string[]() : string[] => ['4', '8'] as string[]
showAction``
booleantrue
actionIcon``
string'arrow-left-s-line'
actionSize操作栏的图标大小
string'24'
actionColor操作栏的图标颜色
string'#bebebe'
actionDarkColor操作栏的图标暗黑颜色
string'#bebebe'
emptyValueSelected当前modelValue为空时,这里设置为false时,默认进来
不会选中当前日期.
booleantrue
dateStatus给日期设定状态类型为：xCalendarDateStyleStatusProps
xCalendarDateStyleStatusType[]():xCalendarDateStyleStatusType[] => [] as xCalendarDateStyleStatusType[]

Events 事件 ​

名称参数说明
changedate: string时间选中时触发
swiperChangedates: string[]时间周切换时触发，比如滑动切换，切换周时触发
update:modelValuedate: string等同v-model

Slots 插槽 ​

名称说明数据
left左边操作栏按钮-
right右边操作栏按钮-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/daohang/weekbar

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet :margin="['0']" :round="['0']">
			<x-text font-size="18" class=" text-weight-b mb-8">时间周 xWeekbar</x-text>
			<x-text color="#999999" >
				样式丰富,非常精美,能够适应不同设计要求.
			</x-text>
		</x-sheet>
		<x-weekbar :date-status="dateStatus" :start-date="startDate" :end-date="endDate" v-model="nowDate" :seekDay="6" ></x-weekbar>
		<x-sheet :margin="['0','8','0','0']" :round="['0']">
			<x-text font-size="18" class=" text-weight-b ">无操作栏及圆模式</x-text>
		</x-sheet>
		<x-weekbar :showAction="false" mode="circular" :padding="['0','4']"></x-weekbar>
		<x-sheet :margin="['0','8','0','0']" :round="['0']">
			<x-text font-size="18" class=" text-weight-b ">无背景模式</x-text>
		</x-sheet>
		<x-weekbar :showAction="false" color="transparent" fontActiveColor="primary" mode="none" :padding="['0','0']"></x-weekbar>
		<x-sheet :margin="['0']" :round="['0']">
			<x-text font-size="18" class=" text-weight-b ">个性化</x-text>
		</x-sheet>
		<x-weekbar :showAction="false" 
		color="#fff60a" 
		fontDarkColor="#000000"
		darkColor="#fff60a" activeBgColor="#000000" mode="circular" :padding="['0','4']"></x-weekbar>
		<x-sheet :margin="['0']" :round="['0']">
			<x-text font-size="18" class=" text-weight-b ">个性化(默认不选中)</x-text>
		</x-sheet>
		<x-weekbar
		actionIcon="arrow-left-circle-line"
		rectRound="8"
		color="error" 
		darkColor="error" 
		fontColor="rgba(255,255,255,0.7)" 
		fontDarkColor="rgba(255,255,255,0.8)" 
		activeBgColor="#6b0902" 
		mode="rect" 
		actionDarkColor="rgba(255,255,255,0.4)"
		actionColor="rgba(255,255,255,0.5)"
		bottomHeight="50"
		topHeight="32"
		:padding="['4','8']"
		:emptyValueSelected="false"
		>
		</x-weekbar>
		<view style="height: 50px;"></view>
		
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	import { xCalendarDateStyleStatusType } from "@/uni_modules/tmx-ui/interface.uts"
const nowDate = ref("2025-9-24")
const startDate = ref('2025-9-22')
const endDate = ref('2025-9-25')

const dateStatus = ref<xCalendarDateStyleStatusType[]>([{
		between: {
			start: "2025-9-25",
			end: "2025-9-30",
			color: "red",
			notDate: ['2024-2-20'],
		},
		date: [
			{ date: '2025-9-21', color: 'green' },
		]
	} as xCalendarDateStyleStatusType])

</script>

<style>

</style>
最近更新