btxui 1.0.2 → 1.0.5

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 (194) hide show
  1. package/favicon.png +0 -0
  2. package/index.js +3289 -0
  3. package/index.js.gz +0 -0
  4. package/index.umd.cjs +1 -0
  5. package/package.json +11 -23
  6. package/README.md +0 -42
  7. package/app.vue +0 -162
  8. package/assets/css/_main.js +0 -73
  9. package/assets/css/btx.min.css +0 -1
  10. package/assets/css/btx.mob.min.css +0 -1
  11. package/assets/css/btx.pad.min.css +0 -1
  12. package/assets/css/btx.webapp.min.css +0 -1
  13. package/assets/css/custom_fonts/iconfont.css +0 -37
  14. package/assets/css/custom_fonts/iconfont.eot +0 -0
  15. package/assets/css/custom_fonts/iconfont.svg +0 -47
  16. package/assets/css/custom_fonts/iconfont.ttf +0 -0
  17. package/assets/css/custom_fonts/iconfont.woff +0 -0
  18. package/assets/css/custom_fonts/iconfont.woff2 +0 -0
  19. package/assets/css/res-l.css +0 -47
  20. package/assets/css/res-m.css +0 -47
  21. package/assets/css/res-s.css +0 -61
  22. package/assets/custom_fonts/iconfont.css +0 -37
  23. package/assets/custom_fonts/iconfont.eot +0 -0
  24. package/assets/custom_fonts/iconfont.svg +0 -47
  25. package/assets/custom_fonts/iconfont.ttf +0 -0
  26. package/assets/custom_fonts/iconfont.woff +0 -0
  27. package/assets/custom_fonts/iconfont.woff2 +0 -0
  28. package/assets/js/Btx.js +0 -196
  29. package/assets/js/Utils.js +0 -421
  30. package/assets/js/fastclick.js +0 -802
  31. package/assets/js/lazy.min.js +0 -2
  32. package/assets/js/touchwipe.js +0 -111
  33. package/assets/server.js +0 -8
  34. package/assets/start_site_code_str.js +0 -119
  35. package/cdn/css/btx.min.css +0 -1
  36. package/cdn/css/btx.min.css.map +0 -1
  37. package/cdn/fonts/iconfont.ttf +0 -0
  38. package/cdn/fonts/iconfont.woff +0 -0
  39. package/cdn/fonts/iconfont.woff2 +0 -0
  40. package/components/BTXUI/app/app-wid.vue +0 -182
  41. package/components/BTXUI/btn/btn-wid.vue +0 -128
  42. package/components/BTXUI/carousel/carousel-wid.vue +0 -138
  43. package/components/BTXUI/checkbox/checkbox-wid.vue +0 -72
  44. package/components/BTXUI/confirm/confirm-wid.vue +0 -279
  45. package/components/BTXUI/content/content-checkbox-wid.vue +0 -44
  46. package/components/BTXUI/content/content-node-wid.vue +0 -114
  47. package/components/BTXUI/content/content-tag-wid.vue +0 -25
  48. package/components/BTXUI/content/content-wid.vue +0 -254
  49. package/components/BTXUI/core/anis/ani-fail.vue +0 -46
  50. package/components/BTXUI/core/anis/ani-loading.vue +0 -32
  51. package/components/BTXUI/core/anis/ani-notic.vue +0 -47
  52. package/components/BTXUI/core/anis/ani-success.vue +0 -48
  53. package/components/BTXUI/core/b-drag.vue +0 -258
  54. package/components/BTXUI/core/b-grid.vue +0 -84
  55. package/components/BTXUI/core/b-hot.vue +0 -171
  56. package/components/BTXUI/core/b-icon.vue +0 -76
  57. package/components/BTXUI/core/b-img.vue +0 -84
  58. package/components/BTXUI/core/b-input.vue +0 -198
  59. package/components/BTXUI/core/b-list.vue +0 -276
  60. package/components/BTXUI/core/b-text/doc.ts +0 -9
  61. package/components/BTXUI/core/b-text/index.vue +0 -16
  62. package/components/BTXUI/core/b-textarea.vue +0 -58
  63. package/components/BTXUI/core/b-video.vue +0 -35
  64. package/components/BTXUI/core/b-view/doc.ts +0 -10
  65. package/components/BTXUI/core/b-view/index.vue +0 -20
  66. package/components/BTXUI/core/b-webview.vue +0 -20
  67. package/components/BTXUI/core/lib/ChapterLink.js +0 -49
  68. package/components/BTXUI/core/lib/Search.vue +0 -60
  69. package/components/BTXUI/core/styles/doc.ts +0 -55
  70. package/components/BTXUI/core/styles/index.vue +0 -98
  71. package/components/BTXUI/core/styles/prestyles.ts +0 -471
  72. package/components/BTXUI/core/styles/theme.ts +0 -29
  73. package/components/BTXUI/drawer/drawer-wid.vue +0 -165
  74. package/components/BTXUI/drawer/title-tag-wid.vue +0 -114
  75. package/components/BTXUI/form/form-select-wid.vue +0 -57
  76. package/components/BTXUI/form/form-wid.vue +0 -324
  77. package/components/BTXUI/formPannel/form-pannel-wid.vue +0 -133
  78. package/components/BTXUI/imgsUpload/imgs-upload-wid.vue +0 -149
  79. package/components/BTXUI/index.js +0 -83
  80. package/components/BTXUI/pageFlip/page-flip-wid.vue +0 -206
  81. package/components/BTXUI/pannel/pannel-wid.vue +0 -167
  82. package/components/BTXUI/range/range-wid.vue +0 -134
  83. package/components/BTXUI/search/search-wid.vue +0 -80
  84. package/components/BTXUI/select/select-wid.vue +0 -186
  85. package/components/BTXUI/slider/slider-wid.vue +0 -444
  86. package/components/BTXUI/tab/tab-wid.vue +0 -109
  87. package/components/BTXUI/table/table-wid.vue +0 -324
  88. package/components/BTXUI/tag/tag-wid.vue +0 -183
  89. package/components/BTXUI/tags/tags-wid.vue +0 -121
  90. package/components/BTXUI/tooltip/tooltip-wid.vue +0 -146
  91. package/components/BTXUI/upload/upload-wid.vue +0 -215
  92. package/components/BTXUI/waterfall/waterfall-wid.vue +0 -166
  93. package/components/header-info.vue +0 -167
  94. package/composables/@types.ts +0 -4
  95. package/composables/api.ts +0 -18
  96. package/env.d.ts +0 -5
  97. package/main.js +0 -16
  98. package/nuxt.config.ts +0 -51
  99. package/pages/article.vue +0 -16
  100. package/pages/download.vue +0 -50
  101. package/pages/example/app_wid/app/data_demo.vue +0 -9
  102. package/pages/example/app_wid/app/download_demo.vue +0 -9
  103. package/pages/example/app_wid/app/list_demo.vue +0 -11
  104. package/pages/example/app_wid/app/system_demo.vue +0 -9
  105. package/pages/example/app_wid/app_wid_demo.vue +0 -198
  106. package/pages/example/app_wid/btn_wid_demo.vue +0 -179
  107. package/pages/example/app_wid/carousel_wid_demo.vue +0 -152
  108. package/pages/example/app_wid/checkbox_wid_demo.vue +0 -65
  109. package/pages/example/app_wid/confirm_wid_demo.vue +0 -197
  110. package/pages/example/app_wid/content_wid_demo.vue +0 -369
  111. package/pages/example/app_wid/drawer_wid_demo.vue +0 -155
  112. package/pages/example/app_wid/form_pannel_wid_demo.vue +0 -338
  113. package/pages/example/app_wid/form_wid_demo.vue +0 -550
  114. package/pages/example/app_wid/imgs_upload_wid_demo.vue +0 -159
  115. package/pages/example/app_wid/index.js +0 -158
  116. package/pages/example/app_wid/page_flip_wid_demo.vue +0 -99
  117. package/pages/example/app_wid/pannel_wid_demo.vue +0 -177
  118. package/pages/example/app_wid/range_wid_demo.vue +0 -101
  119. package/pages/example/app_wid/search_wid_demo.vue +0 -75
  120. package/pages/example/app_wid/select_wid_demo.vue +0 -217
  121. package/pages/example/app_wid/slider_wid_demo.vue +0 -143
  122. package/pages/example/app_wid/tab_wid_demo.vue +0 -170
  123. package/pages/example/app_wid/table_wid_demo.vue +0 -377
  124. package/pages/example/app_wid/tag_wid_demo.vue +0 -133
  125. package/pages/example/app_wid/tags_wid_demo.vue +0 -143
  126. package/pages/example/app_wid/tooltip_wid_demo.vue +0 -117
  127. package/pages/example/app_wid/upload_wid_demo.vue +0 -123
  128. package/pages/example/base_wid/b_drag_demo.vue +0 -159
  129. package/pages/example/base_wid/b_grid_demo.vue +0 -225
  130. package/pages/example/base_wid/b_hot_demo.vue +0 -135
  131. package/pages/example/base_wid/b_icon_demo.vue +0 -80
  132. package/pages/example/base_wid/b_img_demo.vue +0 -95
  133. package/pages/example/base_wid/b_input_demo.vue +0 -171
  134. package/pages/example/base_wid/b_list_demo.vue +0 -241
  135. package/pages/example/base_wid/b_style_demo.vue +0 -928
  136. package/pages/example/base_wid/b_text_demo.vue +0 -36
  137. package/pages/example/base_wid/b_textarea_demo.vue +0 -64
  138. package/pages/example/base_wid/b_video_demo.vue +0 -42
  139. package/pages/example/base_wid/b_view_demo.vue +0 -36
  140. package/pages/example/base_wid/index.js +0 -76
  141. package/pages/example/content.js +0 -49
  142. package/pages/example/global_style/animation.vue +0 -197
  143. package/pages/example/global_style/color.vue +0 -134
  144. package/pages/example/global_style/decoration.vue +0 -546
  145. package/pages/example/global_style/icon.vue +0 -345
  146. package/pages/example/global_style/index.js +0 -52
  147. package/pages/example/global_style/layout.vue +0 -846
  148. package/pages/example/global_style/special.vue +0 -37
  149. package/pages/example/global_style/table.vue +0 -298
  150. package/pages/example/global_style/text.vue +0 -159
  151. package/pages/index.vue +0 -43
  152. package/pages/level_widget.vue +0 -11
  153. package/pages/start.vue +0 -200
  154. package/plugins/index.ts +0 -2
  155. package/public/favicon.gif +0 -0
  156. package/public/fonts/iconfont.ttf +0 -0
  157. package/public/fonts/iconfont.woff +0 -0
  158. package/public/fonts/iconfont.woff2 +0 -0
  159. package/public/img/banner.jpg +0 -0
  160. package/public/img/banner2.jpg +0 -0
  161. package/public/img/bg_pattern.png +0 -0
  162. package/public/img/btx.jpg +0 -0
  163. package/public/img/btx_ui.jpg +0 -0
  164. package/public/img/dir.png +0 -0
  165. package/public/img/f.png +0 -0
  166. package/public/img/head.jpg +0 -0
  167. package/public/img/head2.jpg +0 -0
  168. package/public/img/home_ico.png +0 -0
  169. package/public/img/icons.svg +0 -164
  170. package/public/img/mechanism/b-style.png +0 -0
  171. package/public/img/mechanism/slider-wid.png +0 -0
  172. package/public/img/mechanism/upload-wid.png +0 -0
  173. package/public/img/transform_origin.png +0 -0
  174. package/sass/animation.scss +0 -400
  175. package/sass/btx.mob.scss +0 -10
  176. package/sass/btx.pad.scss +0 -3
  177. package/sass/btx.scss +0 -22
  178. package/sass/btx.webapp.scss +0 -22
  179. package/sass/colors.scss +0 -65
  180. package/sass/decoration.scss +0 -220
  181. package/sass/flex.scss +0 -29
  182. package/sass/icons.scss +0 -100
  183. package/sass/layout.scss +0 -88
  184. package/sass/reset.scss +0 -111
  185. package/sass/response/flex_mixin.scss +0 -91
  186. package/sass/response/layout_mixin.scss +0 -227
  187. package/sass/response/main.scss +0 -59
  188. package/sass/response/text_mixin.scss +0 -65
  189. package/sass/scroll.scss +0 -100
  190. package/sass/special.scss +0 -13
  191. package/sass/table.scss +0 -103
  192. package/sass/text.scss +0 -86
  193. package/sass/webpack.config.js +0 -31
  194. package/tsconfig.json +0 -4
