tmui-cli 1.3.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/README.md +58 -82
  2. package/data/components.json +637 -0
  3. package/data/config.json +169 -0
  4. package/data/doc-index.json +61 -0
  5. package/data/docs/alert.md +79 -0
  6. package/data/docs/avatar-group.md +73 -0
  7. package/data/docs/badge.md +62 -0
  8. package/data/docs/between-time.md +76 -0
  9. package/data/docs/button.md +114 -0
  10. package/data/docs/calendar-multiple.md +90 -0
  11. package/data/docs/cell.md +91 -0
  12. package/data/docs/checkbox-group.md +62 -0
  13. package/data/docs/checkbox.md +74 -0
  14. package/data/docs/circle-progress.md +74 -0
  15. package/data/docs/code-input.md +77 -0
  16. package/data/docs/col.md +57 -0
  17. package/data/docs/collapse-item.md +76 -0
  18. package/data/docs/collapse.md +59 -0
  19. package/data/docs/countdown.md +79 -0
  20. package/data/docs/date-view.md +65 -0
  21. package/data/docs/drawer.md +94 -0
  22. package/data/docs/dropdown-item.md +68 -0
  23. package/data/docs/dropdown-menu.md +70 -0
  24. package/data/docs/echart.md +69 -0
  25. package/data/docs/float-drawer.md +79 -0
  26. package/data/docs/form-item.md +67 -0
  27. package/data/docs/form.md +68 -0
  28. package/data/docs/html.md +70 -0
  29. package/data/docs/icon.md +67 -0
  30. package/data/docs/image.md +73 -0
  31. package/data/docs/input.md +126 -0
  32. package/data/docs/modal.md +92 -0
  33. package/data/docs/money.md +70 -0
  34. package/data/docs/more.md +69 -0
  35. package/data/docs/navbar.md +82 -0
  36. package/data/docs/picker-date.md +75 -0
  37. package/data/docs/picker-selected.md +75 -0
  38. package/data/docs/picker-time.md +77 -0
  39. package/data/docs/picker-view.md +70 -0
  40. package/data/docs/picker.md +76 -0
  41. package/data/docs/popover.md +68 -0
  42. package/data/docs/progress.md +72 -0
  43. package/data/docs/pull-refresh.md +73 -0
  44. package/data/docs/radio-group.md +61 -0
  45. package/data/docs/radio.md +74 -0
  46. package/data/docs/rate.md +72 -0
  47. package/data/docs/row.md +61 -0
  48. package/data/docs/sheet.md +72 -0
  49. package/data/docs/sign-board.md +61 -0
  50. package/data/docs/skeleton.md +60 -0
  51. package/data/docs/sku.md +69 -0
  52. package/data/docs/slider-double.md +71 -0
  53. package/data/docs/slider-menu.md +78 -0
  54. package/data/docs/slider.md +71 -0
  55. package/data/docs/stepper.md +76 -0
  56. package/data/docs/steps-item.md +71 -0
  57. package/data/docs/steps.md +73 -0
  58. package/data/docs/sticky-header.md +57 -0
  59. package/data/docs/sticky.md +55 -0
  60. package/data/docs/switch-slider.md +82 -0
  61. package/data/docs/switch.md +68 -0
  62. package/data/docs/tabbar.md +83 -0
  63. package/data/docs/tabs.md +84 -0
  64. package/data/docs/tag.md +78 -0
  65. package/data/docs/text.md +69 -0
  66. package/data/docs/upload-photo.md +86 -0
  67. package/data/docs/upload-video.md +86 -0
  68. package/data/docs//346/250/241/346/235/277.md +47 -0
  69. package/data/examples/alert.vue +39 -0
  70. package/data/examples/avatar-group.vue +97 -0
  71. package/data/examples/badge.vue +87 -0
  72. package/data/examples/between-time.vue +39 -0
  73. package/data/examples/button.vue +70 -0
  74. package/data/examples/calendar-multiple.vue +57 -0
  75. package/data/examples/cell.vue +39 -0
  76. package/data/examples/checkbox.vue +71 -0
  77. package/data/examples/circle-progress.vue +69 -0
  78. package/data/examples/code-input.vue +36 -0
  79. package/data/examples/collapse.vue +76 -0
  80. package/data/examples/countdown.vue +39 -0
  81. package/data/examples/drawer.vue +138 -0
  82. package/data/examples/dropdown-menu.vue +59 -0
  83. package/data/examples/echart.vue +91 -0
  84. package/data/examples/float-drawer.vue +45 -0
  85. package/data/examples/form.vue +147 -0
  86. package/data/examples/html.vue +53 -0
  87. package/data/examples/icon.vue +65 -0
  88. package/data/examples/image.vue +38 -0
  89. package/data/examples/input.vue +66 -0
  90. package/data/examples/modal.vue +122 -0
  91. package/data/examples/money.vue +60 -0
  92. package/data/examples/more.vue +47 -0
  93. package/data/examples/navbar.vue +68 -0
  94. package/data/examples/picker-date.vue +53 -0
  95. package/data/examples/picker-selected.vue +35 -0
  96. package/data/examples/picker-time.vue +46 -0
  97. package/data/examples/picker-view.vue +35 -0
  98. package/data/examples/picker.vue +101 -0
  99. package/data/examples/popover.vue +130 -0
  100. package/data/examples/progress.vue +57 -0
  101. package/data/examples/pull-refresh.vue +41 -0
  102. package/data/examples/radio.vue +61 -0
  103. package/data/examples/rate.vue +35 -0
  104. package/data/examples/row.vue +52 -0
  105. package/data/examples/sheet.vue +36 -0
  106. package/data/examples/sign-board.vue +43 -0
  107. package/data/examples/skeleton.vue +45 -0
  108. package/data/examples/sku.vue +106 -0
  109. package/data/examples/slider-menu.vue +65 -0
  110. package/data/examples/slider.vue +51 -0
  111. package/data/examples/stepper.vue +44 -0
  112. package/data/examples/steps.vue +77 -0
  113. package/data/examples/sticky.vue +46 -0
  114. package/data/examples/switch-slider.vue +113 -0
  115. package/data/examples/switch.vue +62 -0
  116. package/data/examples/tabbar.vue +41 -0
  117. package/data/examples/tabs.vue +46 -0
  118. package/data/examples/tag.vue +69 -0
  119. package/data/examples/text.vue +38 -0
  120. package/data/examples/upload-photo.vue +39 -0
  121. package/data/examples/upload-video.vue +29 -0
  122. package/data/guides/cli.md +110 -0
  123. package/data/guides//344/273/213/347/273/215.md +34 -0
  124. package/data/guides//345/205/274/345/256/271/346/200/247.md +41 -0
  125. package/data/guides//345/215/225/344/275/215/346/240/207/347/255/276/350/257/264/346/230/216.md +22 -0
  126. package/data/guides//345/233/275/351/231/205/345/214/226.md +454 -0
  127. package/data/guides//345/256/211/350/243/205.md +103 -0
  128. package/data/guides//345/260/217/347/250/213/345/272/217/345/210/206/344/272/253.md +34 -0
  129. package/data/guides//345/270/270/350/247/201/351/227/256/351/242/230.md +102 -0
  130. package/data/guides//345/277/253/351/200/237/344/270/212/346/211/213.md +191 -0
  131. package/data/guides//346/233/264/346/226/260/346/227/245/345/277/227.md +155 -0
  132. package/data/guides//350/264/241/347/214/256/350/200/205.md +97 -0
  133. package/dist/main.mjs +93 -0
  134. package/package.json +54 -50
  135. package/bin/cmdTool.js +0 -229
  136. package/bin/createTmui.js +0 -383
  137. package/bin/dirTool.js +0 -152
  138. package/bin/hooks.js +0 -233
  139. package/bin/net.js +0 -139
  140. package/bin/selectedDir.js +0 -28
  141. package/bin/tmui.js +0 -28
  142. package/dist/tmui.js +0 -1
  143. package/webpack.config.js +0 -17
  144. package/website/css/app.fa961c8f.css +0 -1
  145. package/website/css/chunk-vendors.4ad1cdb5.css +0 -2
  146. package/website/favicon.ico +0 -0
  147. package/website/index.html +0 -1
  148. package/website/js/app.b68ad484.js +0 -2
  149. package/website/js/app.b68ad484.js.map +0 -1
  150. package/website/js/chunk-vendors.d9ea5cfa.js +0 -15
  151. package/website/js/chunk-vendors.d9ea5cfa.js.map +0 -1
