tmui-cli 2.0.0 → 2.0.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/261/225/347/244/272/347/273/204/344/273/266//345/257/214/346/226/207/346/234/254 xMarkdown.md"

@@ -0,0 +1,211 @@
+# 富文本 xMarkdown
+
+## 介绍
+
+这是一个预览markdown的组件。当前支持markdown:表格，及数学公式的展示。
+【小程序端请注意】从1.1.14开始支持LaTex数学公式，但要注意数学公式暂时不要混合在表格内，会造成表格断列，样式异常。
+【组件目录内】有一个fonts.zip字体压缩包，请上传到你自己的服务器，并打开katex.min.css，把里面的字体链接换成你的字体连接，如果不换可能我服务器一关你就用不了了。
+传递正常markdown或者html内容即可,已经支持了暗黑适配，请自行配置样式。
+预览md:支持流式解析,支持动态解析内容.方便大家对话用.同时也支持了动态高,自动适配.
+同时也放开了内容复制(但会导致安卓(截止sdk4.53)页面滚动不了,需要你们自己解决:给这个组件盖个view屏蔽webview的事件,这是sdk底层问题,我修复不了.)
+1.1.10废弃了函数:getMarkdown
+所有平台的样式已经重置为none,你需要通过属性nodeStyle来设置默认样式.
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-markdown/x-markdown.uvue
+```
+
+## 使用
+
+```ts
+<x-markdown></x-markdown>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| width | `窗口宽`<br> | `string` | `'auto'` |
+| height | `窗口高,auto时会自动适配高.`<br> | `string` | `'auto'` |
+| value | `需要渲染的markdow或者html内容。`<br> | `string` | `""` |
+| isHtml | `是否启用纯html渲染。如果你的内容含有特殊字符比如:%,^&%这种不要出现在里面`<br>`此时你启用isHtml会经过数据处理直接跳过插件,直接赋值内容到html.就不要启用Markdown了.`<br> | `boolean` | `false` |
+| nodeStyle | `富文本的style样式,不可以动态更改.`<br>`为了对齐所有端,默认已经把所有平台的样式删除.因此你可以自己设置默认样式来对齐所有平台.`<br> | `string` | `"line-height:1.6;color:#000"` |
+| nodeDarkStyle | `同上，暗黑时的样式.`<br> | `string` | `"line-height:1.6;color:#fff"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| tagClick | `<br>` | 特定的a,img标签被点击触发,小程序不支持,其它平台支持. |
+| init | `-` | 是否初始化成功 |
+| getValue | `-` | 需要通过ref函数调用getHtml才会触发此函数 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| getHtml | - | `-` | 获取html内容。注意本函数不会返回内容，你要通过事件getValue得到html内容. |
+
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/markdown
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<!-- #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>
+		<x-text font-size="18" class=" text-weight-b mb-8">富文本 markdown</x-text>
+		<x-text color="#999999">
+			它支持传入html,markdown格式等内容进行预览，同时也支持动态的相关格式内容解析（常见SSE流式内容更新赋值解析，可能标签被拆分再解析）
+			不管你传的是什么格式，建议遵循微信小程序的富文本所支持的标签。这样可以和另一个组件x-edite相互转换编辑和预览。
+		</x-text>
+	</x-sheet>
+	<x-sheet>
+		<x-markdown ref="mk" @tagClick="ontagclick" @init="sse" :value="str"></x-markdown>
+		<x-button class="mt-20" @click="appendText" :block="true">追加内容</x-button>
+	</x-sheet>
+
+
+</template>
+
+<script setup lang="ts">
+	const mk = ref<XMarkdownComponentPublicInstance | null>(null)
+	let ids = 0
+	const str = ref(`# 全局配置
+## 介绍
+
+本配置参数会影响整个app风格，请慎重配置，或者根据你的UI/UX设计师指示配置
+
+**可以在任意位置导入并设置，立即生效，全局响应**\n**堙**
+
+| This header    | spans two | Header A |
+|-------------|------------|----------|
+| Cell A      | Cell B     | Cell C   |
+| Cell A      | Cell B     | Cell C   |
+| TMUI4.0   | Cell B     | 好棒  |
+
+## 数学公式
+$4x=x^2$ $C^a_b+\\sqrt{c}$ 
+$c = \\pm\\sqrt{a^2 + b^2}$
+$x=x^2$ $4x=x^2$
+<img style="width:100px;height:88px" src="https://xui.tmui.design/assets/logo-a483vlZl.png">
+
+$$
+C^a_b+\\sqrt{c}
+$$
+
+## CSS代码
+\`\`\`css
+<uni-view data-v-361a5606="" class="xSheet" 
+style="background-color: rgb(255, 255, 255); 
+width: auto; height: auto; border-radius: 14px; border-width: 0px; 
+border-color: transparent; margin: 0px 14px 14px; padding: 14px; box-shadow: none; border-style: solid;">
+<--!>输入内容<!-->
+</uni-view>
+
+\`\`\`
+
+\`\`\`css
+const highlight = "code";
+\`\`\`
+
+
+`)
+
+
+	const ontagclick = (detail : UTSJSONObject) => {
+		let text = detail.getString('attr')
+		text = text == null ? '' : (text!)
+		uni.showToast({
+			title: text,
+			icon: 'none'
+		})
+	}
+	const sse = () => {
+		// 下面是演示流式解析markdown
+		let list = [
+			"**你好",
+			"**好吧\n",
+			"## 好的哦\n",
+			"****\n",
+			"<a href='https://tmui.design'>点我事件被拦截</a> \n被",
+			"<span style='color:red'>十的</span>",
+			`
+\`\`\`javascript
+const highlight = "code";
+\`\`\`
+
+					`
+
+		]
+		let i = 0;
+		clearInterval(ids)
+		ids = setInterval(() => {
+			if (i >= list.length) {
+				clearInterval(ids)
+				return;
+			}
+			str.value += list[i]
+			i++;
+		}, 150)
+	}
+	const getHtml = () => {
+		mk.value?.getHtml?.()
+	}
+	const myVale = (str : string) => {
+		uni.showModal({
+			title: "内容",
+			content: decodeURIComponent(str),
+			showCancel: false
+		})
+	}
+	const appendText = () => {
+		str.value = str.value + `
+辣椒炒肉的热量和营养成分会因配料的比例和烹饪方式有所不同。以下是一个大致的估算，以100克辣椒炒肉为例： \n - **热量**: 约 150-250 千卡 \n - **碳水化合物**: 约 5-10 克 \n - **脂肪**: 约 10-15 克 \n - **蛋白质**: 约 8-12 克 \n 具体数值会根据所使用的肉类（如猪肉、牛肉等）的脂肪含量、辣椒的量、油的使用量以及是否添加其他调料（如酱油、糖）等因素而有所不同。如果你有具体的食材比例，可以更精确地计算这些数值。
+`
+
+	}
+
+	onUnload(() => {
+		clearInterval(ids)
+	})
+</script>
+
+<style>
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/261/225/347/244/272/347/273/204/344/273/266//346/212/230/345/217/240/351/235/242/346/235/277 xCollapse.md"

