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,70 @@
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
+ # HTML TmHtml
15
+
16
+ html渲染组件,这是精简后的不是所有插件都带上容易让组件变大,如果想要全部的,可以去用作者的,它是引用第三方实现见:https://github.com/jin-yufeng/mp-html
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/html"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/html.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
+ | width | string | 'auto' | 窗口宽 |
39
+ | height | string | 'auto' | 窗口高 |
40
+ | value | string | "" | 需要渲染的markdow或者html内容。 |
41
+ | selectable | boolean\|string | false | 需要渲染的markdow或者html内容。 |
42
+ | lazyLoad | boolean\|string | false | 需要渲染的markdow或者html内容。 |
43
+ | loadingImg | boolean\|string | true | 需要渲染的markdow或者html内容。 |
44
+ | errorImg | string | '' | - |
45
+ | showImgMenu | boolean\|string | true | - |
46
+ | previewImg | boolean\|number | true | - |
47
+
48
+
49
+ ## :rose: 事件
50
+ | 事件名 | 参数 | 返回数据 | 描述 |
51
+ | --- | --- | --- | --- |
52
+ | load | - | - | - |
53
+ | ready | - | - | - |
54
+ | imgtap | - | - | - |
55
+ | linktap | - | - | - |
56
+ | play | - | - | - |
57
+ | error | - | - | - |
58
+
59
+
60
+ ## :corn: slot插槽
61
+ | 插槽名 | 数据 | 描述 |
62
+ | :--: | :--: | :-- |
63
+ | default | - | - |
64
+
65
+
66
+ ## :green_salad: ref方法
67
+ | 方法名 | 参数 | 返回值 | 描述 |
68
+ | :--: | :--: | :--: | :-- |
69
+
70
+
@@ -0,0 +1,67 @@
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
+ # 图标 TmIcon
15
+
16
+ 图标,可以是图片地址或者字体名称图标.也可以是你自定义的图标.
17
+ 如何自定义图标呢:你可以在iconfont网站勾选图标->添加购物车->添加项目->项目设置,勾选woff2,勾选base64->下载本地->解压得到iconfont.css
18
+ ->复制到你的app.vue全局中即可.然后使用图标时,font-family是你的图标名称比如myicon,prefix是图标前缀比如myicon-
19
+
20
+ ## :hot_pepper: 示例
21
+
22
+ <webview url="https://tmui.design/h5by32/#/pages/index/icon"></webview>
23
+
24
+ ::: details 示例模板
25
+
26
+ <<< ../../../src/pages/index/icon.vue{vue}
27
+
28
+ :::
29
+
30
+ ## :hot_pepper: 兼容性
31
+
32
+ 平台兼容
33
+ |H5|uniAPP|小程序|version|
34
+ |---|---|---|---|
35
+ |☑️|☑️|☑️|☑️|☑️|1.0.0|
36
+
37
+ ## :seedling: 参数
38
+ | 参数名 | 类型 | 默认值 | 描述 |
39
+ | :--: | :--: | :--: | :-- |
40
+ | _style | CSSStyleDeclaration\|string | "" | - |
41
+ | _class | string | "" | - |
42
+ | name | string | "" | 图标名称,可以是图片地址 |
43
+ | size | number\|string | "32" | 图标大小,默认32rpx |
44
+ | color | string | "#333333" | 图标颜色 |
45
+ | darkColor | string | "white" | 暗黑时的图标颜色 |
46
+ | spin | boolean | false | 图标是否旋转 |
47
+ | rotate | string | "" | 旋转角度 |
48
+ | fontFamily | string | "remixicon" | - |
49
+ | prefix | string | "ri-" | - |
50
+
51
+
52
+ ## :rose: 事件
53
+ | 事件名 | 参数 | 返回数据 | 描述 |
54
+ | --- | --- | --- | --- |
55
+ | click | - | - | 点击事件 |
56
+
57
+
58
+ ## :corn: slot插槽
59
+ | 插槽名 | 数据 | 描述 |
60
+ | :--: | :--: | :-- |
61
+
62
+
63
+ ## :green_salad: ref方法
64
+ | 方法名 | 参数 | 返回值 | 描述 |
65
+ | :--: | :--: | :--: | :-- |
66
+
67
+
@@ -0,0 +1,73 @@
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
+ # 图片 TmImage
15
+
16
+ 宽高可以设置,支持百分比,px,rpx,如果你用了auto,%这种就要注意:如果你把组件放到了容器中,容器设置为v-show,display:none,visible这种,
17
+ 那你一定要跟随vif组件,不然尺寸是不对的。因为小程序无法监测这种变化的情况,导致无法设置尺寸。如果你设定了固定尺寸则不用担心这个问题。
18
+
19
+ ## :hot_pepper: 示例
20
+
21
+ <webview url="https://tmui.design/h5by32/#/pages/index/image"></webview>
22
+
23
+ ::: details 示例模板
24
+
25
+ <<< ../../../src/pages/index/image.vue{vue}
26
+
27
+ :::
28
+
29
+ ## :hot_pepper: 兼容性
30
+
31
+ 平台兼容
32
+ |H5|uniAPP|小程序|version|
33
+ |---|---|---|---|
34
+ |☑️|☑️|☑️|☑️|☑️|1.0.0|
35
+
36
+ ## :seedling: 参数
37
+ | 参数名 | 类型 | 默认值 | 描述 |
38
+ | :--: | :--: | :--: | :-- |
39
+ | width | string\|number | "100%" | 宽度,默认100%18rpx,18px,15%支持这三种单位,如果只写"18"就表示18rpx |
40
+ | height | string\|number | "auto" | 高度,auto,%,rpx,px,stringnumber18rpx,18px,15%支持这三种单位,如果只写"18"就表示18rpx |
41
+ | src | string | "" | 图片源 |
42
+ | model | string | "scaleToFill" | 模式 |
43
+ | preview | boolean | undefined | 点击后是否预览图片,默认为空值,采用全局的配置。 |
44
+ | ratio | number | 1.25 | 预览占位比例宽/高,当数据没加载前,如果你设置了一项值比如宽,高会自动根据这个比例计算当图片加载成功后,使用正确的原图片比例设置。默认是5/4=1.25 |
45
+ | round | string\|number | '0' | 圆角 |
46
+ | iconSize | string\|number | "36" | 加载和失败时的图标大小。 |
47
+ | placeBgColor | string | "#F5F5F5" | 占位背景色 |
48
+ | placeDarkBgColor | string | "" | 点位暗黑时的背景,如果不填写默认填充inputDarkBgcolor |
49
+ | fadeShow | boolean | false | 是否显示过渡动画 |
50
+ | webp | boolean | false | 在系统不支持webp的情况下是否单独启用webp。默认false,只支持网络资源。webp支持详见下面说明 |
51
+ | lazy | boolean | true | 图片懒加载 |
52
+ | draggable | boolean | false | 是否允许拖动。 |
53
+ | showMenuByLongpress | boolean | false | - |
54
+
55
+
56
+ ## :rose: 事件
57
+ | 事件名 | 参数 | 返回数据 | 描述 |
58
+ | --- | --- | --- | --- |
59
+ | click | - | - | - |
60
+ | error | - | - | - |
61
+ | load | - | - | - |
62
+
63
+
64
+ ## :corn: slot插槽
65
+ | 插槽名 | 数据 | 描述 |
66
+ | :--: | :--: | :-- |
67
+
68
+
69
+ ## :green_salad: ref方法
70
+ | 方法名 | 参数 | 返回值 | 描述 |
71
+ | :--: | :--: | :--: | :-- |
72
+
73
+
@@ -0,0 +1,126 @@
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
+ # 输入框 TmInput
15
+
16
+ 可以全局配置圆角风格.
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/input"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/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
+ | modelValue | string\|number | "" | 输入框的值 |
39
+ | inputStyle | string | "" | 输入框自定义的style样式 |
40
+ | inputClass | string | "" | 输入框自定义的class样式 |
41
+ | type | string | - | 输入类型,可选值:text,number,idcard,digit,tel,safe-password,nickname,textarea:文本域 |
42
+ | password | boolean | false | 是否是密码框 |
43
+ | showEye | boolean | false | 显示密码小眼睛 |
44
+ | placeholder | string | "请输入或选择" | 输入框的占位文字 |
45
+ | placeholderStyle | string | "color:#b1b1b1;" | 输入框的占位文字样式 |
46
+ | placeholderClass | string | "" | 输入框的占位样式 |
47
+ | align | string | "left" | 输入框的对齐方式,可选值:left,right,center |
48
+ | color | string | "" | 输入框背景 |
49
+ | darkBgColor | string | "transparent" | 输入框暗黑背景,空值取全局的配置提供会覆盖全局的配色。默认是透明 |
50
+ | fontSize | string\|number | "32" | 输入框字体大小 |
51
+ | width | string\|number | "auto" | - |
52
+ | height | string\|number | "88" | - |
53
+ | minHeight | string\|number | "auto" | - |
54
+ | inputPadding | string | "24" | 输入框内的左右间隙 |
55
+ | round | string\|number\|Array\<string \| number\> | "" | 输入框圆角,默认空值取全局的配置 |
56
+ | showClear | boolean | false | 是否显示清除按钮 |
57
+ | clearColor | string | "#b1b1b1" | 清除按钮颜色 |
58
+ | showCharCount | boolean | false | 是否显示字符字统计 |
59
+ | fontColor | string | "#333333" | 字体颜色 |
60
+ | darkFontColor | string | "" | 暗黑模式字体颜色,如果不填写自动反转 |
61
+ | focusFontColor | string | "" | 激活时的字体颜色空值取全局主题色,并且darkFontColor会失效.如果填写none则不生效 |
62
+ | leftIcon | string | "" | 左图标的名称 |
63
+ | iconColor | string | "" | 左图标的颜色默认空值取全局的主题色。 |
64
+ | rightIcon | string | "" | 右图标的名称 |
65
+ | rightText | string | "" | 右文字 |
66
+ | leftText | string | "" | 右文字 |
67
+ | disabled | boolean | false | 是否禁用 |
68
+ | focus | boolean | false | 是否聚焦 |
69
+ | confirmType | string | "done" | 键盘右下解按钮文字,可以取值:send,search,next,done只对input有效,对textarea无效 |
70
+ | cursorSpacing | number | 0 | 光标与键盘的距离,单位px |
71
+ | maxlength | number | -1 | 输入框的最大长度 |
72
+ | confirmHold | boolean | false | - |
73
+ | cursor | number | NaN | 不可用,容易引起bug |
74
+ | cursorColor | string | "" | 光标颜色,默认空值取全局配置 |
75
+ | selectionStart | number | -1 | 光标起始位置 |
76
+ | selectionEnd | number | -1 | 光标结束位置 |
77
+ | adjustPosition | boolean | true | 是否自动聚焦 |
78
+ | autoBlur | boolean | false | 是否自动失焦 |
79
+ | ignoreCompositionEvent | boolean | true | - |
80
+ | alwaysEmbed | boolean | true | 强制input处于同层状态,不可用,容易引起bug |
81
+ | holdKeyboard | boolean | false | focus时,点击页面的时候不收起键盘 |
82
+ | safePasswordCertPath | string | "" | - |
83
+ | safePasswordLength | number | NaN | - |
84
+ | safePasswordTimeStamp | number | NaN | - |
85
+ | safePasswordNonce | string | '' | - |
86
+ | safePasswordSalt | string | '' | - |
87
+ | safePasswordCustomHash | string | '' | - |
88
+ | randomNumber | boolean | false | - |
89
+ | controlled | boolean | false | - |
90
+ | alwaysSystem | boolean | false | - |
91
+ | inputmode | string | "text" | input输入模式 |
92
+ | autoHeight | boolean | false | 尽量不要使用,客户大量手机机型反馈部分手机在手写时会异常.最好固定高. |
93
+ | fixed | boolean | false | - |
94
+ | showConfirmBar | boolean | false | - |
95
+ | focusHighlight | boolean\|string | true | 是否高亮聚焦当前输入框会使用全局的主题色为边框色。 |
96
+ | focusHighlightStyle | string | '' | 高亮聚焦当前输入框的样式默认为自动全局2pxsolid主题色,如果填写了以你的为准。 |
97
+
98
+
99
+ ## :rose: 事件
100
+ | 事件名 | 参数 | 返回数据 | 描述 |
101
+ | --- | --- | --- | --- |
102
+ | linechange | 名称:evt,{height:0,heightRpx:0,lineCount:0}, | - | 输入框行数变化时触发(文本哉才有) |
103
+ | keyboardheightchange | 名称:height,键盘高度, | - | 键盘高度变化时触发 |
104
+ | confirm | 名称:value,输入的值, | - | 点击完成按钮时触发 |
105
+ | blur | - | - | 失去焦点时触发 |
106
+ | focus | - | - | 获取焦点时触发 |
107
+ | clear | - | - | 清除事件 |
108
+ | input | 名称:value,输入的值, | - | 输入时候触发 |
109
+ | update:modelValue | 名称:value,输入的值, | - | 等同v-model |
110
+
111
+
112
+ ## :corn: slot插槽
113
+ | 插槽名 | 数据 | 描述 |
114
+ | :--: | :--: | :-- |
115
+ | left | - | 左侧插槽 |
116
+ | leftIcon | - | 输入框左侧图标插槽 |
117
+ | maxlength | - | 输入框右侧显示字数 |
118
+ | rightIcon | - | 输入框内右侧图标 |
119
+ | right | - | 输入框右侧 |
120
+
121
+
122
+ ## :green_salad: ref方法
123
+ | 方法名 | 参数 | 返回值 | 描述 |
124
+ | :--: | :--: | :--: | :-- |
125
+
126
+
@@ -0,0 +1,92 @@
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
+ # 对话框 TmModal
15
+
16
+ 可全局统一更改风格。使用时注意下:如果height:auto,将失去内容滚动效果。如果要内容滚动height必定是一个值。
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/modal"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/modal.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
+ | customStyle | string | "" | 自定义遮罩样式 |
39
+ | title | string | $i18n.t("tmui32x.tmModal.title") | 标题 |
40
+ | showFooter | boolean | true | 显示底部操作栏 |
41
+ | showTitle | boolean | true | 是否显示底部关闭按钮 |
42
+ | showClose | boolean | false | 是否显示底部关闭按钮 |
43
+ | showCancel | boolean | true | 显示取消按钮 |
44
+ | overlayClick | boolean | true | 遮罩是否允许点击被关闭 |
45
+ | show | boolean | false | 显示可v-model:show双向绑定 |
46
+ | duration | number | 250 | 动画时间 |
47
+ | cancelText | string | $i18n.t("tmui32x.cancelText") | 取消按钮的文本 |
48
+ | confirmText | string | $i18n.t("tmui32x.confirmText") | 确认按钮的文本 |
49
+ | round | string\|number | "" | 打开方向为上和下时的圆角空值时,取全局配置的圆角。 |
50
+ | width | string\|number | "84%" | 宽,百分比,Px,rpx,auto都支持 |
51
+ | height | string\|number | "350" | 宽,百分比,Px,rpx,auto都支持 |
52
+ | maxHeight | string\|number | "80%" | 可以是百分比,px,rpx单位数字。如果你不带单位,默认转换为rpx单位。 |
53
+ | disabledScroll | boolean | false | 是否禁用内部的scroll标签禁用后内容不会滚动,如果设定了指定高,内容超出指定高,会被裁切但如果没有指定高,内容自动的话,高是自动的。有这个属性是因为截止4.03scroll-view里面放input不会上推键盘,及内部的viewtouchMove会失效。 |
54
+ | disabled | boolean | false | 禁用弹层 |
55
+ | bgColor | string | "white" | 容器背景色 |
56
+ | darkBgColor | string | "" | 暗黑时的容器背景色,不填写的话取sheetDarkColor |
57
+ | zIndex | string\|number | "1105" | - |
58
+ | contentPadding | string\|number | "32" | 内容区域的间隙 |
59
+ | btnColor | string | "" | - |
60
+ | beforeClose | () =\> Promise\<boolean\> | true | 关闭前执行,可以是异步函数,只有当用户点击confirm时才会触发。如果返回false将阻止关闭。true允许关闭。 |
61
+ | disableTeleport | boolean | false | 是否禁用teleport(H5平台)在嵌套组件或特殊环境下,可以禁用teleport避免DOM错误 |
62
+
63
+
64
+ ## :rose: 事件
65
+ | 事件名 | 参数 | 返回数据 | 描述 |
66
+ | --- | --- | --- | --- |
67
+ | click | - | - | 点击遮罩事件 |
68
+ | close | - | - | 关闭是触发 |
69
+ | open | - | - | 打开时触发 |
70
+ | beforeOpen | - | - | 打开前执行 |
71
+ | beforeClose | - | - | 关闭前执行 |
72
+ | update:show | - | - | 等同v-model:show |
73
+ | cancel | - | - | 取消时触发 |
74
+ | confirm | - | - | 确认时触发 |
75
+
76
+
77
+ ## :corn: slot插槽
78
+ | 插槽名 | 数据 | 描述 |
79
+ | :--: | :--: | :-- |
80
+ | trigger | 名称:binding,show 类型:Boolean
81
+ | 标签触发显示遮罩,免于使用变量控制 |
82
+ | title | 名称:binding,show 类型:Boolean
83
+ | 标题插槽 |
84
+ | default | - | 默认插槽 |
85
+ | footer | - | 底部操作栏 |
86
+
87
+
88
+ ## :green_salad: ref方法
89
+ | 方法名 | 参数 | 返回值 | 描述 |
90
+ | :--: | :--: | :--: | :-- |
91
+
92
+
@@ -0,0 +1,70 @@
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
+ # 金额栅格 TmMoney
15
+
16
+ 对金额进行栅格化
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/money"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/money.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
+ | digit | number | 2 | 小数点后几位 |
39
+ | thousand | boolean | false | 开启千分位 |
40
+ | thousandUnit | string | "," | 千分位的分隔符 |
41
+ | thousandLen | number | 3 | 千分位的长度,默认是3位一位,如果为4就是万分位依此类推 |
42
+ | symbolText | string | '¥' | 货币符号 |
43
+ | symbolPosition | string | 'left' | 货币符号位置left:左侧right:右侧 |
44
+ | color | string | 'primary' | 文字颜色 |
45
+ | darkColor | string | '' | 暗黑时的文字颜色 |
46
+ | fontSize | string | '32' | 文字大小 |
47
+ | preFontSize | string | '32' | 货币符号及小数字号大小 |
48
+ | showCn | boolean | false | 是否显示中文金额 |
49
+
50
+
51
+ ## :rose: 事件
52
+ | 事件名 | 参数 | 返回数据 | 描述 |
53
+ | --- | --- | --- | --- |
54
+
55
+
56
+ ## :corn: slot插槽
57
+ | 插槽名 | 数据 | 描述 |
58
+ | :--: | :--: | :-- |
59
+ | default | 名称:binding,inter 类型:string
60
+ 名称:binding,digit 类型:string
61
+ 名称:binding,cn 类型:string
62
+ 名称:binding,lineHeight 类型:string
63
+ | 默认插槽 |
64
+
65
+
66
+ ## :green_salad: ref方法
67
+ | 方法名 | 参数 | 返回值 | 描述 |
68
+ | :--: | :--: | :--: | :-- |
69
+
70
+
@@ -0,0 +1,69 @@
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
+ # 查看更多 tmMore
15
+
16
+ 让内容超过指定高时自动隐藏内容.
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/more"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/more.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
+ | width | string | "auto" | 组件宽度 |
39
+ | height | string | "60" | 被关闭时的高度。 |
40
+ | modelValue | boolean | false | 当前打开的状态 |
41
+ | activeColor | string | "" | 激活后的文本色,默认是读取全局色 |
42
+ | unActiveColor | string | "#a6a6a6" | 未激活后的文本色 |
43
+ | text | Array | ()=\>[]asstring[] | 打开和关闭状态的文本"展开更多","收起更多" |
44
+ | maskBgColor | Array | ()=\>['rgba(255,255,255,1)','rgba(255,255,255,0.3)'] | 遮罩的渐变的背景色 |
45
+ | darkMaskBgColor | Array | ()=\>['rgba(24,24,24,1.0)','rgba(24,24,24,0.3)'] | 暗黑时遮罩的渐变的背景色 |
46
+ | disabled | boolean | false | 是否禁用展开。 |
47
+ | showMoreBtn | boolean | true | 是否显示开启和关闭按钮,因为各个手机屏幕可能不一样,可能会根据行数自行决定是否要显示展开和关闭按钮,请通过此自行判断. |
48
+
49
+
50
+ ## :rose: 事件
51
+ | 事件名 | 参数 | 返回数据 | 描述 |
52
+ | --- | --- | --- | --- |
53
+ | change | 名称:opened,当前打开的状态, | - | 状态切换时变换 |
54
+ | click | 名称:opened,当前打开的状态,可以通过此判断是点打开还是点关闭, | - | 点击展开的按钮时触发 |
55
+ | update:modelValue | - | - | - |
56
+
57
+
58
+ ## :corn: slot插槽
59
+ | 插槽名 | 数据 | 描述 |
60
+ | :--: | :--: | :-- |
61
+ | default | 名称:binding,isOpened 类型:-
62
+ | 默认插槽 |
63
+
64
+
65
+ ## :green_salad: ref方法
66
+ | 方法名 | 参数 | 返回值 | 描述 |
67
+ | :--: | :--: | :--: | :-- |
68
+
69
+
@@ -0,0 +1,82 @@
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
+ # 标题导航 TmNavbar
15
+
16
+ 标题导航,用途页面头部标题。可以默认透明,滚动实现背景可变的标题导航。
17
+
18
+ ## :hot_pepper: 示例
19
+
20
+ <webview url="https://tmui.design/h5by32/#/pages/index/navbar"></webview>
21
+
22
+ ::: details 示例模板
23
+
24
+ <<< ../../../src/pages/index/navbar.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
+ | isPlace | boolean | true | 是否底部占位内容,如果为false底部悬空。你的页面内容将自动压在导航栏的底部。 |
39
+ | bgColor | string | 'white' | 背景颜色,注意这是静态时的背景色。 |
40
+ | darkBgColor | string | "#000000" | 暗黑的背景颜色。 |
41
+ | activeBgColor | string | '' | 背景颜色,这是滑动时超过指定本状态栏高度时自动渐变到此颜色如果为空时,不会有动态背景如果提供的是白或者黑,暗黑时自动取反。 |
42
+ | backColor | string | '' | 返回按钮的颜色.默认是取titleColor,如果你单独定义了以你定义的为准 |
43
+ | title | string | $i18n.t('tmui32x.tmNavbar.title') | 标题 |
44
+ | titleColor | string | '#333333' | 默认标题颜色,暗黑是取白,如果有其它需求建议插槽。 |
45
+ | titleActiveColor | string | '#333333' | 动态悬浮时标题颜色,如果为暗黑时,你提供的颜色为白或者黑会反色如果提供的是彩色自动加深或者提亮 |
46
+ | titleFontSize | string | '34' | 标题文字大小 |
47
+ | lrWidth | string | '100' | 右边的宽度。 |
48
+ | llWidth | string | '100' | 左边的宽度。 |
49
+ | zIndex | number | 90 | 层级。 |
50
+ | backErrorPath | string | '/pages/index/index' | 左边按钮默认点击返回上页。但如果上页返回失败(通常见于直接程序启动本面,无法进行上页返回时)失败后返回的页面。默认是首页。 |
51
+ | showNavBack | boolean | true | 是否显示返回按钮。 |
52
+ | linearGradient | string[] | ():string[]=\>[]asstring[] | 渐变背景,如果提供,上面的BgColor背景和暗黑背景将失效。例:['toright','#ff667f','#ff5416'] |
53
+ | linearActiveGradient | string[] | ():string[]=\>[]asstring[] | 动态悬浮时的渐变背景,提供后上面的activeBgColor的背景和暗黑背景将失效。例:['toright','#ff667f','#ff5416'] |
54
+ | staticTransparent | boolean | false | 静态在顶部时是否透明背景 |
55
+ | scrollTop | number | 0 | 如果需要悬浮滚动请在外部页面中监听onPageScroll事件,并把值传到这里。3.2.05开始已经废弃,存在只为兼容之前的版本但已经没有作用了,现在改为内部实现,不需要外部提供。 |
56
+
57
+
58
+ ## :rose: 事件
59
+ | 事件名 | 参数 | 返回数据 | 描述 |
60
+ | --- | --- | --- | --- |
61
+ | fiexdChange | - | - | 当滚动页面时,导航栏位置
62
+ 与滚动之间的距离差比(0~1)
63
+ 0表示在顶部,1表示已经超过了导航高
64
+ 主要是用来类型滚动时设置导航顶部的一些布局变化。 |
65
+ | init | 名称:height,单位px,组件高。, | - | 初始化完成向下发送一个事件用于告知本组件实际的高 |
66
+
67
+
68
+ ## :corn: slot插槽
69
+ | 插槽名 | 数据 | 描述 |
70
+ | :--: | :--: | :-- |
71
+ | left | 名称:binding,isFiexd 类型:boolean
72
+ | 左边插槽 |
73
+ | title | - | 标题插槽 |
74
+ | right | 名称:binding,isFiexd 类型:boolean
75
+ | 右边插槽 |
76
+
77
+
78
+ ## :green_salad: ref方法
79
+ | 方法名 | 参数 | 返回值 | 描述 |
80
+ | :--: | :--: | :--: | :-- |
81
+
82
+