tmui-cli 1.3.0 → 2.0.1

package/data/docs/tag.md

@@ -0,0 +1,78 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 常用组件
+
+# 标签 TmTag
+
+标签组件,用来展示一些标签信息.
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/tag"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/tag.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| size | string | "n" | 尺寸大小,可选值：s/m/n/g/xs | 
+| skin | string | "normal" | 样式可选值：thin/outlined/text/normal/dashed | 
+| borderColor | string\|Array\<string\> | "" | 遵循规则：string或者[x]：全部边线[x,x]左右边线，上下边线[x,x,x]左，上，右[x,x,x,x]左，上，右,下 | 
+| darkBorderColor | string\|Array\<string\> | "transparent" | - | 
+| borderWidth | string\|number\|Array\<string \| number\> | 1 | 规则同borderColor | 
+| borderStyle | string\|Array\<string\> | "solid" | 规则同borderColor | 
+| round | string\|number\|Array\<string \| number\> | '10' | 圆角半径左上，右上，右下，左下 | 
+| width | string\|number | "" | - | 
+| height | string\|number | "" | - | 
+| openType | string | "" | - | 
+| disabled | boolean | false | - | 
+| icon | string | "" | - | 
+| iconSize | string | "" | - | 
+| fontSize | string | "" | - | 
+| color | string | "" | 自定义主题颜色 | 
+| bgColor | string | "" | 自定义背景 | 
+| darkBgColor | string | "" | - | 
+| fontColor | string | "" | - | 
+| darkFontColorColor | string | "" | - | 
+| linear | string[] | ()=\>[] | 渐变，前面的color,bgColor,darkBgColor失效 | 
+| shadow | string\|number\|Array\<string\> | '' | 数字或者字符串时自动计算投影,它会投影大小数组时(必须为4),第一个x,第二为y,第三个为大小,第四个为投影颜色空字符串时,取全局配置,如果不想投影设置为none即可. | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+| click | - | - | 点击事件 | 
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+| icon | - | icon图标 | 
+| default | - | 默认插槽 | 
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+
+

package/data/docs/text.md

@@ -0,0 +1,69 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 常用组件
+
+# 文本 TmText
+
+允许正则高亮或者,词高亮.
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/text"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/text.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| _style | Record\<string, any\>\|string | '' | 文本自定样式 | 
+| label | string\|number | '' | 文本内容这个prop用于接收显示在组件中的文本或数字 | 
+| heightLight | Array\<string\> | ():string[]=\>[]asstring[] | 需要特别高亮的词 | 
+| heightLightReg | Array\<string\> | ()=\>[] | 高亮正则用于定义文本中哪些部分应该被高亮显示的正则表达式数组 | 
+| heightLightStyle | string | "" | 高亮文本的自定义样式 | 
+| lines | number\|string | 0 | 行数控制文本显示时应该占用的行数（如果组件支持此功能） | 
+| selectable | boolean | false | 是否可选指示文本是否可以被用户选择（如通过长按选择） | 
+| color | string | "#333" | 文本颜色定义文本的主要颜色 | 
+| darkColor | string | "" | 暗色模式颜色在暗色模式下文本的颜色（如果组件支持暗色模式） | 
+| heightLightColor | string | "primary" | 高亮颜色文本中应该被高亮显示的部分的颜色 | 
+| lineHeight | string\|number | "1.5" | 行高文本的行高设置 | 
+| fontSize | string\|number | "" | 字体大小文本的字体大小设置 | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+| click | 名称：word,点击的文本内容, | - | 文本点击 | 
+| itemClick | 名称：word,点击的文本内容, | - | 正则的文本被点击 | 
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+| default | - | 默认文本插槽，如果使用插槽，那么相关特性功能将会失效。 | 
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+
+

package/data/docs/upload-photo.md