@@ -0,0 +1,152 @@
+# 折叠面板 xCollapse
+
+## 介绍
+
+可单，可多开,内部只可放置x-collapse-item直接子节点组件，为了避免重复计算和性能x-collapse-item不能通过响应式修改内容。如果确实需要请通过刷新key解决
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-collapse/x-collapse.uvue
+```
+
+## 使用
+
+```ts
+<x-collapse></x-collapse>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `当前打开的组。可v-model`<br> | `Array` | `():Array<string number> => ([] as string[])` |
+| multiple | `是否允许打开多个。`<br> | `boolean` | `true` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `value: String[]<br>` | 变换时触发 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽，仅可放置x-collapse-item子节点` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/collapse
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<!-- #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>
+		<x-text font-size="18" class=" text-weight-b mb-8">折叠面板 Collapse</x-text>
+		<x-text color="#999999">允许单开，和多开。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-collapse>
+			<x-collapse-item left-icon="settings-line" name="1" title="系统设置">
+				<x-text class="line-10">
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+				</x-text>
+				<view class="flex-1">
+					<x-image width="100%" src="https://store.tmui.design/api/randomImg?random=993"></x-image>
+				</view>
+			</x-collapse-item>
+			<x-collapse-item :showBottomLine="false" left-icon="question-line" name="2"
+				title="交易帮助信息提示交易帮助信息提示交易交易帮助信息提示帮助信息提示交易帮助信息提示">
+				<x-text class="line-10">
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+				</x-text>
+			</x-collapse-item>
+		</x-collapse>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b ">只能展开一个</x-text>
+	</x-sheet>
+
+	<x-sheet :padding="['0']">
+		<x-collapse :multiple="false">
+			<x-collapse-item @click="onClick" left-icon="ancient-gate-fill" name="3" title="如何提高低成本的效率">
+				<x-text class="line-10">
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+				</x-text>
+			</x-collapse-item>
+			<x-collapse-item left-icon="mail-unread-fill" name="1" title="如何使用本UI组件库,会很难吗？">
+				<x-text class="line-10">
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+
+				</x-text>
+				<view class="flex-1">
+					<x-image width="100%" src="https://store.tmui.design/api/randomImg?random=993"></x-image>
+				</view>
+			</x-collapse-item>
+			<x-collapse-item :disabled="true" left-icon="calendar-schedule-fill" name="6" title="如何使用本UI组件库,会很难吗？">
+				<x-text class="line-10">
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+				</x-text>
+
+			</x-collapse-item>
+			<x-collapse-item :showBottomLine="false" left-icon="discuss-fill" name="2" title="如何提高低成本的效率">
+				<x-text class="line-10">
+
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+				</x-text>
+			</x-collapse-item>
+		</x-collapse>
+	</x-sheet>
+
+</template>
+
+<script lang="ts" setup>
+	const onClick = (id : string, opened : boolean) => {
+		console.log(id, opened)
+	}
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/261/225/347/244/272/347/273/204/344/273/266//346/212/230/345/217/240/351/235/242/346/235/277/345/255/220/347/273/204/344/273/266 xCollapseItem.md"

@@ -0,0 +1,167 @@
+# 折叠面板子组件 xCollapseItem
+
+## 介绍
+
+可单，可多开,只可放置在x-collapse直接子节点组件,为了避免重复计算和性能x-collapse-item不能通过响应式修改内容。如果确实需要请通过刷新key解决
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-collapse-item/x-collapse-item.uvue
+```
+
+## 使用
+
+```ts
+<x-collapse-item></x-collapse-item>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| name | `唯一标识`<br> | `union` | `""` |
+| showBottomLine | `是否显示底部边线`<br> | `boolean` | `true` |
+| disabled | `是否禁用`<br> | `boolean` | `false` |
+| titleFontSize | `标题大小`<br> | `union` | `'16px'` |
+| titleColor | `标题颜色`<br> | `string` | `'#333333'` |
+| darkTitleColor | `暗黑时的标题颜色，如果不填写取白`<br> | `string` | `''` |
+| activeColor | `激活时的颜色，空值读取全局值。`<br> | `string` | `''` |
+| color | `背景`<br> | `string` | `'white'` |
+| darkColor | `暗黑时的背景，如果不填写默认取sheetDarkColor`<br> | `string` | `''` |
+| leftIcon | `左边图标`<br> | `string` | `''` |
+| title | `标题`<br> | `string` | `''` |
+| titleHeight | `标题高度`<br> | `union` | `'55'` |
+| titleLines | `标题最多显示几行出现省略号`<br> | `union` | `1` |
+| custom | `是否开启自定整个cell内容，如果你的整个内容要自定义实现，且复杂，请`<br>`设置为true后并在插槽内#custom写你的布局内容。`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `name: string<br>opened: boolean<br>` | 点击组件标题时触发 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| left | `左边插槽` | status: boolean<br> |
+| title | `标题插槽，如果你要完全自定标题样式请在此插槽内布局` | status: boolean<br> |
+| right | `右边插槽` | status: boolean<br> |
+| custom | `自定义内容` | - |
+| default | `默认内容插槽。` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/collapse
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<!-- #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>
+		<x-text font-size="18" class=" text-weight-b mb-8">折叠面板 Collapse</x-text>
+		<x-text color="#999999">允许单开，和多开。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-collapse>
+			<x-collapse-item left-icon="settings-line" name="1" title="系统设置">
+				<x-text class="line-10">
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+				</x-text>
+				<view class="flex-1">
+					<x-image width="100%" src="https://store.tmui.design/api/randomImg?random=993"></x-image>
+				</view>
+			</x-collapse-item>
+			<x-collapse-item :showBottomLine="false" left-icon="question-line" name="2"
+				title="交易帮助信息提示交易帮助信息提示交易交易帮助信息提示帮助信息提示交易帮助信息提示">
+				<x-text class="line-10">
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+				</x-text>
+			</x-collapse-item>
+		</x-collapse>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b ">只能展开一个</x-text>
+	</x-sheet>
+
+	<x-sheet :padding="['0']">
+		<x-collapse :multiple="false">
+			<x-collapse-item @click="onClick" left-icon="ancient-gate-fill" name="3" title="如何提高低成本的效率">
+				<x-text class="line-10">
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+				</x-text>
+			</x-collapse-item>
+			<x-collapse-item left-icon="mail-unread-fill" name="1" title="如何使用本UI组件库,会很难吗？">
+				<x-text class="line-10">
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+
+				</x-text>
+				<view class="flex-1">
+					<x-image width="100%" src="https://store.tmui.design/api/randomImg?random=993"></x-image>
+				</view>
+			</x-collapse-item>
+			<x-collapse-item :disabled="true" left-icon="calendar-schedule-fill" name="6" title="如何使用本UI组件库,会很难吗？">
+				<x-text class="line-10">
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+				</x-text>
+
+			</x-collapse-item>
+			<x-collapse-item :showBottomLine="false" left-icon="discuss-fill" name="2" title="如何提高低成本的效率">
+				<x-text class="line-10">
+
+					在贴牌代工这一业务方面，据阿宽食品官网显示，其公司旗下拥有全资及绝对控股的五大生产基地，分别是：成都龙泉驿工厂、北京顺义工厂、杭州富阳工厂、四川宜宾工厂、四川德阳工厂。
+					根据光大证券研究所数据，2018年-2021年，阿宽销售额复合增长率在行业前十厂商中排名第1，2021年的方便面销售额已位居内资品牌前3。
+				</x-text>
+			</x-collapse-item>
+		</x-collapse>
+	</x-sheet>
+
+</template>
+
+<script lang="ts" setup>
+	const onClick = (id : string, opened : boolean) => {
+		console.log(id, opened)
+	}
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/261/225/347/244/272/347/273/204/344/273/266//346/225/260/345/255/227/347/277/273/346/273/232 xRollingNumber.md"

