tmui-cli 2.0.0 → 2.0.2

package/data/docs/countdown.md

@@ -0,0 +1,79 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 展示组件
+
+# 倒计时器 TmCountdown
+
+倒计时，可以精确到秒，毫秒
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/countdown"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/countdown.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| time | number | 0 | - | 
+| actions | union | "" | - | 
+| format | string | "DD天HH时MM分SS秒" | - | 
+| autoStart | boolean | false | - | 
+| unit | union | "ss" | - | 
+| fontSize | string | "16" | - | 
+| color | string | "#333333" | - | 
+| captcha | boolean | false | 是否使用验证码模式启用后,整个应用不管你用了多少个此组件,倒计时都是共用的直到结束某一个结束,其它的才可以启用,这样可以保证,任何时候切换页面验证发送都能保证在60秒内的间隔,防止刷验证码. | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+| change | - | - | - | 
+| pause | - | - | - | 
+| start | - | - | - | 
+| complete | - | - | - | 
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+| default | 名称：binding,status 类型：- 
+名称：binding,time 类型：- 
+名称：binding,label 类型：- 
+名称：binding,ms 类型：- 
+名称：binding,ss 类型：- 
+名称：binding,mm 类型：- 
+名称：binding,hh 类型：- 
+名称：binding,dd 类型：- 
+ | 插槽 | 
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| start | - | - | 开始计时 | 
+| pause | - | - | 暂停计时 | 
+| reset | - | - | 重置 | 
+| getStatus | - | - | 获取当前状态 | 
+
+

package/data/docs/date-view.md

@@ -0,0 +1,65 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 表单组件
+
+# 日期选择容器 TmDateView
+
+如果需要弹层式用tm-picker-date组件,这个是展示型.
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/picker-date"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/picker-date.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| modelValue | string | "" | 当前时间,与modelStr不同，此提供的值必须是正常的时间格式否则报错，无法运行。 | 
+| modelStr | string | "" | 当前时间经过format格式化后输出的值。此值不会处理输入，只输出显示。 | 
+| title | string | "请选择时间" | 顶部标题 | 
+| start | string | "" | 开始时间，请提供正确的时间格式 | 
+| end | string | "" | 结束时间，请提供正确的时间格式 | 
+| type | ModelType | "day" | 精确到的级别year:年month:年月day:年月日hour:年月日小时minute:年月日小时分钟second:年月日小时分钟秒 | 
+| format | string | "YYYY-MM-DD" | 输出时间格式，只对v-model:modelStr有效有效格式：YYYY年MM月DD日hh小时mm分钟ss秒 | 
+| cellUnits | string[] | ():string[]=\>[$i18n.t('tmui32x.tmDateView.cellUnits.year'),$i18n.t('tmui32x.tmDateView.cellUnits.month'),$i18n.t('tmui32x.tmDateView.cellUnits.day'),$i18n.t('tmui32x.tmDateView.cellUnits.hour'),$i18n.t('tmui32x.tmDateView.cellUnits.minute'),$i18n.t('tmui32x.tmDateView.cellUnits.second')] | 上方的单位名称 | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+| change | 名称：date,当前选中时间, | - | 滑动变换时触发 | 
+| update:modelStr | - | - | 经格式化后的值。等同v-model:model-str | 
+| update:modelValue | - | - | - | 
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+
+

package/data/docs/drawer.md