@@ -0,0 +1,86 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 表单组件
+
+# 图片上传 TmUploadPhoto
+
+样式丰富塑造性好
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/upload-photo"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/upload-photo.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| maxCount | number | 9 | 最大的可上传数量 | 
+| round | string\|number | 10 | 图片项目圆角。 | 
+| url | string | 'https://mockapi.eolink.com/LRViGGZ8e6c1e8b4a636cd82bca1eb15d2635ed8c74e774/admin/upload_pic/' | 上传地址 | 
+| name | string | 'file' | 上传到服务器的名称字段 | 
+| header | Record\<string, any\> \| null | null | 上传到服务器的头文件 | 
+| formData | Record\<string, any\> \| null | null | 额外的表单数据。 | 
+| imgHeight | string | '110' | 图片高,此处不可使用%单位 | 
+| column | number | 5 | 一行显示几列 | 
+| okFileIsDelete | boolean | true | 上传成功的文件是否允许删除 | 
+| uploadingFileIsDelete | boolean | true | 上传中的文件是否允许删除 | 
+| maxFileSize | number | 1024*1024*30 | 图片上传的限制大小，默认是30mb(可以开启压缩，最后可能比较小) | 
+| statusCode | number | 200 | 开发者服务器响应码,默认是200表示上传成功. | 
+| modelValue | Array\<Record\<string, any\> \| string\> | ()=\>[] | 等同v-model | 
+| rangUrl | string | 'url' | 用于回显时,如果你提供的数组数据是对象,需要指定图片的地址.同时该对象数据会被保留到response字段中 | 
+| beforeDel | func\|boolean | true | 图片被删除时触发如果返回Promise\<false\>删除失败否则成功类型null|(index:number,item:XUPLOADFILE_FILE_INFO)=\>Promise\<boolean\> | 
+| beforeComplete | func\|boolean | true | 你需要原路返回参数提供的itemitem可以自行修改响应内容，响应类型这样可以自己根据服务的内容判断是成功还是失败或者没有权限。修改其中的status来达到成功还是失败TMUPLOAD_PHOTO_STATUS | 
+| autoStart | boolean | true | 是否自动上传 | 
+| sourceType | Array\<'album' \| 'camera'\> | ()=\>['album','camera'] | 图片来源同官方的sourceType：'album','camera' | 
+| compress | boolean | true | 是否压缩 | 
+| compressedHeight | string | 'auto' | 压缩后的缩放高，0表示不压缩高 | 
+| compressedWidth | string | 'auto' | 压缩后的缩放高，0表示不压缩宽 | 
+| quality | number | 80 | 压缩质量 | 
+| addPos | string | 'after' | 添加图片的位置'before'出现在前面'after'出现在后面 | 
+| mode | string | 'scaleToFill' | 图片展示的缩放模式同官方. | 
+| sortable | boolean | true | 是否允许长按拖拽排序 | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+| complete | 名称：-,列表数据, | - | 每次全部上传完时触发 | 
+| change | 名称：-,列表数据, | - | 变化时触发 | 
+| delete | 名称：-,列表数据, | - | 图片被删除时触发 | 
+| update:modelValue | - | - | 同步文件列表。 | 
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+| default | - | - | 
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| startUpload | - | - | - | 
+| choose | - | - | - | 
+
+

package/data/docs/upload-video.md

