@shijiu/jsview-vue-samples 2.3.151-test.0 → 3.0.0

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 (228) hide show
  1. package/ABImageAlt/App.vue +114 -0
  2. package/ABImageAlt/Item.vue +133 -0
  3. package/{MetroWidgetDemos/SkeletonDiagram/assets/imageList.json → ABImageAlt/assets/imageList.js} +9 -1
  4. package/ABImageAlt/data.js +17 -0
  5. package/AI_Check_Rules.txt +5 -0
  6. package/AnimPicture/App.vue +20 -10
  7. package/ApicSwitch/App.vue +90 -0
  8. package/ApicSwitch/TabItem.vue +65 -0
  9. package/ApicSwitch/WebpShow.vue +24 -0
  10. package/ApicSwitch/data.js +50 -0
  11. package/Basic/AI_skills_update.md +1 -0
  12. package/Basic/components/div/ColorFormatTest.vue +93 -0
  13. package/Basic/components/div/DivRadius.vue +97 -15
  14. package/Basic/components/div/DivTag3Group.vue +30 -0
  15. package/Basic/components/img/ImageType.vue +65 -0
  16. package/Basic/components/panel/Panel2.vue +13 -1
  17. package/Basic/components/text/TextAlign.vue +7 -1
  18. package/BlobLoadTest/App.vue +201 -0
  19. package/BreakLinesApi/App.vue +82 -0
  20. package/CanvasDrawChart/App.vue +11 -0
  21. package/CanvasDrawChart/Graph1.vue +104 -0
  22. package/CanvasDrawChart/Graph2.vue +115 -0
  23. package/CssPreprocessor/Scss/PanelData.js +1 -1
  24. package/CssPreprocessor/Scss/components/scss-group4/ScssMaps.vue +4 -3
  25. package/CssPreprocessor/Scss/components/scss-group5/ScssImporting.vue +2 -2
  26. package/DemoForOperator/Bounce/FreeMoveBuilder.js +1 -1
  27. package/DemoForOperator/Firework1/App.vue +12 -1
  28. package/DemoForOperator/Firework1/Fireworks.vue +18 -0
  29. package/DemoForOperator/FlipPage/FlipPage/FlipPage.vue +1 -0
  30. package/DemoForOperator/Focus/Alpha/Item.vue +1 -0
  31. package/DemoForOperator/Focus/Light/Item.vue +1 -0
  32. package/DemoForOperator/Focus/Normal/Item.vue +1 -0
  33. package/DemoForOperator/FrameShadow/FrameShadow.vue +1 -1
  34. package/DemoForOperator/Genie/App.vue +20 -6
  35. package/DemoForOperator/Genie/App2.vue +61 -0
  36. package/DemoForOperator/Genie/geniePakcer/GenieImage.vue +298 -0
  37. package/DemoForOperator/Genie/geniePakcer/GenieSlot.vue +292 -0
  38. package/DemoForOperator/Genie/geniePakcer/GenieTools.ts +463 -0
  39. package/DemoForOperator/Jigsaw/JigsawFull.vue +12 -7
  40. package/DemoForOperator/Jigsaw/JigsawSingle.vue +13 -7
  41. package/DemoForOperator/LongChatBox/App.vue +13 -13
  42. package/DemoForOperator/LongChatBox/Bubble.vue +78 -66
  43. package/DemoForOperator/LongChatBox/LongChat.vue +68 -36
  44. package/DemoForOperator/LongChatBox/testData.js +7 -44
  45. package/DemoForOperator/Sound/Bounce/FreeMoveBuilder.js +1 -1
  46. package/DemoForOperator/routeList.js +8 -2
  47. package/DemoHomepage/App.vue +74 -1
  48. package/DemoHomepage/components/BodyFrame.vue +1 -0
  49. package/DemoHomepage/components/TabFrame.vue +1 -1
  50. package/DemoHomepage/router.js +723 -160
  51. package/DemoHomepage/views/Homepage.vue +60 -2
  52. package/DemoHomepage/watchTest.vue +50 -0
  53. package/FilterDemo/AnimatePic.vue +63 -17
  54. package/FilterDemo/App.vue +3 -3
  55. package/FlexCellDemo/AI_skills_update.md +4 -0
  56. package/FlexCellDemo/TestFrame1.vue +12 -2
  57. package/FlexCellDemo/TestFrame2.vue +10 -1
  58. package/FlexCellDemo/TestFrame3.vue +114 -59
  59. package/FpsLimit/App.vue +102 -0
  60. package/FreeMoveChildAttract/App.vue +18 -8
  61. package/FreeMoveLink/App.vue +49 -20
  62. package/Hover/App.vue +144 -0
  63. package/HttpRequestSSE/SSEReader.js +200 -0
  64. package/ImpactStop/App.vue +2 -2
  65. package/Input/FullKeyboard.vue +3 -3
  66. package/Input/InputPanel.vue +63 -3
  67. package/JsvLine/App.vue +53 -38
  68. package/LatexDemo/App.vue +3 -1
  69. package/LatexFormula/App.vue +196 -0
  70. package/LongImage/App.vue +1 -1
  71. package/LongImage/LongImageScroll.vue +100 -47
  72. package/LongImage/Scroll.vue +28 -9
  73. package/LongText/LongTextScroll.vue +1 -0
  74. package/Markdown/App.vue +36 -0
  75. package/Markdown/Bubble.vue +109 -0
  76. package/Markdown/LongChat.vue +206 -0
  77. package/Markdown/Markdown/Markdown.vue +156 -0
  78. package/Markdown/Markdown/index.ts +1 -0
  79. package/Markdown/Markdown/marked/LICENSE.md +45 -0
  80. package/Markdown/Markdown/marked/index.ts +2 -0
  81. package/Markdown/Markdown/marked/marked.d.ts +756 -0
  82. package/Markdown/Markdown/marked/marked.js +71 -0
  83. package/Markdown/Markdown/parser.ts +1365 -0
  84. package/Markdown/data.js +581 -0
  85. package/MetroWidgetDemos/AI_skills_update.md +2 -0
  86. package/MetroWidgetDemos/ListExpand/ChildItem.vue +130 -0
  87. package/MetroWidgetDemos/ListExpand/ExpandItem.vue +375 -0
  88. package/MetroWidgetDemos/ListExpand/ExpandItem1.vue +403 -0
  89. package/MetroWidgetDemos/ListExpand/assets/arrow-down.png +0 -0
  90. package/MetroWidgetDemos/ListExpand/assets/up-arrow.png +0 -0
  91. package/MetroWidgetDemos/ListExpand/components/WidgetListHandler.vue +150 -0
  92. package/MetroWidgetDemos/ListExpand/index.vue +88 -0
  93. package/MetroWidgetDemos/ListExpand/list.js +2421 -0
  94. package/MetroWidgetDemos/RefreshDemo/App.vue +14 -1
  95. package/MetroWidgetDemos/RenderAccelerate/App.vue +142 -0
  96. package/MetroWidgetDemos/RenderAccelerate/AppPage.vue +78 -0
  97. package/MetroWidgetDemos/RenderAccelerate/AppTab.vue +62 -0
  98. package/MetroWidgetDemos/RenderAccelerate/ContentItem.vue +409 -0
  99. package/MetroWidgetDemos/RenderAccelerate/Item.vue +67 -0
  100. package/MetroWidgetDemos/RenderAccelerate/TabItem.vue +100 -0
  101. package/MetroWidgetDemos/RenderAccelerate/ViewSwiper.vue +215 -0
  102. package/MetroWidgetDemos/RenderAccelerate/WidgetItem.vue +107 -0
  103. package/MetroWidgetDemos/SkeletonDiagram/App.vue +35 -8
  104. package/MetroWidgetDemos/SkeletonDiagram/Item.vue +11 -2
  105. package/MetroWidgetDemos/SkeletonDiagram/assets/imageList.js +245 -0
  106. package/MetroWidgetDemos/SkeletonDiagram/data.js +3 -3
  107. package/MetroWidgetDemos/SpatialNav/App.vue +177 -0
  108. package/MetroWidgetDemos/SpatialNav/Buttons.vue +83 -0
  109. package/MetroWidgetDemos/SpatialNav/CustomFocus.vue +57 -0
  110. package/MetroWidgetDemos/{TripleWidget → SpatialNav}/Item.vue +1 -8
  111. package/MetroWidgetDemos/{TripleWidget/WidgetItem.vue → SpatialNav/SimpleFloor.vue} +14 -45
  112. package/MetroWidgetDemos/SpatialNav/StepMw.vue +113 -0
  113. package/MetroWidgetDemos/SpatialNav/TabContent/TabContent.vue +185 -0
  114. package/MetroWidgetDemos/SpatialNav/TripleSection/TripleSection.vue +69 -0
  115. package/MetroWidgetDemos/SpatialNav/TripleSection/WidgetItem.vue +100 -0
  116. package/MetroWidgetDemos/SpatialNav/TvSection/List.vue +75 -0
  117. package/MetroWidgetDemos/SpatialNav/TvSection/TvSection.vue +91 -0
  118. package/MetroWidgetDemos/basic2/App.vue +407 -0
  119. package/MetroWidgetDemos/basic2/Item.vue +68 -0
  120. package/MetroWidgetDemos/direction/App.vue +22 -0
  121. package/MetroWidgetDemos/gazeFocusDiff/App.vue +126 -0
  122. package/MetroWidgetDemos/gazeFocusDiff/Item.vue +87 -0
  123. package/MetroWidgetDemos/minimalUsage/App.vue +66 -0
  124. package/MetroWidgetDemos/minimalUsage/Item.vue +54 -0
  125. package/MetroWidgetDemos/ninePatchFocusPage/App.vue +22 -7
  126. package/MetroWidgetDemos/ninePatchFocusPage/Item.vue +7 -5
  127. package/MetroWidgetDemos/ninePatchFocusPage/focusConstants.js +2 -0
  128. package/MetroWidgetDemos/routeList.js +203 -12
  129. package/MetroWidgetDemos/slideSetting/App.vue +288 -99
  130. package/MetroWidgetDemos/zIndex/App.vue +117 -0
  131. package/MetroWidgetDemos/zIndex/Item.vue +61 -0
  132. package/NinePatchTester/App.vue +24 -31
  133. package/PreDecode/App.vue +140 -0
  134. package/ReactiveTest/App.vue +115 -0
  135. package/ReactiveTest/Item.vue +92 -0
  136. package/ReactiveTest/assets/imageList.js +245 -0
  137. package/ReactiveTest/component/TestSmartDiv.vue +50 -0
  138. package/ReactiveTest/component/TestSmartDivSrcList.vue +74 -0
  139. package/ReactiveTest/component/TestSmartImage.vue +46 -0
  140. package/ReactiveTest/component/TestSmartImageSrcList.vue +90 -0
  141. package/ReactiveTest/component/TestSmartImageStyle.vue +41 -0
  142. package/ReactiveTest/data.js +49 -0
  143. package/ScreenToBlob/App.vue +250 -0
  144. package/SecTorTest/App.vue +9 -3
  145. package/SpringFestival/SpringFestivalScene/FreeMoveBuilder.js +3 -3
  146. package/SyncDecode/App.vue +137 -0
  147. package/TextSizeLimit/App.vue +211 -0
  148. package/TransitPage/App.vue +2 -0
  149. package/assets/logo.png +0 -0
  150. package/package.json +5 -5
  151. package/DemoForOperator/Genie/geniePakcer/Genie.vue +0 -741
  152. package/DemoForOperator/LongChatBox/TextManager.ts +0 -147
  153. package/DemoForOperator/LongChatBox/VirtualList.vue +0 -298
  154. package/DemoForOperator/LongChatBox/utile.js +0 -331
  155. package/DivMetroPerformance/App.vue +0 -157
  156. package/DivMetroPerformance/Item.vue +0 -58
  157. package/DivMetroPerformance/assets/bg.jpg +0 -0
  158. package/DivMetroPerformance/assets/coupon_content.png +0 -0
  159. package/DivMetroPerformance/assets/coupon_left.png +0 -0
  160. package/DivMetroPerformance/assets/coupon_mid.png +0 -0
  161. package/DivMetroPerformance/assets/coupon_right.png +0 -0
  162. package/DivMetroPerformance/assets/focus_border.png +0 -0
  163. package/DivMetroPerformance/assets/holder_logo.png +0 -0
  164. package/DivMetroPerformance/assets/jrbm.png +0 -0
  165. package/DivMetroPerformance/assets/line_left.png +0 -0
  166. package/DivMetroPerformance/assets/line_mid.png +0 -0
  167. package/DivMetroPerformance/assets/line_right.png +0 -0
  168. package/DivMetroPerformance/assets/loading.png +0 -0
  169. package/DivMetroPerformance/assets/logo.png +0 -0
  170. package/DivMetroPerformance/assets/mcjx.png +0 -0
  171. package/DivMetroPerformance/assets/tao.png +0 -0
  172. package/DivMetroPerformance/assets/tmall.png +0 -0
  173. package/DivMetroPerformance/border.png +0 -0
  174. package/DivMetroPerformance/components/ContentItem.vue +0 -384
  175. package/DivMetroPerformance/components/MyTab.vue +0 -129
  176. package/DivMetroPerformance/data.js +0 -124
  177. package/DivMetroPerformance/utils/GridItem.vue +0 -28
  178. package/DivMetroPerformance/utils/GridPlate.vue +0 -85
  179. package/MediaDemo/App.vue +0 -127
  180. package/MediaDemo/assets/audio-poster.png +0 -0
  181. package/MediaDemo/components/Button.vue +0 -69
  182. package/MediaDemo/components/Controllor.vue +0 -286
  183. package/MediaDemo/components/StatusBar.vue +0 -100
  184. package/MediaDemo/components/frames/AudioFrame.vue +0 -39
  185. package/MediaDemo/components/frames/AudioPoster.vue +0 -48
  186. package/MediaDemo/components/frames/MediaFrame.vue +0 -153
  187. package/MediaDemo/components/frames/VideoFrame.vue +0 -39
  188. package/MetroWidgetDemos/TripleWidget/App.vue +0 -87
  189. package/MetroWidgetDemos/TripleWidget/SWidgetItem.vue +0 -99
  190. package/Parkour/App.vue +0 -13
  191. package/Parkour/Common/Context.js +0 -21
  192. package/Parkour/Common/MatchmanInfo.js +0 -62
  193. package/Parkour/Common/Random.js +0 -61
  194. package/Parkour/Common/Sound.js +0 -50
  195. package/Parkour/appConfig/HOW_TO_CONFIG.md +0 -20
  196. package/Parkour/appConfig/app.config.mjs +0 -5
  197. package/Parkour/appConfig/app_sign_private_key_sample.crt +0 -28
  198. package/Parkour/appConfig/app_sign_public_key_sample.pem +0 -9
  199. package/Parkour/appConfig/jsview.config.mjs +0 -39
  200. package/Parkour/assets/Bgimages/bg1.png +0 -0
  201. package/Parkour/assets/Bgimages/bg2.png +0 -0
  202. package/Parkour/assets/Bgimages/bg3.png +0 -0
  203. package/Parkour/assets/Bgimages/bg4.png +0 -0
  204. package/Parkour/assets/Bgimages/bg5.png +0 -0
  205. package/Parkour/assets/audio/jump.mp3 +0 -0
  206. package/Parkour/assets/audio/lose.mp3 +0 -0
  207. package/Parkour/assets/role_skin1/fail.json +0 -44
  208. package/Parkour/assets/role_skin1/fail.png +0 -0
  209. package/Parkour/assets/role_skin1/jump_down.json +0 -20
  210. package/Parkour/assets/role_skin1/jump_down.png +0 -0
  211. package/Parkour/assets/role_skin1/jump_up.json +0 -44
  212. package/Parkour/assets/role_skin1/jump_up.png +0 -0
  213. package/Parkour/assets/role_skin1/roll.json +0 -44
  214. package/Parkour/assets/role_skin1/roll.png +0 -0
  215. package/Parkour/assets/role_skin1/run.json +0 -52
  216. package/Parkour/assets/role_skin1/run.png +0 -0
  217. package/Parkour/components/Backdrop.vue +0 -61
  218. package/Parkour/components/GameSence.vue +0 -602
  219. package/Parkour/components/Matchman.vue +0 -85
  220. package/ThrowMoveDemo/AccelerateDemo.vue +0 -85
  221. package/ThrowMoveDemo/App.vue +0 -104
  222. package/ThrowMoveDemo/LRParabolicDemo.vue +0 -101
  223. package/ThrowMoveDemo/TargetDemo.vue +0 -87
  224. package/ThrowMoveDemo/UDParabolicDemo.vue +0 -92
  225. /package/{AnimPicture/assets → assets}/animated_webp.webp +0 -0
  226. /package/{AnimPicture/assets → assets}/ball_3.webp +0 -0
  227. /package/{AnimPicture/assets → assets}/girl_run.gif +0 -0
  228. /package/{AnimPicture/assets → assets}/quan.webp +0 -0