@@ -0,0 +1,94 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 反馈组件
+
+# 抽屉 TmDrawer
+
+提供四个方向的弹出。
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/drawer"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/drawer.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| customStyle | string | "" | 自定义遮罩样式 | 
+| title | string | $i18n.t('tmui32x.tmDrawer.title') | 标题 | 
+| showFooter | boolean | false | 显示底部操作栏 | 
+| showTitle | boolean | true | 是否显示标题 | 
+| showClose | boolean | false | 是否显示底部关闭按钮 | 
+| overlayClick | boolean | true | 遮罩是否允许点击被关闭 | 
+| show | boolean | false | 显示可v-model:show双向绑定 | 
+| showCancel | boolean | true | 显示取消按钮 | 
+| cancelText | string | $i18n.t('tmui32x.cancelText') | 取消按钮的文本 | 
+| confirmText | string | $i18n.t('tmui32x.confirmText') | 确认按钮的文本 | 
+| duration | number | 300 | 动画时间 | 
+| position | string | "bottom" | 打开方向。 | 
+| round | string\|number | "" | 打开方向为上和下时的圆角空值时，取全局配置的圆角。 | 
+| size | string\|number | "50%" | 左右时为内容宽，上下时为内容高百分比，数字字符或者带单位,或者为auto(根据内容自动高度或者宽高) | 
+| maxHeight | string | "" | 弹层最大的高度值，默认为屏幕的可视高提供值时不能为百分比，可以是px,rpx单位数字。如果你不带单位，默认转换为rpx单位。 | 
+| bgColor | string | 'white' | 背景颜色 | 
+| darkBgColor | string | '' | 暗黑背景颜色，如果不提供默认读取全局的sheet配置 | 
+| disabledScroll | boolean | false | 是否禁用内部的scroll标签禁用后内容不会滚动，如果设定了指定高，内容超出指定高，会被裁切但如果没有指定高，内容自动的话，高是自动的。 | 
+| contentMargin | string | '24' | 内容区域左右和下的边距。 | 
+| widthCoverCenter | boolean | false | 宽屏时是否让内容剧中显示并限制其它宽为屏幕宽，只展示中间内容以适应宽屏。注意只有top,bottom才会生效。 | 
+| offsetTop | string\|number | '0' | 距离顶部的偏移量 | 
+| zIndex | string\|number | 1100 | 弹层的层级 | 
+| lazy | boolean | false | 懒加载为了解决业务布局节点超多时,你可能需要内容延迟加载以免阻塞动画流畅度.如果你启用了lazy,每天次打开时,动画执行后才会显示内容.这样动画就流畅,不会因为节点过多造成的卡. | 
+| beforeClose | () =\> Promise\<boolean\> | true | 关闭前执行，可以是异步函数，只有当用户点击confirm时才会触发。如果返回false将阻止关闭。true允许关闭。 | 
+| disabled | boolean | false | 是否禁用弹层 | 
+| disableTeleport | boolean | false | 是否禁用teleport（H5平台）在嵌套组件或特殊环境下，可以禁用teleport避免DOM错误 | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+| click | - | - | 点击遮罩事件 | 
+| close | - | - | 关闭是触发 | 
+| open | - | - | 打开时触发 | 
+| beforeOpen | - | - | 打开前执行 | 
+| beforeClose | - | - | 关闭前执行 | 
+| update:show | - | - | 等同v-model:show | 
+| cancel | - | - | 取消时触发 | 
+| confirm | - | - | 确认时触发 | 
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+| trigger | 名称：binding,show 类型：- 
+ | {Boolean} show - 当前是否已显示 | 
+| title | 名称：binding,show 类型：- 
+ | {Boolean} show - 当前是否已显示 | 
+| default | - | 默认插槽 | 
+| footer | - | 底部操作栏 | 
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+
+

package/data/docs/dropdown-item.md

@@ -0,0 +1,68 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 表单组件
+
+# 下拉项子组件 TmDropdownItem
+
+下拉项子组件，用于下拉菜单中展示选项。
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/dropdown-menu"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/dropdown-menu.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| title | string | '标题' | 菜单标题 | 
+| keyName | union | '' | 标识，变换或者点击时，会通过事件传回。不要与其它选项相同，必须是唯一 | 
+| icon | string | 'arrow-down-s-fill' | 未选中时的图标 | 
+| activeIcon | string | 'arrow-up-s-fill' | 激活时的图标 | 
+| fontColor | string | '#333333' | 默认的文字及图标颜色 | 
+| darkFontColor | string | '' | 暗黑时的默认的文字及图标颜色，空取时白色 | 
+| fontSize | string | '28' | 文字及图标大小 | 
+| activeFontColor | string | '' | 激活的文字及图标颜色空值时取全局统一的主题色。 | 
+| isBtn | boolean | false | 是否是按钮选项。 | 
+| color | - | 'white' | - | 
+| darkColor | - | '' | - | 
+| render | - | false | - | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+| default | - | - | 
+| footer | - | - | 
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+
+

package/data/docs/dropdown-menu.md