@@ -0,0 +1,86 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 表单组件
+
+# 视频上传 TmUploadVideo
+
+样式丰富塑造性好
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/upload-video"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/upload-video.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| maxCount | number | 9 | 最大的可上传数量 | 
+| round | string\|number | 10 | 图片项目圆角。 | 
+| url | string | "https://mockapi.eolink.com/LRViGGZ8e6c1e8b4a636cd82bca1eb15d2635ed8c74e774/admin/upload_pic/" | 上传地址 | 
+| name | string | "file" | 上传到服务器的名称字段 | 
+| header | Record\<string, any\> \| null | null | 上传到服务器的头文件 | 
+| formData | Record\<string, any\> \| null | null | 额外的表单数据。 | 
+| imgHeight | string | "110" | 图片高,此处不可使用%单位 | 
+| column | number | 5 | 一行显示几列 | 
+| okFileIsDelete | boolean | true | 上传成功的文件是否允许删除 | 
+| uploadingFileIsDelete | boolean | true | 上传中的文件是否允许删除 | 
+| maxFileSize | number | 1024*1024*30 | 图片上传的限制大小，默认是30mb(可以开启压缩，最后可能比较小) | 
+| maxDuration | number | 30 | 最大拍摄时长不能超过60秒默认建议30秒 | 
+| camera | string | 'back' | 摄像头类型,前置还是后置 | 
+| statusCode | number | 200 | 开发者服务器响应码,默认是200表示上传成功. | 
+| modelValue | Array\<Record\<string, any\> \| string\> | ()=\>[] | 等同v-model | 
+| rangUrl | string | 'url' | 用于回显时,如果你提供的数组数据是对象,需要指定图片的地址.同时该对象数据会被保留到response字段中 | 
+| beforeDel | func\|boolean | true | 图片被删除时触发如果返回Promise\<false\>删除失败否则成功类型null|(index:number,item:XUPLOADFILE_FILE_INFO)=\>Promise\<boolean\> | 
+| beforeComplete | func\|boolean | true | 你需要原路返回参数提供的itemitem可以自行修改响应内容，响应类型这样可以自己根据服务的内容判断是成功还是失败或者没有权限。修改其中的status来达到成功还是失败TMUPLOAD_PHOTO_STATUS | 
+| autoStart | boolean | true | 是否自动上传 | 
+| sourceType | Array\<"album" \| "camera"\> | ()=\>["album","camera"] | 图片来源同官方的sourceType：'album','camera' | 
+| compress | boolean | true | 是否压缩 | 
+| addPos | string | "after" | 添加图片的位置'before'出现在前面'after'出现在后面 | 
+| mode | string | "scaleToFill" | 图片展示的缩放模式同官方. | 
+| sortable | boolean | true | 是否允许长按拖拽排序 | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+| complete | 名称：-,列表数据, | - | 每次全部上传完时触发 | 
+| change | 名称：-,列表数据, | - | 变化时触发 | 
+| delete | 名称：-,列表数据, | - | 图片被删除时触发 | 
+| preview | - | - | 点击项目预览视频,有的回显视频可能需要授权播放,返回的可能是个视频图片,因此你需要通过事件自行创建预览窗口. | 
+| update:modelValue | - | - | 同步文件列表。 | 
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+| default | - | - | 
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| startUpload | - | - | - | 
+| choose | - | - | - | 
+
+

package/data/docs//346/250/241/346/235/277.md

@@ -0,0 +1,47 @@
+---
+title: tmui 3.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+</script>
+
+#### 组件库文档 tmui.design
+
+# 应用节点 App
+这是所有页面的根节点，请务必在创建页面是把它作为页面的根节点。以后可扩展性非常强。
+
+---
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5/#/pages/changyong/button"></webview>
+
+::: details 示例模板
+
+<!-- <<< ../src/pages/changyong/button.nvue{vue} -->
+
+:::
+
+## :hot_pepper: 兼容性
+
+| APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
+| --- | --- | --- | --- | --- |
+| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
+
+## :seedling: 参数
+本组件含有公共属性 [公共属性](/spec/组件公共样式.html)
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+
+## :corn: slot插槽
+默认default
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+

package/data/examples/alert.vue

@@ -0,0 +1,39 @@
+<template>
+	<view>
+		<tm-sheet >
+			<tm-text font-size="32" class=" text-weight-b d-block">警告 tmAlert</tm-text>
+			<tm-text class="" color="#999999">
+				样式丰富，用于警告信息的提醒。
+			</tm-text>
+		</tm-sheet>
+		<tm-alert>默认为thin浅色样式，可以自适应暗黑</tm-alert>
+		<tm-alert skin='normal'>也可以把skin改成normal变成纯背景</tm-alert>
+		<tm-alert icon="thumb-up-line" skin='normal' color="#000000">也可以把skin改成normal变成纯背景</tm-alert>
+		<tm-alert icon="thumb-up-line" skin='normal' color="#dee3e7">也可以把skin改成normal变成纯背景</tm-alert>
+
+		<tm-sheet>
+			<tm-text font-size="32" class="text-weight-b ">可以使用默认的状态来管理颜色</tm-text>
+		</tm-sheet>
+		<tm-alert icon="alarm-line" status="success" skin='normal'>自定义图标</tm-alert>
+		<tm-alert status="error" skin='normal'>错误提醒</tm-alert>
+		<tm-alert status="warn" closeIcon="arrow-right-line" skin='normal'>警告提醒</tm-alert>
+		<tm-alert icon="money-cny-circle-fill" color="#728398" skin='normal'>自定义背景色</tm-alert>
+		<tm-sheet>
+			<tm-text font-size="32" class="text-weight-b ">比如改些圆角，边线啥的,样式丰富请自行设计</tm-text>
+		</tm-sheet>
+		<tm-alert status="warn" skin='normal' :round="['6']">警告提醒</tm-alert>
+		<tm-alert status="error" skin='normal' :round="['12', '0']">改下圆角</tm-alert>
+		<tm-alert :border="['2']">加个小边框</tm-alert>
+		<tm-alert :border="['2']" :showClose="false" :borderColor="['#89c0ff']"
+			:darkBorderColor="['#3b5066']">加个小边框,隐藏关闭</tm-alert>
+		
+		<view class="py-n6"></view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+
+</script>
+
+<style></style>

