@shijiu/jsview-vue-samples 2.2.373 → 2.3.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.
- package/BakeViewDemo/AnimatePic.vue +1 -1
- package/Basic/components/text/TextDirection.vue +7 -2
- package/BasicFocusControl/components/BaseBlock.vue +65 -18
- package/BreakRender/assets/imageList.json +235 -235
- package/ColorSpace/App.vue +4 -4
- package/CoupletsTest/App.vue +1 -1
- package/CoupletsTest/widget/Banger/Banger.vue +3 -3
- package/CoupletsTest/widget/Banger/MaroonLoader.vue +5 -5
- package/CoupletsTest/widget/Couplets/Couplets.vue +4 -4
- package/CoupletsTest/widget/Fireworks/Fireworks.vue +13 -13
- package/CssPreprocessor/Stylus/components/stylus-group1/StylusOperations.vue +0 -1
- package/CssPreprocessor/utils/ContentBlock.vue +3 -3
- package/CssPreprocessor/utils/{FontStyle.css → FontConfig.css} +3 -3
- package/CssPreprocessor/utils/TitleBar.vue +2 -2
- package/CustomShader/App.vue +6 -6
- package/CustomShader/gaussianBlur.glsl +1 -1
- package/DashPath/App.vue +79 -0
- package/DashPath/AppForOperator.vue +35 -0
- package/DashPath/DashPath.vue +118 -0
- package/DemoForOperator/AnimPic/AnimPic.vue +47 -0
- package/DemoForOperator/AnimPic/App.vue +28 -0
- package/DemoForOperator/Banger/App.vue +26 -0
- package/DemoForOperator/Banger/Banger/Banger.vue +252 -0
- package/DemoForOperator/Banger/Banger/Maroon.vue +123 -0
- package/DemoForOperator/Banger/Banger/MaroonLoader.vue +78 -0
- package/DemoForOperator/Banger/Banger/SpriteDeal.js +30 -0
- package/DemoForOperator/Bounce/App.vue +43 -0
- package/DemoForOperator/Bounce/Bounce.vue +49 -0
- package/DemoForOperator/Bounce/FreeMoveBuilder.js +139 -0
- package/DemoForOperator/ChunLian/App.vue +47 -0
- package/DemoForOperator/ChunLian/Couplets.vue +248 -0
- package/DemoForOperator/EpisodeList/App.vue +80 -0
- package/DemoForOperator/EpisodeList/EpisodeList/Controller.vue +113 -0
- package/DemoForOperator/EpisodeList/EpisodeList/EpisodeList.vue +176 -0
- package/DemoForOperator/EpisodeList/GroupItem.vue +65 -0
- package/DemoForOperator/EpisodeList/ListItem.vue +48 -0
- package/DemoForOperator/Firework1/App.vue +25 -0
- package/DemoForOperator/Firework1/Fireworks.vue +358 -0
- package/DemoForOperator/Firework1/SpriteDeal.js +30 -0
- package/DemoForOperator/FlipPage/App.vue +75 -0
- package/DemoForOperator/FlipPage/FlipPage/FlipPage.vue +150 -0
- package/DemoForOperator/FlipPage/FlipPage/flipIn.glsl +41 -0
- package/DemoForOperator/FlipPage/FlipPage/flipOut.glsl +41 -0
- package/DemoForOperator/Focus/Alpha/AlphaFocusBox.vue +70 -0
- package/DemoForOperator/Focus/Alpha/AlphaPage.vue +40 -0
- package/DemoForOperator/Focus/Alpha/Item.vue +64 -0
- package/DemoForOperator/Focus/App.vue +124 -0
- package/DemoForOperator/Focus/CommonPageSetting.js +30 -0
- package/DemoForOperator/Focus/Item.vue +46 -0
- package/DemoForOperator/Focus/Light/Item.vue +67 -0
- package/DemoForOperator/Focus/Light/LightFocusBox.vue +46 -0
- package/DemoForOperator/Focus/Light/LightPage.vue +43 -0
- package/DemoForOperator/Focus/Light/utils/FrameCanvasStore.ts +68 -0
- package/DemoForOperator/Focus/Light/utils/RotateFrame.vue +146 -0
- package/DemoForOperator/Focus/Light/utils/circleHaloMask.png +0 -0
- package/DemoForOperator/Focus/Normal/Item.vue +64 -0
- package/DemoForOperator/Focus/Normal/NormalFocusBox.vue +53 -0
- package/DemoForOperator/Focus/Normal/NormalPage.vue +41 -0
- package/DemoForOperator/Focus/SwipeLight/Item.vue +73 -0
- package/DemoForOperator/Focus/SwipeLight/SwipeLightBox.vue +62 -0
- package/DemoForOperator/Focus/SwipeLight/SwipeLightPage.vue +44 -0
- package/DemoForOperator/FullscreenIn/App.vue +105 -0
- package/DemoForOperator/FullscreenIn/FullscreenPoster.vue +41 -0
- package/DemoForOperator/FullscreenIn/Item.vue +50 -0
- package/DemoForOperator/Genie/App.vue +78 -0
- package/DemoForOperator/Genie/geniePakcer/Genie.vue +699 -0
- package/DemoForOperator/Genie/geniePakcer/genieBottom.glsl +49 -0
- package/DemoForOperator/Genie/geniePakcer/genieLeft.glsl +50 -0
- package/DemoForOperator/Genie/geniePakcer/genieRight.glsl +57 -0
- package/DemoForOperator/Genie/geniePakcer/genieTop.glsl +50 -0
- package/DemoForOperator/GrayFilter/App.vue +51 -0
- package/DemoForOperator/GrayFilter/GrayFilter.vue +38 -0
- package/DemoForOperator/Jigsaw/App.vue +45 -0
- package/DemoForOperator/Jigsaw/JigsawFull.vue +100 -0
- package/DemoForOperator/Jigsaw/JigsawSingle.vue +86 -0
- package/DemoForOperator/Particle/App.vue +69 -0
- package/DemoForOperator/Particle/Drop/DropParticle.vue +176 -0
- package/DemoForOperator/Particle/Explode/ExplodeParticle.vue +99 -0
- package/DemoForOperator/PosterAnim/App.vue +125 -0
- package/DemoForOperator/PosterAnim/Bounce/BouncePage.vue +54 -0
- package/DemoForOperator/PosterAnim/Bounce/Item.vue +85 -0
- package/DemoForOperator/PosterAnim/Breath/BreathPage.vue +47 -0
- package/DemoForOperator/PosterAnim/Breath/Item.vue +58 -0
- package/DemoForOperator/PosterAnim/CommonPageSetting.js +30 -0
- package/DemoForOperator/PosterAnim/Item.vue +46 -0
- package/DemoForOperator/PosterAnim/PosterAnim.js +58 -0
- package/DemoForOperator/PosterAnim/Scale/Item.vue +72 -0
- package/DemoForOperator/PosterAnim/Scale/ScalePage.vue +48 -0
- package/DemoForOperator/PosterAnim/Shake/Item.vue +85 -0
- package/DemoForOperator/PosterAnim/Shake/ShakePage.vue +53 -0
- package/DemoForOperator/PosterOverflow/App.vue +116 -0
- package/DemoForOperator/PosterOverflow/Item.vue +67 -0
- package/DemoForOperator/PosterOverflow/PosterOverflow.vue +23 -0
- package/DemoForOperator/Ripple/App.vue +54 -0
- package/DemoForOperator/Ripple/Ripple.vue +50 -0
- package/DemoForOperator/ScalePoster/App.vue +4 -0
- package/DemoForOperator/ScalePoster/ScalePoster.vue +0 -0
- package/DemoForOperator/Sprite/App.vue +33 -0
- package/DemoForOperator/Sprite/Sprite.vue +90 -0
- package/DemoForOperator/Stretch/App.vue +103 -0
- package/DemoForOperator/Stretch/Stretch/Item.vue +192 -0
- package/DemoForOperator/Stretch/Stretch/Stretch.vue +168 -0
- package/DemoForOperator/TabContent/App.vue +89 -0
- package/DemoForOperator/TabContent/ContentPage.vue +66 -0
- package/DemoForOperator/TabContent/Item.vue +85 -0
- package/DemoForOperator/TabContent/PageItem.vue +40 -0
- package/DemoForOperator/TabContent/TabContent/CreepFocus.vue +160 -0
- package/DemoForOperator/TabContent/TabContent/Item.vue +63 -0
- package/DemoForOperator/TabContent/TabContent/TabContent.vue +146 -0
- package/DemoForOperator/TabContent/TabContent/TabItem.vue +368 -0
- package/DemoForOperator/TabContent/TabContent/TabWidget.vue +243 -0
- package/DemoForOperator/TabContent/TabContent/Util.js +3 -0
- package/DemoForOperator/TabContent/TabContent/ViewSwiper.vue +110 -0
- package/DemoForOperator/TabContent/testData.js +241 -0
- package/DemoForOperator/Vortex/App.vue +78 -0
- package/DemoForOperator/Vortex/Vortex/Vortex.vue +154 -0
- package/DemoForOperator/Vortex/Vortex/vortexIn.glsl +38 -0
- package/DemoForOperator/Vortex/Vortex/vortexOut.glsl +38 -0
- package/DemoForOperator/index.js +6 -0
- package/DemoForOperator/routeList.js +142 -0
- package/DemoHomepage/App.vue +50 -30
- package/DemoHomepage/components/Dialog.vue +1 -0
- package/DemoHomepage/components/TabFrame.vue +7 -0
- package/DemoHomepage/router.js +104 -81
- package/DemoHomepage/views/Homepage.vue +7 -6
- package/DivMetroPerformance/components/ContentItem.vue +0 -1
- package/DivMetroPerformance/data.js +3 -3
- package/DriftScopeTest/App.vue +1 -1
- package/FilterDemo/AnimatePic.vue +1 -1
- package/FilterDemo/VideoLayer.vue +2 -2
- package/FlexCellDemo/TestFrame1.vue +0 -4
- package/FullScreenFlex/TestFrame2.vue +1 -1
- package/GiftRain/App.vue +12 -15
- package/HashParams/App.vue +0 -1
- package/JsvPreDownloader/App.vue +4 -6
- package/Marquee/App.vue +2 -2
- package/MediaDemo/components/frames/AudioFrame.vue +1 -1
- package/MediaDemo/components/frames/VideoFrame.vue +1 -1
- package/MetroWidgetDemos/MassiveItems/ContentItem.vue +1 -2
- package/MetroWidgetDemos/MassiveItems/data.js +1 -1
- package/MetroWidgetDemos/PerformanceTest/components/ContentItem.vue +0 -1
- package/MetroWidgetDemos/PerformanceTest/components/MyTab.vue +18 -17
- package/MetroWidgetDemos/PerformanceTest/data.js +3 -3
- package/MetroWidgetDemos/RefreshDemo/assets/imageList.json +235 -235
- package/MetroWidgetDemos/SkeletonDiagram/assets/imageList.json +235 -235
- package/MetroWidgetDemos/focusableItemMetroWidget/WidgetItem.vue +3 -1
- package/MetroWidgetDemos/routeList.js +17 -17
- package/Poster3d/App.vue +69 -0
- package/Poster3d/Poster3d.vue +92 -0
- package/PosterPacker/App.vue +5 -5
- package/PosterPacker/tools/geniePakcer/Genie.vue +2 -2
- package/PosterPacker/tools/vortexPacker/Vortex.vue +15 -15
- package/QrcodeDemo/App.vue +1 -1
- package/Ripple/App.vue +1 -1
- package/ScaleDownNeon/App.vue +13 -10
- package/SceneTransition/App.vue +7 -6
- package/SceneTransition/maskConfig/config2.js +12 -12
- package/SceneTransition/maskConfig/config3.js +14 -14
- package/SprayView/App.vue +96 -51
- package/SpringFestival/App.vue +73 -0
- package/SpringFestival/SpringFestivalScene/ChunLian.vue +211 -0
- package/SpringFestival/SpringFestivalScene/FreeMoveBuilder.js +139 -0
- package/SpringFestival/SpringFestivalScene/LanternAnim.js +60 -0
- package/SpringFestival/SpringFestivalScene/Rain.vue +137 -0
- package/SpringFestival/SpringFestivalScene/Scene.vue +218 -0
- package/SpringFestival/SpringFestivalScene/imageConfig.js +87 -0
- package/SpringFestival/SpringFestivalScene/index.js +1 -0
- package/Swiper/App.vue +28 -29
- package/Swiper/Item.vue +19 -0
- package/SwiperTest/App.vue +9 -9
- package/TestNativeSharedView/AckEventDefine.ts +82 -0
- package/TestNativeSharedView/App.vue +4 -6
- package/TestNativeSharedView/JsvDemoTester.js +131 -0
- package/TextureAnimation/App3.vue +100 -0
- package/TextureAnimation/utils/FrameCanvasStore.ts +68 -0
- package/TextureAnimation/utils/RotateFrame.vue +146 -0
- package/TextureAnimation/utils/circleHaloMask.png +0 -0
- package/TextureSize/App.vue +5 -6
- package/TombSweepingDayTest/Raining/RainScene.vue +4 -4
- package/ViewOpacity/App.vue +6 -7
- package/package.json +1 -1
|
@@ -18,7 +18,7 @@ import { JsvScreenFlex } from "jsview";
|
|
|
18
18
|
justifyContent: 'flex-start',
|
|
19
19
|
alignItems: 'flex-start',
|
|
20
20
|
}"
|
|
21
|
-
background="https://qcast
|
|
21
|
+
background="https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/FullScreenFlex/TestFrame2/BackgroundLongmao.jpg"
|
|
22
22
|
>
|
|
23
23
|
<div
|
|
24
24
|
id="DivAnchor1"
|
package/GiftRain/App.vue
CHANGED
|
@@ -73,18 +73,18 @@ const MySound = new Sound()
|
|
|
73
73
|
const DemoResourceBase = getDataUrl()
|
|
74
74
|
//预加载信息
|
|
75
75
|
const resourceMap = {
|
|
76
|
-
kimi_normal: '
|
|
77
|
-
kimi_smile: '
|
|
78
|
-
kimi_boom: '
|
|
79
|
-
red_packet: '
|
|
80
|
-
bigRed_packet: '
|
|
81
|
-
boom_image: '
|
|
82
|
-
bg: '
|
|
83
|
-
_ScoreBg: "
|
|
84
|
-
add1: '
|
|
85
|
-
add5: "
|
|
86
|
-
min1: "
|
|
87
|
-
_AudioBgUrl: "https://qcast
|
|
76
|
+
kimi_normal: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/kimi_normal.png',
|
|
77
|
+
kimi_smile: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/kimi_smile.png',
|
|
78
|
+
kimi_boom: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/kimi_boom.png',
|
|
79
|
+
red_packet: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/red.png',
|
|
80
|
+
bigRed_packet: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/bigred.png',
|
|
81
|
+
boom_image: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/boom.png',
|
|
82
|
+
bg: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/bg.jpg',
|
|
83
|
+
_ScoreBg: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/score_bg.png",
|
|
84
|
+
add1: 'https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/add1.png',
|
|
85
|
+
add5: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/add5.png",
|
|
86
|
+
min1: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/min1.png",
|
|
87
|
+
_AudioBgUrl: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/GiftRain/App/MiniGameBackgroundMusic-redpack.mp3"
|
|
88
88
|
}
|
|
89
89
|
if (DemoResourceBase) {
|
|
90
90
|
console.log('存在');
|
|
@@ -268,7 +268,4 @@ onBeforeUnmount(() => {
|
|
|
268
268
|
transform: translate3d(0, 0, 0);
|
|
269
269
|
}
|
|
270
270
|
}
|
|
271
|
-
|
|
272
|
-
;
|
|
273
|
-
;
|
|
274
271
|
</style>
|
package/HashParams/App.vue
CHANGED
package/JsvPreDownloader/App.vue
CHANGED
|
@@ -7,7 +7,7 @@ const router = useRouter();
|
|
|
7
7
|
|
|
8
8
|
const downloader = new JsvPreDownloader();
|
|
9
9
|
const single =
|
|
10
|
-
"https://
|
|
10
|
+
"https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/JsvPreDownloader/App/dd4b1c7471613493.jpg";
|
|
11
11
|
|
|
12
12
|
const list = [
|
|
13
13
|
{
|
|
@@ -15,16 +15,16 @@ const list = [
|
|
|
15
15
|
isImage: true,
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
|
-
url: "https://
|
|
18
|
+
url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/JsvPreDownloader/App/8a2b507dd6effe91.jpg",
|
|
19
19
|
isImage: true,
|
|
20
20
|
},
|
|
21
21
|
downloader.buildDownloadItem(
|
|
22
|
-
"https://
|
|
22
|
+
"https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/JsvPreDownloader/App/d6f86f1b1d5f112d.jpg",
|
|
23
23
|
"",
|
|
24
24
|
true
|
|
25
25
|
),
|
|
26
26
|
{
|
|
27
|
-
url: "https://
|
|
27
|
+
url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/JsvPreDownloader/App/e1e898525109d0ea.jpg",
|
|
28
28
|
isImage: false,
|
|
29
29
|
},
|
|
30
30
|
{
|
|
@@ -144,7 +144,6 @@ const onKeyDown = (ev) => {
|
|
|
144
144
|
font-size: 30;
|
|
145
145
|
white-space: pre-wrap;
|
|
146
146
|
text-overflow: clip;
|
|
147
|
-
overflow: hidden;
|
|
148
147
|
}
|
|
149
148
|
.block {
|
|
150
149
|
width: 170;
|
|
@@ -154,6 +153,5 @@ const onKeyDown = (ev) => {
|
|
|
154
153
|
font-size: 24;
|
|
155
154
|
white-space: pre-wrap;
|
|
156
155
|
text-overflow: clip;
|
|
157
|
-
overflow: hidden;
|
|
158
156
|
}
|
|
159
157
|
</style>
|
package/Marquee/App.vue
CHANGED
|
@@ -24,7 +24,7 @@ const style = {
|
|
|
24
24
|
const style2 = Object.assign({ textAlign: "center" }, style);
|
|
25
25
|
const style3 = Object.assign({ textAlign: "end" }, style);
|
|
26
26
|
const longText =
|
|
27
|
-
"
|
|
27
|
+
"1.石室诗士施氏,嗜狮,誓食十狮。2.施氏时时适市视狮。3.十时,适十狮适市。4.是时,适施氏适市。5.施氏视是十狮,恃矢势,使是十狮逝世。6.氏拾是十狮尸,适石室。7.石室湿,氏使侍拭石室。8.石室拭,施氏始试食是十狮尸。9.食时,始识是十狮尸,实十石狮尸。10.试释是事。";
|
|
28
28
|
const shortText = "测试文字";
|
|
29
29
|
const littleLongText = "君不见,黄河之水天上来,奔流到海不复回。";
|
|
30
30
|
const rtlText = 'ABC انجليزي "abc" سعر الملابس 180 ';
|
|
@@ -784,7 +784,7 @@ onMounted(() => {
|
|
|
784
784
|
top: 210,
|
|
785
785
|
width: width,
|
|
786
786
|
height: height,
|
|
787
|
-
backgroundColor: '#FFFFFF'
|
|
787
|
+
backgroundColor: '#FFFFFF',
|
|
788
788
|
}"
|
|
789
789
|
>
|
|
790
790
|
<jsv-marquee
|
|
@@ -16,7 +16,7 @@ class AudioFrame extends Vue {
|
|
|
16
16
|
|
|
17
17
|
this.mediaStatus = inject('mediaStatus');
|
|
18
18
|
|
|
19
|
-
this.audioUrl = "
|
|
19
|
+
this.audioUrl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MediaDemo/components/frames/AudioFrame/demo_test.mp3";
|
|
20
20
|
// is.audioUrl = "http://192.168.1.99/videos/empty.mp3";
|
|
21
21
|
}
|
|
22
22
|
}
|
|
@@ -14,7 +14,7 @@ class VideoFrame extends Vue {
|
|
|
14
14
|
|
|
15
15
|
this.videoCtrl = inject('videoCtrl');
|
|
16
16
|
|
|
17
|
-
this.videoUrl = "
|
|
17
|
+
this.videoUrl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MediaDemo/components/frames/VideoFrame/neza.mp4";
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
@@ -15,7 +15,7 @@ import borderMid from "../PerformanceTest/assets/line_mid.png";
|
|
|
15
15
|
import borderRight from "../PerformanceTest/assets/line_right.png";
|
|
16
16
|
import { ref, computed } from "vue";
|
|
17
17
|
|
|
18
|
-
const picUrl = "
|
|
18
|
+
const picUrl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/MassiveItems/ContentItem/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg";
|
|
19
19
|
|
|
20
20
|
const props = defineProps({
|
|
21
21
|
data: Object,
|
|
@@ -339,7 +339,6 @@ const soldTotalText = computed(() => {
|
|
|
339
339
|
font-size: 21;
|
|
340
340
|
color: #73665c;
|
|
341
341
|
line-height: 29;
|
|
342
|
-
overflow: hidden;
|
|
343
342
|
white-space: nowrap;
|
|
344
343
|
text-overflow: ellipsis;
|
|
345
344
|
text-align: center;
|
|
@@ -10,7 +10,7 @@ for (let i = 0; i < 40; i++) {
|
|
|
10
10
|
savePrize: `${i}`,
|
|
11
11
|
soldTotal: `${Math.floor(Math.random() * 50000)}`,
|
|
12
12
|
pictUrl:
|
|
13
|
-
"
|
|
13
|
+
"https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/MassiveItems/data/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
|
|
14
14
|
});
|
|
15
15
|
}
|
|
16
16
|
|
|
@@ -12,7 +12,7 @@ const props = defineProps({
|
|
|
12
12
|
name: String,
|
|
13
13
|
onEdgeDown: Function,
|
|
14
14
|
onItemFocus: Function,
|
|
15
|
-
})
|
|
15
|
+
});
|
|
16
16
|
|
|
17
17
|
let activeId = shallowRef(0);
|
|
18
18
|
let focused = shallowRef(false);
|
|
@@ -25,7 +25,7 @@ const tab1Class = computed(() => {
|
|
|
25
25
|
} else {
|
|
26
26
|
return "text-normal item-normal";
|
|
27
27
|
}
|
|
28
|
-
})
|
|
28
|
+
});
|
|
29
29
|
const tab2Class = computed(() => {
|
|
30
30
|
if (activeId.value == 1) {
|
|
31
31
|
return focused.value
|
|
@@ -34,7 +34,7 @@ const tab2Class = computed(() => {
|
|
|
34
34
|
} else {
|
|
35
35
|
return "text-normal item-normal";
|
|
36
36
|
}
|
|
37
|
-
})
|
|
37
|
+
});
|
|
38
38
|
const tab3Class = computed(() => {
|
|
39
39
|
if (activeId.value == 2) {
|
|
40
40
|
return focused.value
|
|
@@ -43,8 +43,7 @@ const tab3Class = computed(() => {
|
|
|
43
43
|
} else {
|
|
44
44
|
return "text-normal item-normal";
|
|
45
45
|
}
|
|
46
|
-
})
|
|
47
|
-
|
|
46
|
+
});
|
|
48
47
|
|
|
49
48
|
const onKeyDown = (ev) => {
|
|
50
49
|
switch (ev.keyCode) {
|
|
@@ -54,35 +53,37 @@ const onKeyDown = (ev) => {
|
|
|
54
53
|
activeId.value = 2;
|
|
55
54
|
}
|
|
56
55
|
props.onItemFocus(activeId.value);
|
|
57
|
-
|
|
56
|
+
return true;
|
|
58
57
|
case 39:
|
|
59
58
|
activeId.value++;
|
|
60
59
|
if (activeId.value > 2) {
|
|
61
60
|
activeId.value = 0;
|
|
62
61
|
}
|
|
63
62
|
props.onItemFocus(activeId.value);
|
|
64
|
-
|
|
63
|
+
return true;
|
|
65
64
|
case 40:
|
|
66
65
|
props.onEdgeDown();
|
|
67
|
-
|
|
66
|
+
return true;
|
|
68
67
|
}
|
|
69
|
-
}
|
|
68
|
+
};
|
|
70
69
|
const onFocus = () => {
|
|
71
70
|
focused.value = true;
|
|
72
|
-
}
|
|
71
|
+
};
|
|
73
72
|
const onBlur = () => {
|
|
74
73
|
focused.value = false;
|
|
75
|
-
}
|
|
74
|
+
};
|
|
76
75
|
const actionDefines = {
|
|
77
76
|
onBlur,
|
|
78
77
|
onFocus,
|
|
79
|
-
onKeyDown
|
|
80
|
-
}
|
|
81
|
-
|
|
78
|
+
onKeyDown,
|
|
79
|
+
};
|
|
82
80
|
</script>
|
|
83
81
|
|
|
84
82
|
<template>
|
|
85
|
-
<jsv-focus-block
|
|
83
|
+
<jsv-focus-block
|
|
84
|
+
:name="props.name"
|
|
85
|
+
:onAction="actionDefines"
|
|
86
|
+
></jsv-focus-block>
|
|
86
87
|
<div :class="tab1Class">Tab1</div>
|
|
87
88
|
<div :class="tab2Class" :style="{ left: 220 }">Tab2</div>
|
|
88
89
|
<div :class="tab3Class" :style="{ left: 440 }">Tab3</div>
|
|
@@ -115,6 +116,6 @@ const actionDefines = {
|
|
|
115
116
|
.item-normal {
|
|
116
117
|
width: 200;
|
|
117
118
|
height: 50;
|
|
118
|
-
background-color: #
|
|
119
|
+
background-color: #87cecb;
|
|
119
120
|
}
|
|
120
|
-
</style>
|
|
121
|
+
</style>
|
|
@@ -10,7 +10,7 @@ for (let i = 0; i < 40; i++) {
|
|
|
10
10
|
savePrize: `${i}`,
|
|
11
11
|
soldTotal: `${Math.floor(Math.random() * 50000)}`,
|
|
12
12
|
pictUrl:
|
|
13
|
-
"
|
|
13
|
+
"https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/PerformanceTest/data/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
|
|
14
14
|
});
|
|
15
15
|
}
|
|
16
16
|
|
|
@@ -24,7 +24,7 @@ for (let i = 0; i < 50; i++) {
|
|
|
24
24
|
savePrize: `${i}`,
|
|
25
25
|
soldTotal: `${Math.floor(Math.random() * 50000)}`,
|
|
26
26
|
pictUrl:
|
|
27
|
-
"
|
|
27
|
+
"https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/PerformanceTest/data/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
|
|
28
28
|
});
|
|
29
29
|
}
|
|
30
30
|
|
|
@@ -38,7 +38,7 @@ for (let i = 0; i < 30; i++) {
|
|
|
38
38
|
savePrize: `${i}`,
|
|
39
39
|
soldTotal: `${Math.floor(Math.random() * 50000)}`,
|
|
40
40
|
pictUrl:
|
|
41
|
-
"
|
|
41
|
+
"https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MetroWidgetDemos/PerformanceTest/data/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
|
|
42
42
|
});
|
|
43
43
|
}
|
|
44
44
|
|