@@ -0,0 +1,70 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 反馈组件
+
+# 下拉菜单 TmDropdownMenu
+
+下拉菜单组件，用于下拉菜单中展示选项。
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/dropdown-menu"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/dropdown-menu.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| position | TmDropdownMenuPropsPositions | 'static' | 展现方式。static静态fixed展开后悬浮在顶部。 | 
+| offsetTop | string | '0' | 顶部的偏移量,如果你要让出顶部距离可以设置此值。数字字符，prx,px等单位如果position=static此属性失效。 | 
+| modelValue | union | -1 | 当前激活的索引标识，就是你子项上的keyName值匹配不到时关闭。所以要关闭，只要填充一个不存在的keyName值即可。 | 
+| height | string | '88' | 菜单栏的高度 | 
+| width | string | 'auto' | 宽度 | 
+| color | string | 'white' | 背景颜色 | 
+| darkColor | string | '' | 暗黑时的背景颜色 | 
+| zIndex | number | 88 | 层级 | 
+| hidnMask | boolean | false | 对于要把此组件嵌套在布局组件时，应该要隐藏遮罩，否则不好看。 | 
+| contentColor | string | '#ffffff' | 内容背景颜色 | 
+| contentDarkColor | string | '' | 暗黑时的内容背景颜色,空值取sheetDarkColor | 
+| round | string | '0' | 圆角值，要注意：开启后：菜单也会有圆角，但有区别：默认未展开时四周圆角。当展开时，内容底部圆角，菜单顶部圆角，这样形成上下一体的外观。 | 
+| contentPadding | string | '0px12px12px12px' | 内容样式padding,请使用css规则 | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+| change | 名称：index,当前被切换的索引值,名称：keyName,菜单keyName标识,名称：status,当前切换的状态：false表示关闭，true表示打开。, | - | 切换菜单时触发 | 
+| update:modelValue | - | - | - | 
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+| default | - | - | 
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+
+

package/data/docs/echart.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>
+
+#### 展示组件
+
+# 百度图表 TmEchart
+
+可以通过onInt或者ref函数getChart取得ECharts对象自行处理和设置数据,这个组件使用会超过530kb+大小,请小心你的包大小限制,超过大小哦.
+使用时请注意找到图表目录：node_modules/echarts/lib/core/echarts.js,
+      把原来的：
+      defaultRenderer = root.__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer;
+      defaultCoarsePointer = retrieve2(root.__ECHARTS__DEFAULT__COARSE_POINTER, defaultCoarsePointer);
+      var devUseDirtyRect = root.__ECHARTS__DEFAULT__USE_DIRTY_RECT__;
+      改成如下：
+      defaultRenderer = root?.__ECHARTS__DEFAULT__RENDERER__ ?? defaultRenderer;
+      defaultCoarsePointer = retrieve2(root?.__ECHARTS__DEFAULT__COARSE_POINTER, defaultCoarsePointer);
+      var devUseDirtyRect = root?.__ECHARTS__DEFAULT__USE_DIRTY_RECT__??null;
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/echart"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/echart.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| width | string\|number | '100%' | 宽度css合法值,不要用auto | 
+| height | string\|number | '300px' | 高度，css合法值,不要用auto，需要一个值,单位随意，不带单位默认是rpx | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+| onInit | 名称：chart,对象, | - | 初始成功触发 | 
+| click | 名称：chart,的事件对象参数, | - | 图表元素被点击时触发 | 
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| getChart | - | - | - | 
+| getImg | - | - | - | 
+
+

package/data/docs/float-drawer.md

@@ -0,0 +1,79 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 反馈组件
+
+# 浮动面板 TmFloatDrawer
+
+浮动面板组件，用于显示浮动的抽屉式内容区域。
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/float-drawer"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/float-drawer.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| show | boolean | false | 控制面板打开状态，可v-model:show双向绑定true=展开到最高位置，false=默认最小位置 | 
+| onlyHeader | boolean | false | 是否仅允许通过标题栏拖动。 | 
+| duration | number | 350 | 动画时间 | 
+| round | string | "" | 向上的圆角空值时，取全局配置的圆角。 | 
+| size | string | "20%" | 百分比，数字字符或者带单位,默认露出的内容高度 | 
+| maxHeight | string | "80%" | 弹层最大的高度值，默认为屏幕的可视高提供值时不能为百分比，可以是px,rpx单位数字。如果你不带单位，默认转换为rpx单位。 | 
+| triggerDy | number | 50 | 当拖动时，触发打开和关闭时的临界值，单位是px如果没有达到此临界值时，将会回弹至原始位置。 | 
+| threshold | number | 0.15 | 当拖动时，如果已经达到了关闭和打开时的临界值时可以继续拖拉时缓动阻尼值 | 
+| bgColor | string | "white" | 内容层的背景色 | 
+| darkBgColor | string | "" | 暗黑的背景色,空时，取全局的sheetDarkColor | 
+| actionColor | string | "#888888" | 拖动标题栏的横线背景色 | 
+| disabledScroll | boolean | false | 禁用内部的容器并采用view容器 | 
+| containerType | string | 'scroll' | 没有禁用disabledScroll生效容器内部使用的类型scroll:scroll-viewlist:list-view | 
+| disabled | boolean | false | 是否禁用用户滚动等来触发关闭或者打开。 | 
+| zIndex | number | 100 | 层级 | 
+| contentMargin | string | "016px16px16px" | 控制内容的边跑,有时需要自定布局时非常有用.请直接使用stylecss规则写margin, | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+| close | - | - | 关闭时执行 | 
+| open | - | - | 打开执行的事件 | 
+| beforeOpen | - | - | 打开前执行 | 
+| beforeClose | - | - | 关闭前执行 | 
+| heightChange | - | - | 高度位置变化时触发这个差值.返回参数evt是个百分比,0%是最低下,100%代表是在最顶部. | 
+| movestart | - | - | 开始拖动 | 
+| moveend | - | - | 结束拖动 | 
+| update:show | - | - | 等同v-model:show | 
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+| default | - | - | 
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+
+