package/data/examples/avatar-group.vue

@@ -0,0 +1,97 @@
+<template>
+
+	<view>
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-8">头像组 tmAvatarGroup</tm-text>
+			<tm-text class="" color="#999999">
+				平铺和堆叠方式。如果想要单头像建议使用：tmSheet+tmImage配合，+tmBadge达到效果，因此我不再提供单头像组件，没有意义。
+			</tm-text>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-n8">堆叠</tm-text>
+			<tm-avatar-group :list="list" :max-count="8"></tm-avatar-group>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-n8">平铺</tm-text>
+			<tm-avatar-group :list="list" :flat="true" :max-count="8" gutter="3"></tm-avatar-group>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-n8">控制圆角及显示数量</tm-text>
+			<tm-avatar-group :list="list" round="8" :flat="true" :max-count="8" :count="1000"
+				gutter="3"></tm-avatar-group>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-n8">文本头像</tm-text>
+			<tm-avatar-group :list="list2" round="8" :flat="true" :max-count="8" :count="1000"
+				gutter="3"></tm-avatar-group>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-n8">文本头像随机颜色</tm-text>
+			<tm-avatar-group :randomBgColor="true" :list="list2" round="8" :flat="true" :max-count="8" :count="1000"
+				gutter="3"></tm-avatar-group>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-n8">头像与文本混搭,空时图标占位</tm-text>
+			<tm-avatar-group :randomBgColor="true" :list="list3" round="8" :flat="true" :max-count="8" :count="1000"
+				gutter="3"></tm-avatar-group>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="36" class=" text-weight-b mb-n8">插槽定制more</tm-text>
+			<tm-avatar-group :list="list" round="8" :flat="true" :max-count="4" :count="1000" gutter="6">
+				<template v-slot:more>
+					<tm-sheet class="flex flex-center" width="64" height="64" :round="['8']" :margin="['0']"
+						:padding="['0']" color="primary">
+						<tm-icon size="32" color="white" name="add-line"></tm-icon>
+					</tm-sheet>
+				</template>
+			</tm-avatar-group>
+		</tm-sheet>
+		<view style="height: 32px;"></view>
+	</view>
+
+</template>
+
+<script setup lang="ts">
+	const list = [
+		"https://picsum.photos/100/100?random=10",
+		"https://picsum.photos/100/100?random=11",
+		"https://picsum.photos/100/100?random=12",
+		"https://picsum.photos/100/100?random=13",
+		"https://picsum.photos/100/100?random=14",
+		"https://picsum.photos/100/100?random=15",
+		"https://picsum.photos/100/100?random=16",
+		"https://picsum.photos/100/100?random=17",
+		"https://picsum.photos/100/100?random=18",
+		"https://picsum.photos/100/100?random=19",
+	] as string[]
+	const list2 = [
+		"同名自定义",
+		"Dclound",
+		"ak",
+		"sk",
+		"国家",
+		"天清色",
+		"漂亮",
+		"相爱一家人",
+		"北京",
+		"厉害了我的哥",
+		"呃",
+	] as string[]
+	const list3 = [
+		"同名自定义",
+		"https://picsum.photos/100/100?random=20",
+		"",
+		"sk",
+		"https://picsum.photos/100/100?random=21",
+		"",
+		"漂亮",
+		"https://picsum.photos/100/100?random=22",
+		"北京",
+		"https://picsum.photos/100/100?random=23",
+		"呃",
+	] as string[]
+</script>
+
+<style>
+
+</style>

package/data/examples/badge.vue