@@ -0,0 +1,129 @@
+# 数字翻滚 xRollingNumber
+
+## 介绍
+
+是否小数点，取决与你的的endVal目标值，如果它带小数点，那动画也是相应带小数点。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-rolling-number/x-rolling-number.uvue
+```
+
+## 使用
+
+```ts
+<x-rolling-number></x-rolling-number>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| fontSize | `文字大小`<br> | `string` | `"32"` |
+| fontColor | `文字颜色`<br> | `string` | `"black"` |
+| fontStyle | ``<br> | `string` | `''` |
+| darkFontColor | `暗黑时的文字颜色，如果为空取白`<br> | `string` | `""` |
+| startVal | `起始值`<br> | `number` | `0` |
+| endVal | `目标值（当前需要显示的值）`<br> | `number` | `0` |
+| duration | `动画速率。控制翻滚动的动画效果。`<br> | `number` | `400` |
+| easing | `缓动函数类型`<br> | `string` | `"easeIn"` |
+| useGrouping | `是否显示千分位分隔符`<br> | `boolean` | `false` |
+| decimals | `小数位数`<br> | `number` | `-1` |
+| prefix | `前缀符号（如货币符号）`<br> | `string` | `""` |
+| suffix | `后缀符号（如单位）`<br> | `string` | `""` |
+| enableAnimation | `是否启用动画`<br> | `boolean` | `true` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| animationStart | `-` | 动画开始时触发 |
+| animationComplete | `-` | 动画完成时触发 |
+| animationPause | `-` | 动画暂停时触发 |
+| animationResume | `-` | 动画恢复时触发 |
+| animationStop | `-` | 动画停止时触发 |
+| valueChange | `-` | 数值变化时触发 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽` | value: string<br>value: string<br>formattedValue: string<br>formattedValue: string<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| play | - | `-` | 播放动画 * |
+| pause | - | `-` | 暂停动画 * |
+| resume | - | `-` | 恢复动画 * |
+| stop | - | `-` | 停止动画 * |
+| reset | - | `-` | 重置到起始值 * |
+| isAnimating | - | `-` | 是否正在动画中 * |
+| getValue | - | `-` | 获取当前值 * |
+| getFormattedValue | - | `-` | 获取格式化后的值 * |
+
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/rolling-number
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<!-- #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>
+			<x-text font-size="18" class=" text-weight-b mb-8">数字翻滚 xRollingNumber</x-text>
+			<x-text color="#999999" >
+				是否小数点，取决与你的的endVal目标值，如果它带小数点，那动画也是相应带小数点。
+			</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">小数</x-text>
+			<x-rolling-number :endVal="endVal"></x-rolling-number>
+			<x-button class="mt-32" :block="true" @click="endVal=endVal+12">增加+12</x-button>
+		</x-sheet>
+		
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">整数,让动画时间加长点{{endVal2}}</x-text>
+			<x-rolling-number :endVal="endVal2" :duration="1100"></x-rolling-number>
+			<x-button class="mt-32" :block="true" @click="endVal2=endVal2+122">增加+122</x-button>
+		</x-sheet>
+
+</template>
+
+<script setup lang="ts">
+	const endVal = ref(2023.2)
+	const endVal2 = ref(1998)
+	
+</script>
+
+<style lang="scss">
+
+</style>
+
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)