package/data/docs/form-item.md

@@ -0,0 +1,67 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 表单组件
+
+# 表单子组件 TmFormItem
+
+表单组件的校验规则现在统一放到了form组件上，form-item上不再配置校验，主要是方便统一管理校验模块，并且校验函数作了升级处理。
+嵌套表单时，name值以.连接，比如"a.b.c"
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/form"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/form.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| name | string | '' | 表单字段唯一标识。 | 
+| required | string\|boolean | "*" | 必款时的符号，如果为false，或者空则不显示 | 
+| label | string | "" | 表单标题 | 
+| direction | string | "" | 方向，这里会覆盖form父上的方向值。 | 
+| labelWidth | string\|number | "" | 方向,里会覆盖form父上的值。 | 
+| showLabel | boolean | true | - | 
+| showBottom | boolean | true | - | 
+| labelFontSize | string\|number | "" | 标题字号大小，会覆盖父form值 | 
+| labelFontColor | string | "" | 标题颜色，会覆盖父form值 | 
+| bottomGap | string\|number | "" | 标题颜色，会覆盖父form值 | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+| label | - | - | 
+| default | - | 表单默认插槽,可以不是直接form-item直接子节点,可以根据自己需要随意布局,只要form-item在里面即可. | 
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+
+

package/data/docs/form.md

@@ -0,0 +1,68 @@
+---
+title: tmui 3.2.0 组件库
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+#### 表单组件
+
+# 表单 TmForm
+
+表单组件的校验规则现在统一放到了form组件上，form-item上不再配置校验，主要是方便统一管理校验模块，并且校验函数作了升级处理。
+嵌套表单时，name值以.连接，比如"a.b.c"
+
+## :hot_pepper: 示例
+
+<webview url="https://tmui.design/h5by32/#/pages/index/form"></webview>
+
+::: details 示例模板
+
+<<< ../../../src/pages/index/form.vue{vue}
+
+:::
+
+## :hot_pepper: 兼容性
+
+平台兼容
+|H5|uniAPP|小程序|version|
+|---|---|---|---|
+|☑️|☑️|☑️|☑️|☑️|1.0.0|
+
+## :seedling: 参数
+| 参数名 | 类型 | 默认值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| modelValue | Record\<string, any\> | ()=\>{return{}} | - | 
+| rules | Record\<string, Array\<TM.FORM_RULE\> \| TM.FORM_RULE\> | ():Record\<string,Array\<TM.FORM_RULE\>\>=\>{return{}} | 表单校验规则经过验证后，觉得把form-item的rules属性去掉,直接使用form上统一到一起rules属性,这样就可以不用写form-item了. | 
+| direction | string | "horizontal" | 方向,子组件的方向会覆盖此处。 | 
+| labelWidth | string\|number | "160" | 方向,子组件的覆盖此处。 | 
+| labelFontSize | string\|number | "30" | 标题字号大小 | 
+| labelFontColor | string | "#333333" | 标题颜色 | 
+| gap | string\|number | "10" | 间隙，项目之间的间距。 | 
+
+
+## :rose: 事件
+| 事件名 | 参数 | 返回数据 | 描述 |
+| --- | --- | --- | --- |
+| submit | 名称：result,校验结果, | - | 提交表单时触发. | 
+| update:modelValue | - | - | 表单数据时一定要vmodel绑定,当重置时会触发此事件。 | 
+
+
+## :corn: slot插槽
+| 插槽名 | 数据 | 描述 |
+| :--: | :--: |  :-- |
+| default | - | 表单默认插槽,可以不是直接form-item直接子节点,可以根据自己需要随意布局,只要form-item在里面即可. | 
+
+
+## :green_salad: ref方法
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--: | :--: | :--: | :-- |
+| submit | - | - | - | 
+| validate | - | - | - | 
+| reset | - | - | - | 
+
+