package/ReactiveTest/assets/imageList.js ADDED
@@ -0,0 +1,245 @@
1
+ import webp from "../../assets/animated_webp.webp"
2
+ import gif from "../../assets/girl_run.gif"
3
+ import staticWebp from "../../assets/webpDemo.webp"
4
+
5
+
6
+ export const imageList = [
7
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/089049108f2d1246ae9d6dc3d123dd44.jpeg",
8
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5c7acca00d79a4ddde978cf0a4e88d31.jpeg",
9
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/c1fbeecb0d930c5aed173289b1cbe659.jpeg",
10
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/07484ae343de815ad5b7e4dad7fd9d62.jpeg",
11
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5b1c19c766fce2c9df19f66519626e30.jpeg",
12
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/c3e8959a45ac2a3723ee0908dae640df.jpeg",
13
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/1652a0867e68dd1ec679eb1c81df1188.jpeg",
14
+ webp,
15
+ gif,
16
+ staticWebp,
17
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/be821910e1a6180e.jpg",
18
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/dd4b1c7471613493.jpg",
19
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a06164b26590b994.jpg",
20
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/8a2b507dd6effe91.jpg",
21
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d6f86f1b1d5f112d.jpg",
22
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/e1e898525109d0ea.jpg",
23
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/4b90428b88320241.jpg",
24
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/2d08ee397f16baf4.jpg",
25
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/18a4fe9f05e5f996.jpg",
26
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/82ce63e356d3bb32.jpg",
27
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a4fd835c9c41c716.jpg",
28
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/e999bc6f5463cb4e.jpg",
29
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/96426ee2f39fb8cb.jpg",
30
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/0fd37f341d1a6186.jpg",
31
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/973bdf1378842c3c.jpg",
32
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/db16809921f29988.jpg",
33
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/f7f457be48c0b252.jpg",
34
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/9e7aca116e9bd23a.jpg",
35
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/efb35507276509cd.jpg",
36
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/03227214ef907ec4.jpg",
37
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/987cbb3b5ba75fb0.jpg",
38
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/1bd2ef58f848924a.jpg",
39
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/fb2d21670aca6e09.jpg",
40
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/24b9169c46f9bac1.jpg",
41
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/7bc0a6db17c85d7c.jpg",
42
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/3bdad46280c4781f.jpg",
43
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/0e10f1d396382721.jpg",
44
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/992bb72c9a6e5537.jpg",
45
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/1adb7cfd54bad762.jpg",
46
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/7020af742fbe5895.jpg",
47
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/c0dab826b71e0b84.jpg",
48
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d3d1a1a5a226139b.jpg",
49
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/2fa0342ba547cfac.jpg",
50
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/af5aa60b611b7861.jpg",
51
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/c7fbefe3075eb97a.jpg",
52
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d5d03b9d92c1a90b.jpg",
53
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/7071d33d74316ac7.jpg",
54
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/b5011869afdcb72e.jpg",
55
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/e69c322bfe53a952.jpg",
56
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/36ececd03608c69a.jpg",
57
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/07037380fd737c6f.jpg",
58
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/4998cad21b8dc773.jpg",
59
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/afd73496e016d1b1.jpg",
60
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/bd3b38228ac349ba.jpg",
61
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a057281b5dfba11a.jpg",
62
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/3ffb07c15ef70f5e.jpg",
63
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/dee3ce131ab83da0.jpg",
64
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a979551d4cbbc603.jpg",
65
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/0b6fed4c62c0cfdd.jpg",
66
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/8a885019d1e287dd.jpg",
67
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/ff1666a5941fde4c.jpg",
68
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/bbc79217b5621bbc.jpg",
69
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/fb4b2565485a4eec.jpg",
70
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/35865c385a2859a2.jpg",
71
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/51c92e09054c4001.jpg",
72
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/17619fff9cba8274.jpg",
73
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/12267bf7b4a5e477.jpg",
74
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d62e0b0e607bbad2.jpg",
75
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/59d4f937821167c0.jpg",
76
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/dde8d7d2cdc3b605.jpg",
77
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/83e6937f91b1db0c.jpg",
78
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/f74043d436a6c82a.jpg",
79
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/87f4a75c30238fc9.jpg",
80
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/da0328d228a1e3d9.jpg",
81
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/2cec52d5b31a4194.jpg",
82
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/15775098507cc561.jpg",
83
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/439e8e7821d7f65f.jpg",
84
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/edd2b54e653f1f22.jpg",
85
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/b69a505c9ae2b8d8.jpg",
86
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/07b0ffd8a2354ce3.jpg",
87
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/f22056a877ddb6f5.jpg",
88
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/3df0a8593cab314e.jpg",
89
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/3a1cca63312a4406.jpg",
90
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d3cddd47928552c3.jpg",
91
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/6ec567f350547bb0.jpg",
92
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/3bfb3a6ff92230c2.jpg",
93
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/495902170b807db5.jpg",
94
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/e5834d54118f0e5f.jpg",
95
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/39b67b243e48f156.jpg",
96
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/ebe14ce5b9819f8c.jpg",
97
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/c6dbbc1f71ea225f.jpg",
98
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/fff1e26e8ff67bd5.jpg",
99
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/f2ab2f3f176551fc.jpg",
100
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/28066bfe4368a738.jpg",
101
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/f8e56da420aff5e7.jpg",
102
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/3fc77b1409c9a58e.jpg",
103
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/82059496c87b1b79.jpg",
104
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/6bc62fddf6a20b2c.jpg",
105
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/89e9cbf66e7fb2bd.jpg",
106
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/f06ff89ab26ff0b2.jpg",
107
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/072aad91b430a55b.jpg",
108
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/bba49ec8616bfba0.jpg",
109
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/97c86a12f2ee9906.jpg",
110
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/8976a2a8c386145a.jpg",
111
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/83a0a960ad28855d.jpg",
112
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/1f9dd4b0ad1ebef0.jpg",
113
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/994eda01dc621932.jpg",
114
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/b6154a6a569baa4c.jpg",
115
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/c059a11d45efd8e7.jpg",
116
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d8d84d49ec1599fd.jpg",
117
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/b1612b9842d2afdf.jpg",
118
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/ec00041d9868ff5e.jpg",
119
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/f1ce95b11c0647c3.jpg",
120
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/27af4c3887d08f9c.jpg",
121
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/b3859c18ad7ba8f1.png",
122
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/66c774ad10dfa76e.jpg",
123
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/631573ef8d67bece.jpg",
124
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d429d71574a4ba2a.jpg",
125
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/40dea8e7afde54b2.jpg",
126
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/854fbfb543103c41.jpg",
127
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/93f21a931c24c0e3.png",
128
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/e879416e80a4bb64.jpg",
129
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/960f759e33e81a42.jpg",
130
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/6d8bf438c38a4540.jpg",
131
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/63adb172005fc1fd.jpg",
132
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/318b0be38c56940b.jpg",
133
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d7b0116771280a1d.jpg",
134
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d7e82badaf087bcc.jpg",
135
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a61534df8883abc5.jpg",
136
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/68e0f174faf257e5.jpg",
137
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/623155c01cdf5fd2.jpg",
138
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/2b835f45d3e5ab1c.jpg",
139
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/4fd8ecdfaf4191bb.jpg",
140
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/070e63657dedd322.png",
141
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5709f4cad7ad7df9.jpg",
142
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/71af0f21f5ab84f2.jpg",
143
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/ac76ca830f616267.jpg",
144
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/fb82c513e662ff4c.jpg",
145
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/6e2f2f52659fc7ab.png",
146
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5b0fc5da81b01660.jpg",
147
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/acdc0606d161374c.jpg",
148
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/27bf3a09d5eb8cef.jpg",
149
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/cb0111b72eb6a70c.jpg",
150
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/dcdca62b227dd6b3.jpg",
151
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a87442615f7da229.jpg",
152
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/116a5bbe4a39ff7e.jpg",
153
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/90a4062421adde33.jpg",
154
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/56e8e33ebf52f7fa.jpg",
155
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/230c87eb3688b8ed.jpg",
156
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/54a4096168d40c83.jpg",
157
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/b4331a258c551d26.jpg",
158
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/58a98d14efd7a011.jpg",
159
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a06fdd072bc8d295.png",
160
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/b1448920cf312a4a.jpg",
161
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/9dd0a9f41b3f8921.jpg",
162
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/ce863f7c5dab7584.jpg",
163
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/3e8bb8cba8b1ea6f.jpg",
164
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/87e61549f710d27a.jpg",
165
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/e308d7e004a832e6.jpg",
166
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/bb872eee65c77242.jpg",
167
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/bc806144aa881669.jpg",
168
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/f14dbc1de8533e1f.jpg",
169
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/444584dd1c948d5f.jpg",
170
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/49382e869b870721.jpg",
171
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/1d58cbccd2c78063.jpg",
172
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/eefc3e51b59238a3.jpg",
173
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/fb1a375a97ae5abe.jpg",
174
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/01987866f8566e16.jpg",
175
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a4cfcb0be51b7077.png",
176
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/10a26e4693a7e681.jpg",
177
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a0c5278e009cea31.jpg",
178
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/2d530b95381876f1.jpg",
179
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/8436bbd3b6e911ec.jpg",
180
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/b7de9c52e8e178bc.jpg",
181
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d2456e92f7fa6272.jpg",
182
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/0ea6966cf575fa0c.jpg",
183
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/58462cd6N653980df.jpg",
184
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/583ba764Na1a6ad63.jpg",
185
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5b4978d3N399b8d4e.jpg",
186
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/6619decddc5fa64a.jpg",
187
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/dd7e142aed6f34df.jpg",
188
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/c04a6dc5ecf21437.jpg",
189
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/8daf44dfd4077bce.jpg",
190
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5b1263bc25ccb743.jpg",
191
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/48853e2393b281de.jpg",
192
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/30196967d43d0faa.jpg",
193
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d601fb50df5f2ec2.jpg",
194
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5cfc778381fab6fa.jpg",
195
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/992d232d5332ebba.jpg",
196
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/20a849ea0864ff99.jpg",
197
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/8760827ea33ae8f3.jpg",
198
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/bcd38b57d07310db.jpg",
199
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/016ea68b67d0f404.jpg",
200
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/4ada886bbeb9cff4.jpg",
201
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/2d2a5400d1d0e695.jpg",
202
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/b893728d1a0843be.jpg",
203
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/8b9de32350fc3347.jpg",
204
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5b78dff8Nf99eda64.jpg",
205
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/e9c61352b942e388.jpg",
206
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/9eeab7adc14802e0.jpg",
207
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/161f83031d25b981.jpg",
208
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/838fdccf878d6da0.jpg",
209
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/4f5ba88bdfbf3dcd.jpg",
210
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/fe712dbd1504cd81.jpg",
211
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d9300269ea2e6f87.jpg",
212
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/531f8f6560ab3e8f.jpg",
213
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/bb0b3810b3ed1645.jpg",
214
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/58b3c779Na1ec50a0.jpg",
215
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/972b84a916fe8d83.jpg",
216
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/7c49a9496c9b6f1e.jpg",
217
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/40b1b36491cdc48e.jpg",
218
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/57f0fc494e8aa9fc.jpg",
219
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/fdc0f6379f113b56.jpg",
220
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/58b3c601Na4f13da4.jpg",
221
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/ea46e927714e7776.jpg",
222
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/7f1879688b822d4c.jpg",
223
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/9ea0ec040a1a9b41.jpg",
224
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/f92ed8a49d1b22cb.jpg",
225
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/28a5e676db4ca8fe.jpg",
226
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/02939cd3062bb89b.jpg",
227
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/7464a6d8b269c5bb.jpg",
228
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/715ef1f0383804d4.jpg",
229
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/93c15612e9239868.jpg",
230
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/2bb6c492562edae5.jpg",
231
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5bf3ae8aN92842a02.jpg",
232
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5e62a4a36a1ee07a.jpg",
233
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/14f1ac9a30d5e0cd.jpg",
234
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/8203f756e4fd472f.jpg",
235
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/0904c5b0ad5c32c0.jpg",
236
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/73bf3ab806f3ef55.jpg",
237
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/4d8dbba0e3057926.jpg",
238
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/9f77888b4f70ac4b.jpg",
239
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/d1b35e75ed18d89b.jpg",
240
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/f716bb1ff6c32981.jpg",
241
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/dc6e37fe62335456.jpg",
242
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a94fc737996d4e26.jpg",
243
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/2bb461433e45db34.jpg",
244
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/a3e896c1dbfccd18.jpg"
245
+ ]
package/ReactiveTest/component/TestSmartDiv.vue ADDED
@@ -0,0 +1,50 @@
1
+ <!--
2
+ * @Author: ChenChanghua
3
+ * @Date: 2023-02-06 10:19:42
4
+ * @Description: file content
5
+ -->
6
+ <script setup>
7
+ import { ref, shallowRef, computed, watchEffect } from "vue";
8
+ import { JsvPosterImage, JsvPosterDiv } from "jsview";
9
+
10
+ const props = defineProps({
11
+ data: Object,
12
+ query: Object,
13
+ focused: Boolean,
14
+ });
15
+
16
+ let focused = ref(false);
17
+ let borderSet = ref("10");
18
+ let doFadeIn = ref(true);
19
+
20
+ const altSrcs = [
21
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/089049108f2d1246ae9d6dc3d123dd44.jpeg",
22
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5c7acca00d79a4ddde978cf0a4e88d31.jpeg",
23
+ ];
24
+
25
+ const posterStyle = computed(() => {
26
+ // computed写法后，若borderSet不和focused绑定, 则不会重新触发style的设置, 相比template直接写style会减少响应式消耗
27
+ return {
28
+ width: props.data.width,
29
+ height: props.data.height,
30
+ backgroundImage: altSrcs[props.focused ? 1 : 0],
31
+ borderRadius: 10,
32
+ }
33
+ });
34
+
35
+ </script>
36
+
37
+ <template>
38
+ <jsv-poster-div
39
+ :style="posterStyle"
40
+ >
41
+ <div
42
+ :style="{
43
+ width: data.width,
44
+ height: data.height,
45
+ backgroundColor: '#ff0000',
46
+ borderRadius: 10,
47
+ }"
48
+ />
49
+ </jsv-poster-div>
50
+ </template>
package/ReactiveTest/component/TestSmartDivSrcList.vue ADDED
@@ -0,0 +1,74 @@
1
+ <!--
2
+ * @Author: ChenChanghua
3
+ * @Date: 2023-02-06 10:19:42
4
+ * @Description: file content
5
+ -->
6
+ <script setup>
7
+ import { ref, shallowRef, computed, onMounted, onBeforeUnmount } from "vue";
8
+ import { JsvPosterDiv } from "jsview";
9
+
10
+ const props = defineProps({
11
+ data: Object,
12
+ query: Object,
13
+ focused: Boolean,
14
+ });
15
+
16
+ let focused = ref(false);
17
+ let borderSet = ref("10");
18
+ let doFadeIn = ref(true);
19
+
20
+ const altSrcs1 = [
21
+ "#7F7F00",
22
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5c7acca00d79a4ddde978cf0a4e88d31.jpeg",
23
+ ];
24
+
25
+ const altSrcs2 = [
26
+ "rgba(128, 0, 128, 0.5)",
27
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/07484ae343de815ad5b7e4dad7fd9d62.jpeg",
28
+ ];
29
+
30
+ // 定时变化图片组
31
+ let switchIndex = ref(0);
32
+ const altSrcs = computed(() => {
33
+ return switchIndex.value === 0 ? altSrcs1 : altSrcs2;
34
+ });
35
+ let timer = null;
36
+ onMounted(() => {
37
+ timer = setInterval(() => {
38
+ switchIndex.value = (switchIndex.value + 1) % 2;
39
+ }, 1500);
40
+ });
41
+ onBeforeUnmount(() => {
42
+ if (timer) {
43
+ clearInterval(timer);
44
+ timer = null;
45
+ }
46
+ });
47
+
48
+ const posterStyle = computed(() => {
49
+ // computed写法后，若borderSet不和focused绑定, 则不会重新触发style的设置, 相比template直接写style会减少响应式消耗
50
+ return {
51
+ width: props.data.width,
52
+ height: props.data.height,
53
+ backgroundColor: "#FFFFFF", // 白色背景，应该不被展示
54
+ borderRadius: 10,
55
+ }
56
+ });
57
+
58
+ </script>
59
+
60
+ <template>
61
+ <jsv-poster-div
62
+ :style="posterStyle"
63
+ :altImages="altSrcs"
64
+ :altIndex="props.focused ? 1 : 0"
65
+ >
66
+ <div
67
+ :style="{
68
+ ...posterStyle,
69
+ backgroundColor: '#ff0000',
70
+ borderRadius: 10,
71
+ }"
72
+ />
73
+ </jsv-poster-div>
74
+ </template>
package/ReactiveTest/component/TestSmartImage.vue ADDED
@@ -0,0 +1,46 @@
1
+ <!--
2
+ * @Author: ChenChanghua
3
+ * @Date: 2023-02-06 10:19:42
4
+ * @Description: file content
5
+ -->
6
+ <script setup>
7
+ import { ref, shallowRef, computed, watchEffect } from "vue";
8
+ import { JsvPosterImage } from "jsview";
9
+
10
+ const props = defineProps({
11
+ data: Object,
12
+ query: Object,
13
+ focused: Boolean,
14
+ });
15
+
16
+ // const altSrcs = [props.data.url, props.data.focusUrl];
17
+ const altSrcs = [
18
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/089049108f2d1246ae9d6dc3d123dd44.jpeg",
19
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5c7acca00d79a4ddde978cf0a4e88d31.jpeg",
20
+ ]
21
+
22
+ const posterStyle = computed(() => {
23
+ // computed写法后，若borderSet不和focused绑定, 则不会重新触发style的设置, 相比template直接写style会减少响应式消耗
24
+ return {
25
+ width: props.data.width,
26
+ height: props.data.height,
27
+ }
28
+ });
29
+
30
+ </script>
31
+
32
+ <template>
33
+ <jsv-poster-image
34
+ :style="posterStyle"
35
+ :src="altSrcs[props.focused ? 1 : 0]"
36
+ >
37
+ <div
38
+ :style="{
39
+ width: data.width,
40
+ height: data.height,
41
+ backgroundColor: '#ff0000',
42
+ borderRadius: 10,
43
+ }"
44
+ />
45
+ </jsv-poster-image>
46
+ </template>
package/ReactiveTest/component/TestSmartImageSrcList.vue ADDED
@@ -0,0 +1,90 @@
1
+ <!--
2
+ * @Author: ChenChanghua
3
+ * @Date: 2023-02-06 10:19:42
4
+ * @Description: file content
5
+ -->
6
+ <script setup>
7
+ import {
8
+ ref,
9
+ shallowRef,
10
+ computed,
11
+ watchEffect,
12
+ onMounted,
13
+ onBeforeUnmount,
14
+ } from "vue";
15
+ import { JsvPosterImage } from "jsview";
16
+
17
+ const props = defineProps({
18
+ data: Object,
19
+ query: Object,
20
+ focused: Boolean,
21
+ });
22
+
23
+ const altSrcs1 = [
24
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/089049108f2d1246ae9d6dc3d123dd44.jpeg",
25
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/5c7acca00d79a4ddde978cf0a4e88d31.jpeg",
26
+ ];
27
+
28
+ const altSrcs2 = [
29
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/c1fbeecb0d930c5aed173289b1cbe659.jpeg",
30
+ "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/07484ae343de815ad5b7e4dad7fd9d62.jpeg",
31
+ ];
32
+
33
+ // 定时变化图片组
34
+ let switchIndex = ref(0);
35
+ const altSrcs = computed(() => {
36
+ return switchIndex.value === 0 ? altSrcs1 : altSrcs2;
37
+ });
38
+ let timer = null;
39
+ onMounted(() => {
40
+ timer = setInterval(() => {
41
+ switchIndex.value = (switchIndex.value + 1) % 2;
42
+ }, 1500);
43
+ });
44
+ onBeforeUnmount(() => {
45
+ if (timer) {
46
+ clearInterval(timer);
47
+ timer = null;
48
+ }
49
+ });
50
+
51
+ const posterStyle = computed(() => {
52
+ // computed写法后，若borderSet不和focused绑定, 则不会重新触发style的设置, 相比template直接写style会减少响应式消耗
53
+ return {
54
+ width: props.data.width,
55
+ height: props.data.height / 2,
56
+ borderRadius: 10,
57
+ };
58
+ });
59
+ </script>
60
+
61
+ <template>
62
+ <jsv-poster-image
63
+ :style="posterStyle"
64
+ :altImages="altSrcs"
65
+ :altIndex="props.focused ? 1 : 0"
66
+ :altSync="true"
67
+ >
68
+ <div
69
+ :style="{
70
+ ...posterStyle,
71
+ backgroundColor: '#ff0000',
72
+ borderRadius: 10,
73
+ }"
74
+ />
75
+ </jsv-poster-image>
76
+ <jsv-poster-image
77
+ :style="{...posterStyle, top: props.data.height / 2}"
78
+ :altImages="altSrcs"
79
+ :altIndex="props.focused ? 1 : 0"
80
+ :altSync="false"
81
+ >
82
+ <div
83
+ :style="{
84
+ ...posterStyle,
85
+ backgroundColor: '#ff0000',
86
+ borderRadius: 10,
87
+ }"
88
+ />
89
+ </jsv-poster-image>
90
+ </template>
package/ReactiveTest/component/TestSmartImageStyle.vue ADDED
@@ -0,0 +1,41 @@
1
+ <!--
2
+ * @Author: ChenChanghua
3
+ * @Date: 2023-02-06 10:19:42
4
+ * @Description: file content
5
+ -->
6
+ <script setup>
7
+ import { ref, shallowRef, computed, watchEffect } from "vue";
8
+ import { JsvPosterImage } from "jsview";
9
+
10
+ const props = defineProps({
11
+ data: Object,
12
+ query: Object,
13
+ focused: Boolean,
14
+ });
15
+
16
+ const posterStyle = computed(() => {
17
+ // computed写法后，若borderSet不和focused绑定, 则不会重新触发style的设置, 相比template直接写style会减少响应式消耗
18
+ return {
19
+ left: props.focused ? 10 : 0,
20
+ top: props.focused ? 10 : 0,
21
+ width: props.data.width + (props.focused ? -20 : 0),
22
+ height: props.data.height + (props.focused ? -20 : 0),
23
+ borderRadius: props.focused ? "10 0 10 0" : "10"
24
+ }
25
+ });
26
+
27
+ </script>
28
+
29
+ <template>
30
+ <jsv-poster-image
31
+ :style="posterStyle"
32
+ src="https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/SkeletonDiagram/assets/imageList/089049108f2d1246ae9d6dc3d123dd44.jpeg"
33
+ >
34
+ <div
35
+ :style="{
36
+ ...posterStyle,
37
+ backgroundColor: '#ff0000',
38
+ }"
39
+ />
40
+ </jsv-poster-image>
41
+ </template>
package/ReactiveTest/data.js ADDED
@@ -0,0 +1,49 @@
1
+ /*
2
+ * @Author: ChenChanghua
3
+ * @Date: 2023-02-06 10:21:46
4
+ * @Description: file content
5
+ */
6
+ import TestSmartImage from "./component/TestSmartImage.vue"
7
+ import TestSmartImageSrcList from "./component/TestSmartImageSrcList.vue"
8
+ import TestSmartImageStyle from "./component/TestSmartImageStyle.vue"
9
+ import TestSmartDiv from "./component/TestSmartDiv.vue"
10
+ import TestSmartDivSrcList from "./component/TestSmartDivSrcList.vue"
11
+ let data = [
12
+ {
13
+ component: TestSmartImage,
14
+ width: 200,
15
+ height: 200,
16
+ index: 0,
17
+ name: "img",
18
+ },
19
+ {
20
+ component: TestSmartImageSrcList,
21
+ width: 200,
22
+ height: 200,
23
+ index: 1,
24
+ name: "imgList",
25
+ },
26
+ {
27
+ component: TestSmartImageStyle,
28
+ width: 200,
29
+ height: 200,
30
+ index: 2,
31
+ name: "imgStyle",
32
+ },
33
+ {
34
+ component: TestSmartDiv,
35
+ width: 200,
36
+ height: 200,
37
+ index: 3,
38
+ name: "div",
39
+ },
40
+ {
41
+ component: TestSmartDivSrcList,
42
+ width: 200,
43
+ height: 200,
44
+ index: 4,
45
+ name: "divList",
46
+ },
47
+ ];
48
+
49
+ export default data;