@@ -0,0 +1,90 @@
1
+ ---
2
+ title: tmui 3.2.0 组件库
3
+ ---
4
+
5
+ <script setup>
6
+ import webview from '../components/mobileWebview.vue'
7
+ import headertips from '../components/headertips.vue'
8
+ </script>
9
+
10
+ <headertips></headertips>
11
+
12
+ #### 表单组件
13
+
14
+ # 日历 tmCalendarMultiple
15
+
16
+ 以单选和多选,无限循环滚动
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/calendar-multiple"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/calendar-multiple.vue{vue}
25
+
26
+ :::
27
+
28
+ ## :hot_pepper: 兼容性
29
+
30
+ 平台兼容
31
+ |H5|uniAPP|小程序|version|
32
+ |---|---|---|---|
33
+ |☑️|☑️|☑️|☑️|☑️|1.0.0|
34
+
35
+ ## :seedling: 参数
36
+ | 参数名 | 类型 | 默认值 | 描述 |
37
+ | :--: | :--: | :--: | :-- |
38
+ | modelValue | Array | ():string[]=\>[]asstring[] | 同步当前时间v-model不受控:model-value |
39
+ | model | union | 'day' | 范围选择模式day:天数多选,通过multipleMax可以设置允许选择的天数range:天数的范围选择,起始和终止 |
40
+ | multipleMax | number | -1 | 多选模式时,允许选择的最大天数。 |
41
+ | disabledDays | Array | ():string[]=\>[]asstring[] | 禁用的日期字符串如"2023-12-12"它与下面的start,end不冲突。 |
42
+ | startDate | string | '1900-1-1' | 允许选择的开始日期 |
43
+ | vertical | boolean | false | 是否上下切换日历 |
44
+ | endDate | string | '2100-1-1' | 允许选择的结束日期 |
45
+ | currentDate | string | '' | 当前显示的月份,默认以modalValue中的第一项为初始月如果为空,显示本月,可以控制这里切换显示的日期 |
46
+ | dateStyle | Array | ():TM.tmCalendarDateStyle_type[]=\>[]asTM.tmCalendarDateStyle_type[] | 设置指定日期的样式数据类型见:TM.tmCalendarDateStyle_type |
47
+ | format | string | 'YYYY-MM-DD' | 同步vmodel时格式化模板 |
48
+ | color | string | '' | 选中的主题色,默认空值,取全局主题色如果提供了dateStyle,以dateStyle为准 |
49
+ | fontColor | string | '#333333' | 默认的文字颜色如果提供了dateStyle,以dateStyle为准 |
50
+ | fontDarkColor | string | '#ffffff' | 默认的暗黑文字颜色如果提供了dateStyle,以dateStyle为准 |
51
+ | activeFontColor | string | '#ffffff' | 默认选中时的文字颜色如果提供了dateStyle,以dateStyle为准 |
52
+ | rangColor | string | '' | 范围选中时,范围中间的选中颜色,如果为空,为color的透明度0.5; |
53
+ | rangFontColor | string | '' | - |
54
+ | headBgColor | string | 'transparent' | 头的背景颜色,默认为透明 |
55
+ | headFontColor | string | '' | 头的文字颜色,提供了后暗黑失效会以这个为准。 |
56
+ | headStyle | string | '' | 头部自定义样式。 |
57
+ | renderOnly | boolean | true | 循环渲染时,是否只渲染当前面板(如果你在pad等10年前的低端机上渲染日历有压力请打开此值为true)关闭后可以提升滑动体验。 |
58
+ | seekDay | number | 0 | 你当前的一周的第一天的索引值是几:0:周一,1:周二,2:周三,3:周四,4:周五,5:周六,6:周日 |
59
+ | dateStatus | Array | ():TM.tmCalendarDateStyleStatusType[]=\>[]asTM.tmCalendarDateStyleStatusType[] | 给日期设定状态类型为:TM.tmCalendarDateStyleStatusType[] |
60
+ | showClear | boolean | true | 显示清空按钮 |
61
+ | showFooter | boolean | true | 显示页脚 |
62
+ | isSameDay | boolean | true | 是否允许选择同一天 |
63
+
64
+
65
+ ## :rose: 事件
66
+ | 事件名 | 参数 | 返回数据 | 描述 |
67
+ | --- | --- | --- | --- |
68
+ | change | 名称:value,当前变化的日期, | - | 时间变化时触发 |
69
+ | click | 名称:value,当前被点击的日期, | - | 当前日历面板的日期被点击时触发 |
70
+ | currentChange | 名称:value,当前激活面板的日期, | - | 当前激活面板月份改变时触发(就是当前看到的月份面板) |
71
+ | update:modelValue | 名称:value,当前选中日期, | - | 同步当前的选中的日期绑定 |
72
+ | update:currentDate | 名称:value,当前查看的月分日期, | - | 同步当前查看的月份日期,请以日期形式提供值 |
73
+
74
+
75
+ ## :corn: slot插槽
76
+ | 插槽名 | 数据 | 描述 |
77
+ | :--: | :--: | :-- |
78
+ | header | - | 日历头,隐藏使用空插槽,将隐藏,如果想自定,请通过ref函数来翻页控制日历走向。 |
79
+ | footer | - | 日历尾部 |
80
+
81
+
82
+ ## :green_salad: ref方法
83
+ | 方法名 | 参数 | 返回值 | 描述 |
84
+ | :--: | :--: | :--: | :-- |
85
+ | next | - | - | 下月 |
86
+ | prev | - | - | 上月 |
87
+ | setCurrentMonth | - | - | 设置日历返回到本月 |
88
+ | clear | - | - | 清空选择 |
89
+
90
+
@@ -0,0 +1,91 @@
1
+ ---
2
+ title: tmui 3.2.0 组件库
3
+ ---
4
+
5
+ <script setup>
6
+ import webview from '../components/mobileWebview.vue'
7
+ import headertips from '../components/headertips.vue'
8
+ </script>
9
+
10
+ <headertips></headertips>
11
+
12
+ #### 展示组件
13
+
14
+ # 列表 TmCell
15
+
16
+ 样式丰富常用警告提醒
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/cell"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/cell.vue{vue}
25
+
26
+ :::
27
+
28
+ ## :hot_pepper: 兼容性
29
+
30
+ 平台兼容
31
+ |H5|uniAPP|小程序|version|
32
+ |---|---|---|---|
33
+ |☑️|☑️|☑️|☑️|☑️|1.0.0|
34
+
35
+ ## :seedling: 参数
36
+ | 参数名 | 类型 | 默认值 | 描述 |
37
+ | :--: | :--: | :--: | :-- |
38
+ | icon | string | "" | 左图标 |
39
+ | avatarRound | string | "8" | 左侧图标、头像圆角。默认为8 |
40
+ | color | string | 'white' | 背景的主题色 |
41
+ | darkColor | string | '' | 暗黑背景的主题色,空值时取sheetDarkColor |
42
+ | iconColor | string | "" | 图标色,空值时取全局主题值。 |
43
+ | title | string | "标题" | 标题 |
44
+ | titleColor | string | "black" | 标题颜色 |
45
+ | darkTitleColor | string | "white" | 暗黑标题颜色,如果不填写取白 |
46
+ | titleSize | string\|number | "32" | 标题大小 |
47
+ | iconSize | string\|number | "42" | 左边图标大小 |
48
+ | label | string | "" | 右边文本 |
49
+ | labelColor | string | "#bfbfbf" | 右边文本颜色 |
50
+ | labelSize | string\|number | "24" | 右侧label文字大小 |
51
+ | desc | string | "" | 标题正文的简介文本 |
52
+ | showBottomBorder | boolean | true | 是否显示下边线 |
53
+ | bottomBorderInsert | boolean | false | 是否让下边线显示居右,不贯穿到左边。 |
54
+ | bottomBorderColor | string | "" | 下边线的颜色。如果你设定了的话。暗黑的边颜色失效,采用你自定的颜色。 |
55
+ | link | boolean | true | 是否显示链接状态,有点按效果。包括出现右边跳转指示。关闭的话,事件反应和跳转会更快。如果true右侧箭头图标会显示 |
56
+ | url | string | "" | 需要跳转的页面地址。如果填写了右侧箭头图标会显示 |
57
+ | openType | string | "navigate" | - |
58
+ | card | boolean | true | 是否是卡片模式 |
59
+ | round | string\|number | "" | 卡片模式圆角,不填写采用全局的cardRadius属性值. |
60
+ | leftSize | string\|number | '60' | 左边图标区域宽和高的大小。 |
61
+ | minHeight | string\|number | "88" | 最小高度,主要是用来统一风格高度不至于让点击范围过小如果你需要紧凑型可以设置为auto |
62
+ | lrPadding | string\|number | "32" | 左右的间隙。 |
63
+ | linkIcon | string | "arrow-right-s-line" | - |
64
+ | tbPadding | string\|number | "32" | 上下间隙 |
65
+ | rightWidth | string\|number | "50%" | 右侧最大宽 |
66
+
67
+
68
+ ## :rose: 事件
69
+ | 事件名 | 参数 | 返回数据 | 描述 |
70
+ | --- | --- | --- | --- |
71
+ | click | - | - | 项目点击 |
72
+
73
+
74
+ ## :corn: slot插槽
75
+ | 插槽名 | 数据 | 描述 |
76
+ | :--: | :--: | :-- |
77
+ | avatar | 名称:binding,icon 类型:string
78
+ | 头像图标 |
79
+ | default | - | 默认标题插槽 |
80
+ | desc | 名称:binding,desc 类型:string
81
+ | 简介 |
82
+ | label | 名称:binding,label 类型:string
83
+ | 右边文字 |
84
+ | right | - | 右插槽 |
85
+
86
+
87
+ ## :green_salad: ref方法
88
+ | 方法名 | 参数 | 返回值 | 描述 |
89
+ | :--: | :--: | :--: | :-- |
90
+
91
+
@@ -0,0 +1,62 @@
1
+ ---
2
+ title: tmui 3.2.0 组件库
3
+ ---
4
+
5
+ <script setup>
6
+ import webview from '../components/mobileWebview.vue'
7
+ import headertips from '../components/headertips.vue'
8
+ </script>
9
+
10
+ <headertips></headertips>
11
+
12
+ #### 表单组件
13
+
14
+ # 多选框组 TmCheckboxGroup
15
+
16
+ 可单单独使用,也可多选组合使用
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/checkbox"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/checkbox.vue{vue}
25
+
26
+ :::
27
+
28
+ ## :hot_pepper: 兼容性
29
+
30
+ 平台兼容
31
+ |H5|uniAPP|小程序|version|
32
+ |---|---|---|---|
33
+ |☑️|☑️|☑️|☑️|☑️|1.0.0|
34
+
35
+ ## :seedling: 参数
36
+ | 参数名 | 类型 | 默认值 | 描述 |
37
+ | :--: | :--: | :--: | :-- |
38
+ | modelValue | Array\<string \| number \| boolean\> | ()=\>[]asstring[] | - |
39
+ | direction | string | "row" | - |
40
+ | align | string | "flex-start" | - |
41
+ | max | number | -1 | - |
42
+ | gap | number\|string\|Array\<string \| number\> | 20 | 排列时之间的间隙,如果是数组第一项是列间隙,第二项是行间隙 |
43
+
44
+
45
+ ## :rose: 事件
46
+ | 事件名 | 参数 | 返回数据 | 描述 |
47
+ | --- | --- | --- | --- |
48
+ | change | - | - | - |
49
+ | update:modelValue | - | - | - |
50
+
51
+
52
+ ## :corn: slot插槽
53
+ | 插槽名 | 数据 | 描述 |
54
+ | :--: | :--: | :-- |
55
+ | default | - | - |
56
+
57
+
58
+ ## :green_salad: ref方法
59
+ | 方法名 | 参数 | 返回值 | 描述 |
60
+ | :--: | :--: | :--: | :-- |
61
+
62
+
@@ -0,0 +1,74 @@
1
+ ---
2
+ title: tmui 3.2.0 组件库
3
+ ---
4
+
5
+ <script setup>
6
+ import webview from '../components/mobileWebview.vue'
7
+ import headertips from '../components/headertips.vue'
8
+ </script>
9
+
10
+ <headertips></headertips>
11
+
12
+ #### 表单组件
13
+
14
+ # 多选框 TmCheckbox
15
+
16
+ 可单单独使用,也可多选组合使用
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/checkbox"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/checkbox.vue{vue}
25
+
26
+ :::
27
+
28
+ ## :hot_pepper: 兼容性
29
+
30
+ 平台兼容
31
+ |H5|uniAPP|小程序|version|
32
+ |---|---|---|---|
33
+ |☑️|☑️|☑️|☑️|☑️|1.0.0|
34
+
35
+ ## :seedling: 参数
36
+ | 参数名 | 类型 | 默认值 | 描述 |
37
+ | :--: | :--: | :--: | :-- |
38
+ | color | string | '' | 当前主题色,空值时取全局 |
39
+ | unCheckColor | string | '' | 当前未选中时主题色,空值时取全局 |
40
+ | darkUnCheckColor | string | '' | 当前未选中时的暗黑主题色 |
41
+ | modelValue | string\|number\|boolean | '' | 当前双向绑定值 |
42
+ | value | string\|number\|boolean | true | 选中的值, |
43
+ | unCheckValue | string\|number\|boolean | '' | 未选中的值 |
44
+ | disabled | boolean | false | 是否禁用 |
45
+ | icon | string | 'check-line' | 选中的图标名称。 |
46
+ | label | string | '' | 右侧文字。 |
47
+ | hiddenCheckbox | boolean\|string | false | 是否隐藏选中框。然后利用默认插槽自定义选中所有样式和状态。 |
48
+ | indeterminate | boolean\|string | false | 半选中 |
49
+ | size | string\|number | '42' | 尺寸 |
50
+ | iconSize | string\|number | '40' | 中间小图标大小 |
51
+ | labelFontSize | string\|number | '30' | 文字大小 |
52
+ | showLabel | boolean | true | 如果不要显示label时设置为false可以隐藏label并把label间隙删除, |
53
+
54
+
55
+ ## :rose: 事件
56
+ | 事件名 | 参数 | 返回数据 | 描述 |
57
+ | --- | --- | --- | --- |
58
+ | change | 名称:check,当前是否选中,名称:value,当前选中的值, | - | 用户交互切换,选中变换时触发。 |
59
+ | click | - | - | 点击事件 |
60
+ | update:modelValue | - | - | - |
61
+
62
+
63
+ ## :corn: slot插槽
64
+ | 插槽名 | 数据 | 描述 |
65
+ | :--: | :--: | :-- |
66
+ | label | 名称:binding,checked 类型:-
67
+ | - |
68
+
69
+
70
+ ## :green_salad: ref方法
71
+ | 方法名 | 参数 | 返回值 | 描述 |
72
+ | :--: | :--: | :--: | :-- |
73
+
74
+
@@ -0,0 +1,74 @@
1
+ ---
2
+ title: tmui 3.2.0 组件库
3
+ ---
4
+
5
+ <script setup>
6
+ import webview from '../components/mobileWebview.vue'
7
+ import headertips from '../components/headertips.vue'
8
+ </script>
9
+
10
+ <headertips></headertips>
11
+
12
+ #### 反馈组件
13
+
14
+ # 圆环进度条 TmCircleProgress
15
+
16
+ 通用进度条组件。
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/circle-progress"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/circle-progress.vue{vue}
25
+
26
+ :::
27
+
28
+ ## :hot_pepper: 兼容性
29
+
30
+ 平台兼容
31
+ |H5|uniAPP|小程序|version|
32
+ |---|---|---|---|
33
+ |☑️|☑️|☑️|☑️|☑️|1.0.0|
34
+
35
+ ## :seedling: 参数
36
+ | 参数名 | 类型 | 默认值 | 描述 |
37
+ | :--: | :--: | :--: | :-- |
38
+ | modelValue | number | 0 | 当前进度值 |
39
+ | min | number | 0 | 最小值 |
40
+ | startAngle | number | 0 | 起始角度,默认是0,正上方顺时针 |
41
+ | max | number | 100 | 最大值 |
42
+ | color | string | "" | 进度条颜色 |
43
+ | linearColor | string | '' | 线性渐变颜色 |
44
+ | bgColor | string | "info" | 背景颜色 |
45
+ | darkBgColor | string | "" | 暗黑模式背景颜色 |
46
+ | showLabel | union | true | 是否显示进度标签 |
47
+ | labelColor | string | "#333" | 标签文字颜色 |
48
+ | darkLabelColor | string | - | 暗黑标签文字颜色 |
49
+ | labelUnit | string | '%' | 暗黑标签文字颜色 |
50
+ | labelFontSize | union | 24 | 标签字体大小 |
51
+ | lineWidth | union | 10 | 线宽 |
52
+ | size | union | 100 | 圆角环直径大小(宽高相等) |
53
+ | duration | number | 500 | 动画持续时间(毫秒) |
54
+
55
+
56
+ ## :rose: 事件
57
+ | 事件名 | 参数 | 返回数据 | 描述 |
58
+ | --- | --- | --- | --- |
59
+ | update:modelValue | - | - | 等同v-model |
60
+
61
+
62
+ ## :corn: slot插槽
63
+ | 插槽名 | 数据 | 描述 |
64
+ | :--: | :--: | :-- |
65
+ | default | 名称:binding,percentage 类型:-
66
+ 名称:binding,value 类型:-
67
+ | 标签插槽 |
68
+
69
+
70
+ ## :green_salad: ref方法
71
+ | 方法名 | 参数 | 返回值 | 描述 |
72
+ | :--: | :--: | :--: | :-- |
73
+
74
+
@@ -0,0 +1,77 @@
1
+ ---
2
+ title: tmui 3.2.0 组件库
3
+ ---
4
+
5
+ <script setup>
6
+ import webview from '../components/mobileWebview.vue'
7
+ import headertips from '../components/headertips.vue'
8
+ </script>
9
+
10
+ <headertips></headertips>
11
+
12
+ #### 其它组件
13
+
14
+ # 验证码输入框 tmCodeInput
15
+
16
+ 验证码输入框
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/code-input"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/code-input.vue{vue}
25
+
26
+ :::
27
+
28
+ ## :hot_pepper: 兼容性
29
+
30
+ 平台兼容
31
+ |H5|uniAPP|小程序|version|
32
+ |---|---|---|---|
33
+ |☑️|☑️|☑️|☑️|☑️|1.0.0|
34
+
35
+ ## :seedling: 参数
36
+ | 参数名 | 类型 | 默认值 | 描述 |
37
+ | :--: | :--: | :--: | :-- |
38
+ | autoFocus | boolean | false | 进入时自动获取焦点,并弹出系统自带的键盘(需要useSysKeyborad=true)。 |
39
+ | useSysKeyborad | boolean | true | 是否使用系统自带的键盘。,如果为false你需要自行配置输入键盘比如使用我的keyborad键盘组件。 |
40
+ | modelValue | string | "" | 当前输入的值 |
41
+ | maxlength | number | 4 | 最大长度 |
42
+ | gutter | string | "16" | 间距 |
43
+ | width | string\|number | "100" | 验证码框的宽 |
44
+ | height | string\|number | "100" | 验证码框的高 |
45
+ | fontColor | string | "" | 当前输入项激活时的文字颜色同时也是高亮时的背景色。默认取全局主题 |
46
+ | darkFontColor | string | "" | 暗黑时的主题色,不填写等同fontColor |
47
+ | fontSize | string | "42" | 文字大小 |
48
+ | round | string | "16" | 圆角 |
49
+ | bgColor | string | "#f0f0f0" | skin=fill时的背景 |
50
+ | darkBgColor | string | "#272727" | skin=fill时的暗黑背景 |
51
+ | borderColor | string | "" | skin=outline时的边线颜色 |
52
+ | darkBorderColor | string | "" | skin=outline时的暗黑边线颜色 |
53
+ | unBorderColor | string | "#e3e3e3" | skin=outline时的边线颜色[非激活时] |
54
+ | unDarkBorderColor | string | "#2c2b2c" | skin=outline时的暗黑边线颜色[非激活时] |
55
+ | skin | string | "outline" | - |
56
+ | placeShape | string | "round" | 待输入时的占位形状line线型round圆形空值表示不需要占位符号 |
57
+
58
+
59
+ ## :rose: 事件
60
+ | 事件名 | 参数 | 返回数据 | 描述 |
61
+ | --- | --- | --- | --- |
62
+ | click | - | - | 输入框点击时触发 |
63
+ | confirm | 名称:value,值, | - | 自带键盘上确认或者达到指定长度位数时触发,可能会多次触发 |
64
+ | change | 名称:value,值, | - | 输入时触发 |
65
+ | update:modelValue | - | - | 等同vmodel,可与我的keyborad键盘配合使用。 |
66
+
67
+
68
+ ## :corn: slot插槽
69
+ | 插槽名 | 数据 | 描述 |
70
+ | :--: | :--: | :-- |
71
+
72
+
73
+ ## :green_salad: ref方法
74
+ | 方法名 | 参数 | 返回值 | 描述 |
75
+ | :--: | :--: | :--: | :-- |
76
+
77
+
@@ -0,0 +1,57 @@
1
+ ---
2
+ title: tmui 3.2.0 组件库
3
+ ---
4
+
5
+ <script setup>
6
+ import webview from '../components/mobileWebview.vue'
7
+ import headertips from '../components/headertips.vue'
8
+ </script>
9
+
10
+ <headertips></headertips>
11
+
12
+ #### 常用组件
13
+
14
+ # 布局Col TmCol
15
+
16
+ 快速排版布局利器,内只能放置在父组件tmRow中
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/row"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/row.vue{vue}
25
+
26
+ :::
27
+
28
+ ## :hot_pepper: 兼容性
29
+
30
+ 平台兼容
31
+ |H5|uniAPP|小程序|version|
32
+ |---|---|---|---|
33
+ |☑️|☑️|☑️|☑️|☑️|1.0.0|
34
+
35
+ ## :seedling: 参数
36
+ | 参数名 | 类型 | 默认值 | 描述 |
37
+ | :--: | :--: | :--: | :-- |
38
+ | span | number\|string | 1 | 列宽,它是根据row定义的总列宽计算具体的宽度值。 |
39
+
40
+
41
+ ## :rose: 事件
42
+ | 事件名 | 参数 | 返回数据 | 描述 |
43
+ | --- | --- | --- | --- |
44
+ | click | - | - | 点击事件 |
45
+
46
+
47
+ ## :corn: slot插槽
48
+ | 插槽名 | 数据 | 描述 |
49
+ | :--: | :--: | :-- |
50
+ | default | - | 默认插槽 |
51
+
52
+
53
+ ## :green_salad: ref方法
54
+ | 方法名 | 参数 | 返回值 | 描述 |
55
+ | :--: | :--: | :--: | :-- |
56
+
57
+
@@ -0,0 +1,76 @@
1
+ ---
2
+ title: tmui 3.2.0 组件库
3
+ ---
4
+
5
+ <script setup>
6
+ import webview from '../components/mobileWebview.vue'
7
+ import headertips from '../components/headertips.vue'
8
+ </script>
9
+
10
+ <headertips></headertips>
11
+
12
+ #### 展示组件
13
+
14
+ # 折叠面板子组件 TmCollapseItem
15
+
16
+ 可单,可多开,可放置在tm-collapse内
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/collapse"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/collapse.vue{vue}
25
+
26
+ :::
27
+
28
+ ## :hot_pepper: 兼容性
29
+
30
+ 平台兼容
31
+ |H5|uniAPP|小程序|version|
32
+ |---|---|---|---|
33
+ |☑️|☑️|☑️|☑️|☑️|1.0.0|
34
+
35
+ ## :seedling: 参数
36
+ | 参数名 | 类型 | 默认值 | 描述 |
37
+ | :--: | :--: | :--: | :-- |
38
+ | name | string\|number | "" | 唯一标识 |
39
+ | showBottomLine | boolean | true | 是否显示底部边线 |
40
+ | disabled | boolean | false | 是否禁用 |
41
+ | titleFontSize | string\|number | '30' | 标题大小 |
42
+ | titleColor | string | '#333333' | 标题颜色 |
43
+ | darkTitleColor | string | '' | 拒绝礼佛标题颜色,如果不填写取白 |
44
+ | activeColor | string | '' | 激活时的颜色,空值读取全局值。 |
45
+ | color | string | 'white' | 背景 |
46
+ | darkColor | string | '' | 暗黑时的背景,如果不填写默认取sheetDarkColor |
47
+ | leftIcon | string | '' | 左边图标 |
48
+ | title | string | '' | 标题 |
49
+ | titleHeight | string | '100' | 标题高度 |
50
+ | titleLines | number | 1 | 标题最多显示几行出现省略号 |
51
+ | bottomColor | string | '#f5f5f5' | 下边线颜色.默认等同全局边线颜色. |
52
+
53
+
54
+ ## :rose: 事件
55
+ | 事件名 | 参数 | 返回数据 | 描述 |
56
+ | --- | --- | --- | --- |
57
+ | click | - | - | - |
58
+
59
+
60
+ ## :corn: slot插槽
61
+ | 插槽名 | 数据 | 描述 |
62
+ | :--: | :--: | :-- |
63
+ | left | 名称:binding,status 类型:boolean
64
+ | 左边插槽 |
65
+ | title | 名称:binding,status 类型:boolean
66
+ | 标题插槽,如果你要完全自定标题样式请在此插槽内布局 |
67
+ | right | 名称:binding,status 类型:boolean
68
+ | 右边插槽 |
69
+ | default | - | 默认内容插槽。 |
70
+
71
+
72
+ ## :green_salad: ref方法
73
+ | 方法名 | 参数 | 返回值 | 描述 |
74
+ | :--: | :--: | :--: | :-- |
75
+
76
+
@@ -0,0 +1,59 @@
1
+ ---
2
+ title: tmui 3.2.0 组件库
3
+ ---
4
+
5
+ <script setup>
6
+ import webview from '../components/mobileWebview.vue'
7
+ import headertips from '../components/headertips.vue'
8
+ </script>
9
+
10
+ <headertips></headertips>
11
+
12
+ #### 展示组件
13
+
14
+ # 折叠面板 TmCollapse
15
+
16
+ 可单,可多开,内部可放置tm-collapse-item子节点组件,动画采用了新css,兼容性请看这里:[点我](https://caniuse.com/?search=grid-template-rows)
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/collapse"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/collapse.vue{vue}
25
+
26
+ :::
27
+
28
+ ## :hot_pepper: 兼容性
29
+
30
+ 平台兼容
31
+ |H5|uniAPP|小程序|version|
32
+ |---|---|---|---|
33
+ |☑️|☑️|☑️|☑️|☑️|1.0.0|
34
+
35
+ ## :seedling: 参数
36
+ | 参数名 | 类型 | 默认值 | 描述 |
37
+ | :--: | :--: | :--: | :-- |
38
+ | modelValue | Array\<string \| number\>\|string\|number | ():string[]=\>[]asstring[] | 当前子项值。可v-model,类型兼容性高,因此不管你提供的是不是数组,最终同步时会被设置成数组 |
39
+ | multiple | boolean | true | 是否允许打开多个。 |
40
+
41
+
42
+ ## :rose: 事件
43
+ | 事件名 | 参数 | 返回数据 | 描述 |
44
+ | --- | --- | --- | --- |
45
+ | change | 名称:value,当前打开的值, | - | 变换时触发 |
46
+ | update:modelValue | - | - | - |
47
+
48
+
49
+ ## :corn: slot插槽
50
+ | 插槽名 | 数据 | 描述 |
51
+ | :--: | :--: | :-- |
52
+ | default | - | 默认插槽,可放置tm-collapse-item子节点 |
53
+
54
+
55
+ ## :green_salad: ref方法
56
+ | 方法名 | 参数 | 返回值 | 描述 |
57
+ | :--: | :--: | :--: | :-- |
58
+
59
+