@@ -0,0 +1,87 @@
+<template>
+
+	<tm-sheet>
+		<tm-text font-size="32" class=" text-weight-b mb-16 d-block">角标 Badge</tm-text>
+		<tm-text class="" color="#999999">
+			内联模式布局，方便角标布局和排版。
+		</tm-text>
+	</tm-sheet>
+
+	<tm-sheet class="flex flex-row flex-row-center-center flex-wrap ">
+
+		<view class="flex-1 flex flex-row flex-row-center-center ">
+			<tm-badge :label="true">
+				<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+			</tm-badge>
+		</view>
+		<view class="flex-1 flex flex-row flex-row-center-center">
+			<tm-badge bg-color="danger" :label="1">
+				<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+			</tm-badge>
+		</view>
+
+		<view class="flex-1 flex flex-row flex-row-center-center">
+			<tm-badge bg-color="success" label="HOT">
+				<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+			</tm-badge>
+		</view>
+		<view class="flex-1 flex flex-row flex-row-center-center">
+			<tm-badge bg-color="primary" :label="150">
+				<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+			</tm-badge>
+
+		</view>
+	</tm-sheet>
+
+	<tm-sheet>
+		<tm-text font-size="32" class="text-weight-b">左上，右上，左下，右下，上中，下中</tm-text>
+	</tm-sheet>
+
+	<tm-sheet class="flex flex-row flex-row-center-center flex-wrap  gap-16">
+
+		<tm-badge position="left" :label="true">
+			<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+		</tm-badge>
+		<tm-badge position="right" bg-color="danger" :label="36">
+			<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+		</tm-badge>
+		<tm-badge position="bottomLeft" bg-color="success" label="HOT">
+			<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+		</tm-badge>
+		<tm-badge position="bottomRight" bg-color="primary" :label="150">
+			<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+		</tm-badge>
+		<tm-badge position="top" bg-color="success" label="HOT">
+			<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+		</tm-badge>
+		<tm-badge position="bottom" bg-color="error" :label="150">
+			<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+		</tm-badge>
+	</tm-sheet>
+
+	<tm-sheet>
+		<tm-text font-size="32" class="text-weight-b d-block">应用在其它组件上</tm-text>
+	</tm-sheet>
+	<tm-sheet class="flex flex-row flex-row-center-center gap-19">
+
+		<tm-badge label="50%SALE">
+			<tm-button>按钮</tm-button>
+		</tm-badge>
+		<tm-badge label="HOT">
+			<tm-icon name="ancient-gate-fill"></tm-icon>
+		</tm-badge>
+		<tm-badge  :label="true">
+			<tm-icon name="verified-badge-fill"></tm-icon>
+
+		</tm-badge>
+
+	</tm-sheet>
+
+	<view class="py-32"></view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+</script>
+
+<style></style>

package/data/examples/between-time.vue

@@ -0,0 +1,39 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-8 d-block">时间区间选择 xBetweenTime</tm-text>
+            <tm-text class="" color="#999999">快速的时间区间选择器，方便时间选择自动判断前后时间大小并校正。</tm-text>
+        </tm-sheet>
+
+        <tm-sheet>
+
+            <tm-between-time start="2024-5-1" end="2028-5-2" v-model="newdata" v-model:model-str="nowVal">
+                <tm-button :block="true">打开时间</tm-button>
+            </tm-between-time>
+
+            <tm-sheet :margin="['0', '24']" color="#f5f5f5" dark-color="#333">
+                <tm-text color="#999999">选中的值：{{ newdata }}</tm-text>
+                <tm-text color="#999999">经format的值：{{ nowVal }}</tm-text>
+            </tm-sheet>
+            <tm-button skin='thin' :block="true" @click="newdata = ['2024-3-21', '2026-1-13']">赋值</tm-button>
+        </tm-sheet>
+
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b mb-n8 d-block">设置快捷按钮</tm-text>
+            <tm-between-time :quick-date="['d', 'y', '7', '30']" start="2020-1-9" end="2026-5-26" v-model="newdata"
+                v-model:model-str="nowVal">
+                <tm-button :block="true">打开时间</tm-button>
+            </tm-between-time>
+
+        </tm-sheet>
+
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+const nowVal = ref("")
+const newdata = ref<string[]>([])
+</script>
+
+<style lang="scss"></style>