package/pages/example/base_wid/b_style_demo.vue DELETED
@@ -1,928 +0,0 @@
1
- <template>
2
- <article>
3
- <header-info v-bind="header_info" />
4
-
5
- <!--文本相关样式-->
6
- <section>
7
- <p>文本相关样式：</p>
8
- <table response class="table">
9
- <thead>
10
- <tr>
11
- <th>样式值</th>
12
- <th>效果</th>
13
- <th>值备注</th>
14
- </tr>
15
- </thead>
16
- <tbody>
17
- <tr>
18
- <td><code>pleft</code></td>
19
- <td>文本左对齐</td>
20
- <td>-</td>
21
- </tr>
22
- <tr>
23
- <td><code>pright</code></td>
24
- <td>文本右对齐</td>
25
- <td>-</td>
26
- </tr>
27
- <tr>
28
- <td><code>pcenter</code></td>
29
- <td>文本居中对齐</td>
30
- <td>-</td>
31
- </tr>
32
- <tr>
33
- <td><code>pjustify</code></td>
34
- <td>文本两端对齐</td>
35
- <td>-</td>
36
- </tr>
37
- <tr>
38
- <td><code>font-*</code></td>
39
- <td>指定字体</td>
40
- <td>字体名（需引入对应字体样式文件）</td>
41
- </tr>
42
- <tr>
43
- <td><code>fsize-*</code></td>
44
- <td>字符间距</td>
45
- <td>任意合法值，缺省单位 em</td>
46
- </tr>
47
- <tr>
48
- <td><code>lspace-*</code></td>
49
- <td>字符间距</td>
50
- <td>任意合法值，缺省单位 rem</td>
51
- </tr>
52
- <tr>
53
- <td><code>resize</code></td>
54
- <td>重置初始字号及行高</td>
55
- <td>-</td>
56
- </tr>
57
- <tr>
58
- <td><code>ellipsis</code></td>
59
- <td>单行文本溢出省略</td>
60
- <td>-</td>
61
- </tr>
62
- <tr>
63
- <td><code>no-wrap</code></td>
64
- <td>文本禁止换行</td>
65
- <td>-</td>
66
- </tr>
67
- </tbody>
68
- </table>
69
- <p></p>
70
- </section>
71
-
72
- <!--颜色相关样式-->
73
- <section>
74
- <p>颜色相关样式：</p>
75
- <p>可以使用框架预置主题色，包括：none、main、sub、light、dgray、mgray、lgray、dark、red、green、blue、yellow、neutral。色值效果可参考 <b>"全局样式 - 色彩"</b>，此外其它任意标准 web 色彩模式都可以直接使用。</p>
76
- <p>主题色支持扩展及修改，通常可在全局文件 <b>main.js</b> 引入 <code>BTXUI/core/styles/theme.js</code> 模块，执行 <code>append(colors)</code> 方法扩展。</p>
77
- <p>【exp】扩展深红色：<code>Theme.append({ deep_red: "#ae0014" })</code></p>
78
- <table class="table">
79
- <thead>
80
- <tr>
81
- <th>样式值</th>
82
- <th>效果</th>
83
- <th>值备注</th>
84
- </tr>
85
- </thead>
86
- <tbody>
87
- <tr>
88
- <td><code>bg-color-*</code></td>
89
- <td>背景色</td>
90
- <td>任意合法值或主题色</td>
91
- </tr>
92
- <tr>
93
- <td><code>color-*</code></td>
94
- <td>文字色</td>
95
- <td>任意合法值或主题色</td>
96
- </tr>
97
- <tr>
98
- <td><code>line-*</code></td>
99
- <td>描边色</td>
100
- <td>任意合法值或主题色</td>
101
- </tr>
102
- <tr>
103
- <td><code>alpha-*</code></td>
104
- <td>不透明度</td>
105
- <td>值域范围：0 - 1</td>
106
- </tr>
107
- </tbody>
108
- </table>
109
- <p></p>
110
- </section>
111
-
112
- <!--布局相关样式-->
113
- <section>
114
- <p>布局相关样式：</p>
115
- <table class="table">
116
- <thead>
117
- <tr>
118
- <th>样式值</th>
119
- <th>效果</th>
120
- <th>值备注</th>
121
- </tr>
122
- </thead>
123
- <tbody>
124
- <tr>
125
- <td><code>show</code></td>
126
- <td>显示元素</td>
127
- <td>-</td>
128
- </tr>
129
- <tr>
130
- <td><code>hide</code></td>
131
- <td>隐藏元素</td>
132
- <td>-</td>
133
- </tr>
134
- <tr>
135
- <td><code>flex</code></td>
136
- <td>弹性布局容器</td>
137
- <td>-</td>
138
- </tr>
139
- <tr>
140
- <td><code>flex-*</code></td>
141
- <td>弹性布局容器，九宫格式布局</td>
142
- <td>值域范围：1 - 9</td>
143
- </tr>
144
- <tr>
145
- <td><code>flex-between</code></td>
146
- <td>弹性布局容器，均分排列，两端对齐</td>
147
- <td>-</td>
148
- </tr>
149
- <tr>
150
- <td><code>flex-around</code></td>
151
- <td>弹性布局容器，均分排列</td>
152
- <td>-</td>
153
- </tr>
154
- <tr>
155
- <td><code>grid</code></td>
156
- <td>弹性布局容器，可换行</td>
157
- <td>-</td>
158
- </tr>
159
- <tr>
160
- <td><code>flex-column</code></td>
161
- <td>弹性布局容器，纵向生长</td>
162
- <td>-</td>
163
- </tr>
164
- <tr>
165
- <td><code>grow-*</code></td>
166
- <td>元素自生长比率</td>
167
- <td>任意合法值</td>
168
- </tr>
169
- <tr>
170
- <td><code>order-*</code></td>
171
- <td>弹性布局项目排序</td>
172
- <td>任意合法值</td>
173
- </tr>
174
- <tr>
175
- <td><code>column-*</code></td>
176
- <td>多列布局容器</td>
177
- <td>任意合法值</td>
178
- </tr>
179
- <tr>
180
- <td><code>item</code></td>
181
- <td>多列布局元素</td>
182
- <td>-</td>
183
- </tr>
184
- <tr>
185
- <td><code>pad-*</code></td>
186
- <td>内边距</td>
187
- <td>任意合法值，缺省单位 rem</td>
188
- </tr>
189
- <tr>
190
- <td><code>pad-l-*</code></td>
191
- <td>左侧内边距</td>
192
- <td>任意合法值，缺省单位 rem</td>
193
- </tr>
194
- <tr>
195
- <td><code>pad-r-*</code></td>
196
- <td>右侧内边距</td>
197
- <td>任意合法值，缺省单位 rem</td>
198
- </tr>
199
- <tr>
200
- <td><code>pad-t-*</code></td>
201
- <td>上侧内边距</td>
202
- <td>任意合法值，缺省单位 rem</td>
203
- </tr>
204
- <tr>
205
- <td><code>pad-b-*</code></td>
206
- <td>下侧内边距</td>
207
- <td>任意合法值，缺省单位 rem</td>
208
- </tr>
209
- <tr>
210
- <td><code>pad-v-*</code></td>
211
- <td>垂直方向内边距</td>
212
- <td>任意合法值，缺省单位 rem</td>
213
- </tr>
214
- <tr>
215
- <td><code>pad-h-*</code></td>
216
- <td>水平方向内边距</td>
217
- <td>任意合法值，缺省单位 rem</td>
218
- </tr>
219
- <tr>
220
- <td><code>mrg-*</code></td>
221
- <td>外边距</td>
222
- <td>任意合法值，缺省单位 rem</td>
223
- </tr>
224
- <tr>
225
- <td><code>mrg-l-*</code></td>
226
- <td>左侧外边距</td>
227
- <td>任意合法值，缺省单位 rem</td>
228
- </tr>
229
- <tr>
230
- <td><code>mrg-r-*</code></td>
231
- <td>右侧外边距</td>
232
- <td>任意合法值，缺省单位 rem</td>
233
- </tr>
234
- <tr>
235
- <td><code>mrg-t-*</code></td>
236
- <td>上侧外边距</td>
237
- <td>任意合法值，缺省单位 rem</td>
238
- </tr>
239
- <tr>
240
- <td><code>mrg-b-*</code></td>
241
- <td>下侧外边距</td>
242
- <td>任意合法值，缺省单位 rem</td>
243
- </tr>
244
- <tr>
245
- <td><code>mrg-v-*</code></td>
246
- <td>垂直方向外边距</td>
247
- <td>任意合法值，缺省单位 rem</td>
248
- </tr>
249
- <tr>
250
- <td><code>mrg-h-*</code></td>
251
- <td>水平方向外边距</td>
252
- <td>任意合法值，缺省单位 rem</td>
253
- </tr>
254
- <tr>
255
- <td><code>max-h</code></td>
256
- <td>高度布满父容器</td>
257
- <td>-</td>
258
- </tr>
259
- <tr>
260
- <td><code>max-w</code></td>
261
- <td>宽度布满父容器</td>
262
- <td>-</td>
263
- </tr>
264
- <tr>
265
- <td><code>max</code></td>
266
- <td>宽高布满父容器</td>
267
- <td>-</td>
268
- </tr>
269
- <tr>
270
- <td><code>h-*</code></td>
271
- <td>设置高度</td>
272
- <td>任意合法值，缺省单位 rem</td>
273
- </tr>
274
- <tr>
275
- <td><code>lh-*</code></td>
276
- <td>设置行高</td>
277
- <td>任意合法值</td>
278
- </tr>
279
- <tr>
280
- <td><code>w-*</code></td>
281
- <td>设置宽度</td>
282
- <td>任意合法值，缺省单位 rem</td>
283
- </tr>
284
- <tr>
285
- <td><code>lw-*</code></td>
286
- <td>设置最小宽度</td>
287
- <td>任意合法值，缺省单位 rem</td>
288
- </tr>
289
- <tr>
290
- <td><code>rw-*</code></td>
291
- <td>设置最大宽度</td>
292
- <td>任意合法值，缺省单位 rem</td>
293
- </tr>
294
- <tr>
295
- <td><code>bh-*</code></td>
296
- <td>设置最小高度</td>
297
- <td>任意合法值，缺省单位 rem</td>
298
- </tr>
299
- <tr>
300
- <td><code>th-*</code></td>
301
- <td>设置最大高度</td>
302
- <td>任意合法值，缺省单位 rem</td>
303
- </tr>
304
- <tr>
305
- <td><code>fixed</code></td>
306
- <td>固定式定位</td>
307
- <td>-</td>
308
- </tr>
309
- <tr>
310
- <td><code>rel</code></td>
311
- <td>相对定位</td>
312
- <td>-</td>
313
- </tr>
314
- <tr>
315
- <td><code>abs</code></td>
316
- <td>绝对定位</td>
317
- <td>-</td>
318
- </tr>
319
- <tr>
320
- <td><code>z*</code></td>
321
- <td>z 轴层级</td>
322
- <td>值域范围：-1 - 10</td>
323
- </tr>
324
- <tr>
325
- <td><code>no-scroll | over-hide</code></td>
326
- <td>内容溢出隐藏</td>
327
- <td>-</td>
328
- </tr>
329
- <tr>
330
- <td><code>over-show</code></td>
331
- <td>内容溢出显示</td>
332
- <td>-</td>
333
- </tr>
334
- <tr>
335
- <td><code>over-scroll</code></td>
336
- <td>内容溢出滚动</td>
337
- <td>-</td>
338
- </tr>
339
- </tbody>
340
- </table>
341
- <p></p>
342
- </section>
343
-
344
- <!--位移及变形微调相关样式-->
345
- <section>
346
- <p>位移及变形微调相关样式：</p>
347
- <p>和全局样式稍有不同，基于百分比值的位移直接使用 "%" 单位而非 "p"。</p>
348
- <table class="table">
349
- <thead>
350
- <tr>
351
- <th>样式值</th>
352
- <th>效果</th>
353
- <th>值备注</th>
354
- </tr>
355
- </thead>
356
- <tbody>
357
- <tr>
358
- <td><code>l-*</code></td>
359
- <td>基于容器左侧水平位移</td>
360
- <td>任意合法值，缺省单位 rem</td>
361
- </tr>
362
- <tr>
363
- <td><code>r-*</code></td>
364
- <td>基于容器右侧水平位移</td>
365
- <td>任意合法值，缺省单位 rem</td>
366
- </tr>
367
- <tr>
368
- <td><code>t-*</code></td>
369
- <td>基于容器上侧垂直位移</td>
370
- <td>任意合法值，缺省单位 rem</td>
371
- </tr>
372
- <tr>
373
- <td><code>b-*</code></td>
374
- <td>基于容器下侧垂直位移</td>
375
- <td>任意合法值，缺省单位 rem</td>
376
- </tr>
377
- <tr>
378
- <td><code>translateX-*</code></td>
379
- <td>基于自身水平位移</td>
380
- <td>任意合法值，缺省单位 %</td>
381
- </tr>
382
- <tr>
383
- <td><code>translateY-*</code></td>
384
- <td>基于自身垂直位移</td>
385
- <td>任意合法值，缺省单位 %</td>
386
- </tr>
387
- <tr>
388
- <td><code>scale-*</code></td>
389
- <td>放缩</td>
390
- <td>任意合法值</td>
391
- </tr>
392
- <tr>
393
- <td><code>rotate-*</code></td>
394
- <td>旋转</td>
395
- <td>任意合法值</td>
396
- </tr>
397
- </tbody>
398
- </table>
399
- <p>此外可以通过 <code>transform-*</code> 设置任意二维变形效果；以及 <code>origin-*</code> 设置变形中心点。</p>
400
- <table class="table">
401
- <thead>
402
- <tr>
403
- <th>样式值</th>
404
- <th>效果</th>
405
- <th>示例</th>
406
- </tr>
407
- </thead>
408
- <tbody>
409
- <tr>
410
- <td><code>transform-*</code></td>
411
- <td>自由变形元素</td>
412
- <td><code>transform-scale(1.1)rotate(45deg)</code></td>
413
- </tr>
414
- <tr>
415
- <td><code>origin-*</code></td>
416
- <td>设置变形中心点</td>
417
- <td><code>origin-20px|50%</code></td>
418
- </tr>
419
- </tbody>
420
- </table>
421
- <p></p>
422
- </section>
423
-
424
- <!--背景相关样式-->
425
- <section>
426
- <p>背景相关样式：</p>
427
- <p>b-view 组件使用 bg-img 属性引入背景图片。</p>
428
- <p>相比全局样式，styles 属性支持任意合法值的背景图尺寸及定位设置，且支持 <code>bg-gradient-*</code> 线性渐变背景设置。</p>
429
- <table class="table">
430
- <thead>
431
- <tr>
432
- <th>样式值</th>
433
- <th>效果</th>
434
- <th>值备注</th>
435
- </tr>
436
- </thead>
437
- <tbody>
438
- <tr>
439
- <td><code>bg-*</code></td>
440
- <td>综合背景样式</td>
441
- <td>-</td>
442
- </tr>
443
- <tr>
444
- <td><code>bg-repeat</code></td>
445
- <td>背景图水平及垂直平铺</td>
446
- <td>-</td>
447
- </tr>
448
- <tr>
449
- <td><code>bg-repeat-x</code></td>
450
- <td>背景图水平平铺</td>
451
- <td>-</td>
452
- </tr>
453
- <tr>
454
- <td><code>bg-repeat-y</code></td>
455
- <td>背景图垂直平铺</td>
456
- <td>-</td>
457
- </tr>
458
- <tr>
459
- <td><code>bg-size-cover</code></td>
460
- <td>背景图尺寸覆盖容器</td>
461
- <td>-</td>
462
- </tr>
463
- <tr>
464
- <td><code>bg-size-contain</code></td>
465
- <td>背景图尺寸适应容器</td>
466
- <td>-</td>
467
- </tr>
468
- <tr>
469
- <td><code>bg-size-max</code></td>
470
- <td>背景图尺寸撑满容器</td>
471
- <td>-</td>
472
- </tr>
473
- <tr>
474
- <td><code>bg-size-max-h</code></td>
475
- <td>背景图高度尺寸撑满容器</td>
476
- <td>-</td>
477
- </tr>
478
- <tr>
479
- <td><code>bg-size-max-w</code></td>
480
- <td>背景图宽度尺寸撑满容器</td>
481
- <td>-</td>
482
- </tr>
483
- <tr>
484
- <td><code>bg-size-*</code></td>
485
- <td>背景图尺寸设置</td>
486
- <td>任意合法值</td>
487
- </tr>
488
- <tr>
489
- <td><code>bg-pos-*</code></td>
490
- <td>背景图九宫格定位</td>
491
- <td>值域范围：1 - 9</td>
492
- </tr>
493
- <tr>
494
- <td><code>bg-pos-*</code></td>
495
- <td>背景图定位</td>
496
- <td>任意合法值</td>
497
- </tr>
498
- <tr>
499
- <td><code>bg-gradient-*</code></td>
500
- <td>线性渐变背景</td>
501
- <td>任意合法值</td>
502
- </tr>
503
- </tbody>
504
- </table>
505
- <p></p>
506
- </section>
507
-
508
- <!--圆角相关样式-->
509
- <section>
510
- <p>圆角相关样式：</p>
511
- <table class="table">
512
- <thead>
513
- <tr>
514
- <th>样式值</th>
515
- <th>效果</th>
516
- </tr>
517
- </thead>
518
- <tbody>
519
- <tr>
520
- <td>
521
- <code>round</code>
522
- </td>
523
- <td>50% 圆角，可用于制作正圆形或椭圆形</td>
524
- </tr>
525
- <tr>
526
- <td>
527
- <code>round-lg</code>
528
- </td>
529
- <td>24px 大圆角</td>
530
- </tr>
531
- <tr>
532
- <td>
533
- <code>round-md</code>
534
- </td>
535
- <td>10px 中等圆角</td>
536
- </tr>
537
- <tr>
538
- <td>
539
- <code>round-sm</code>
540
- </td>
541
- <td>4px 小型圆角</td>
542
- </tr>
543
- <tr>
544
- <td>
545
- <code>round-t</code>
546
- </td>
547
- <td>上侧圆角</td>
548
- </tr>
549
- <tr>
550
- <td>
551
- <code>round-b</code>
552
- </td>
553
- <td>下侧圆角</td>
554
- </tr>
555
- <tr>
556
- <td>
557
- <code>round-l</code>
558
- </td>
559
- <td>左侧圆角</td>
560
- </tr>
561
- <tr>
562
- <td>
563
- <code>round-r</code>
564
- </td>
565
- <td>右侧圆角</td>
566
- </tr>
567
- </tbody>
568
- </table>
569
- <p></p>
570
- </section>
571
-
572
- <!--描边及阴影相关样式-->
573
- <section>
574
- <p>描边及阴影相关样式：</p>
575
- <table class="table">
576
- <thead>
577
- <tr>
578
- <th>样式值</th>
579
- <th>效果</th>
580
- <th>值备注</th>
581
- </tr>
582
- </thead>
583
- <tbody>
584
- <tr>
585
- <td>
586
- <code>line</code>
587
- </td>
588
- <td>设置四周实线描边</td>
589
- <td>-</td>
590
- </tr>
591
- <tr>
592
- <td>
593
- <code>line-l</code>
594
- </td>
595
- <td>设置左侧实线描边</td>
596
- <td>-</td>
597
- </tr>
598
- <tr>
599
- <td>
600
- <code>line-r</code>
601
- </td>
602
- <td>设置右侧实线描边</td>
603
- <td>-</td>
604
- </tr>
605
- <tr>
606
- <td>
607
- <code>line-t</code>
608
- </td>
609
- <td>设置上侧实线描边</td>
610
- <td>-</td>
611
- </tr>
612
- <tr>
613
- <td>
614
- <code>line-b</code>
615
- </td>
616
- <td>设置下侧实线描边</td>
617
- <td>-</td>
618
- </tr>
619
- <tr>
620
- <td>
621
- <code>dashed</code>
622
- </td>
623
- <td>设置四周虚线描边</td>
624
- <td>-</td>
625
- </tr>
626
- <tr>
627
- <td>
628
- <code>dashed-l</code>
629
- </td>
630
- <td>设置左侧虚线描边</td>
631
- <td>-</td>
632
- </tr>
633
- <tr>
634
- <td>
635
- <code>dashed-r</code>
636
- </td>
637
- <td>设置右侧虚线描边</td>
638
- <td>-</td>
639
- </tr>
640
- <tr>
641
- <td>
642
- <code>dashed-t</code>
643
- </td>
644
- <td>设置上侧虚线描边</td>
645
- <td>-</td>
646
- </tr>
647
- <tr>
648
- <td>
649
- <code>dashed-b</code>
650
- </td>
651
- <td>设置下侧虚线描边</td>
652
- <td>-</td>
653
- </tr>
654
- <tr>
655
- <td>
656
- <code>line-outside</code>
657
- </td>
658
- <td>设置外侧描边范围</td>
659
- <td>-</td>
660
- </tr>
661
- <tr>
662
- <td>
663
- <code>thick-*</code>
664
- </td>
665
- <td>设置描边粗细</td>
666
- <td>任意合法值，缺省单位 px</td>
667
- </tr>
668
- <tr>
669
- <td>
670
- <code>text-line</code>
671
- </td>
672
- <td>文字描边</td>
673
- <td>-</td>
674
- </tr>
675
- <tr>
676
- <td>
677
- <code>shadow</code>
678
- </td>
679
- <td>普通尺寸阴影</td>
680
- <td>-</td>
681
- </tr>
682
- <tr>
683
- <td>
684
- <code>shadow-no</code>
685
- </td>
686
- <td>无阴影</td>
687
- <td>-</td>
688
- </tr>
689
- <tr>
690
- <td>
691
- <code>shadow-sm</code>
692
- </td>
693
- <td>小尺寸阴影</td>
694
- <td>-</td>
695
- </tr>
696
- <tr>
697
- <td>
698
- <code>shadow-lg</code>
699
- </td>
700
- <td>大尺寸阴影</td>
701
- <td>-</td>
702
- </tr>
703
- <tr>
704
- <td>
705
- <code>shadow-relief</code>
706
- </td>
707
- <td>浮雕阴影效果</td>
708
- <td>-</td>
709
- </tr>
710
- </tbody>
711
- </table>
712
- <p></p>
713
- </section>
714
-
715
- <!--滤镜相关样式-->
716
- <section>
717
- <p>滤镜相关样式：</p>
718
- <table class="table">
719
- <thead>
720
- <tr>
721
- <th>样式类</th>
722
- <th>效果</th>
723
- <th>值备注</th>
724
- </tr>
725
- </thead>
726
- <tbody>
727
- <tr>
728
- <td>
729
- <code>.blur-no</code>
730
- </td>
731
- <td>无模糊效果</td>
732
- <td>-</td>
733
- </tr>
734
- <tr>
735
- <td>
736
- <code>.blur-sm</code>
737
- </td>
738
- <td>轻度模糊效果</td>
739
- <td>-</td>
740
- </tr>
741
- <tr>
742
- <td>
743
- <code>.blur-md</code>
744
- </td>
745
- <td>中度模糊效果</td>
746
- <td>-</td>
747
- </tr>
748
- <tr>
749
- <td>
750
- <code>.blur-lg</code>
751
- </td>
752
- <td>重度模糊效果</td>
753
- <td>-</td>
754
- </tr>
755
- <tr>
756
- <td>
757
- <code>.dark-no</code>
758
- </td>
759
- <td>原始明度效果</td>
760
- <td>-</td>
761
- </tr>
762
- <tr>
763
- <td>
764
- <code>.dark-sm</code>
765
- </td>
766
- <td>轻度低明度效果</td>
767
- <td>-</td>
768
- </tr>
769
- <tr>
770
- <td>
771
- <code>.dark-md</code>
772
- </td>
773
- <td>中度低明度效果</td>
774
- <td>-</td>
775
- </tr>
776
- <tr>
777
- <td>
778
- <code>.dark-lg</code>
779
- </td>
780
- <td>重度低明度效果</td>
781
- <td>-</td>
782
- </tr>
783
- <tr>
784
- <td>
785
- <code>.gray-no</code>
786
- </td>
787
- <td>原始纯度效果</td>
788
- <td>-</td>
789
- </tr>
790
- <tr>
791
- <td>
792
- <code>.gray-sm</code>
793
- </td>
794
- <td>轻度低纯度效果</td>
795
- <td>-</td>
796
- </tr>
797
- <tr>
798
- <td>
799
- <code>.gray-md</code>
800
- </td>
801
- <td>中度低纯度效果</td>
802
- <td>-</td>
803
- </tr>
804
- <tr>
805
- <td>
806
- <code>.gray-lg</code>
807
- </td>
808
- <td>重度低纯度效果</td>
809
- <td>-</td>
810
- </tr>
811
- </tbody>
812
- </table>
813
- <p></p>
814
- </section>
815
-
816
- <!--过渡动画相关样式-->
817
- <section>
818
- <p>过渡动画相关样式：</p>
819
- <table class="table">
820
- <thead>
821
- <tr>
822
- <th>样式值</th>
823
- <th>效果</th>
824
- <th>值备注</th>
825
- </tr>
826
- </thead>
827
- <tbody>
828
- <tr>
829
- <td>
830
- <code>trans</code>
831
- </td>
832
- <td>中速过度动画（.7s）</td>
833
- <td>-</td>
834
- </tr>
835
- <tr>
836
- <td>
837
- <code>trans-fast</code>
838
- </td>
839
- <td>快速过度动画（.4s）</td>
840
- <td>-</td>
841
- </tr>
842
- <tr>
843
- <td>
844
- <code>trans-slow</code>
845
- </td>
846
- <td>慢速过度动画（1.4s）</td>
847
- <td>-</td>
848
- </tr>
849
- <tr>
850
- <td>
851
- <code>trans-no</code>
852
- </td>
853
- <td>无过度动画</td>
854
- <td>-</td>
855
- </tr>
856
- <tr>
857
- <td>
858
- <code>trans-delay-*</code>
859
- </td>
860
- <td>动画延迟执行时间</td>
861
- <td>任意合法值，缺省单位 s</td>
862
- </tr>
863
- </tbody>
864
- </table>
865
- <p></p>
866
- </section>
867
-
868
- <!--特殊样式控制-->
869
- <section>
870
- <p>特殊样式控制：</p>
871
- <table class="table">
872
- <thead>
873
- <tr>
874
- <th>样式值</th>
875
- <th>效果</th>
876
- <th>值备注</th>
877
- </tr>
878
- </thead>
879
- <tbody>
880
- <tr>
881
- <td><code>bg-none</code></td>
882
- <td>背景点透效果</td>
883
- <td>-</td>
884
- </tr>
885
- <tr>
886
- <td><code>bg-use</code></td>
887
- <td>背景常规效果（非点透）</td>
888
- <td>-</td>
889
- </tr>
890
- <tr>
891
- <td><code>touch-none</code></td>
892
- <td>元素触控禁止</td>
893
- <td>-</td>
894
- </tr>
895
- <tr>
896
- <td><code>select-none</code></td>
897
- <td>元素长按选中禁止</td>
898
- <td>-</td>
899
- </tr>
900
- </tbody>
901
- </table>
902
- </section>
903
-
904
- </article>
905
- </template>
906
-
907
- <script>
908
- import HeaderInfo from "@/components/header-info"
909
- // import BStyle from "@/components/BTXUI/core/styles/b-style"
910
-
911
- export default {
912
- name: "b_style_demo",
913
- components: {
914
- HeaderInfo
915
- },
916
- data() {
917
- return {
918
-
919
- //初始化入参
920
- header_info: {
921
- // name: BStyle.name,
922
- // ...BStyle.introduce,
923
- }
924
-
925
- }
926
- }
927
- }
928
- </script>