@shijiu/jsview-vue-samples 2.1.200 → 2.1.340-test.0

package/SwiperTest/App.vue

@@ -0,0 +1,105 @@
+<template>
+  <jsv-focus-block autoFocus>
+    <div class="bgStyle">
+    <JsvSwiper3D
+      name="JsvSwiper3D"
+      :layoutInfo="layoutInfo"
+      :duration="0.5"
+      :sideScale="0.1"
+      :ItemArray="items"
+      :initItemStyle="initItemStyle"
+      :dispNumber="7"
+      :initIndex="2"
+      :onClick="onClick"
+      :onChange="onChange"
+    >
+      <template #itemView="{ item, dataIndex }">
+        <div
+          :style="{
+            width: item.width,
+            height: item.height,
+            backgroundImage: item.backgroundImage,
+            fontSize: 40,
+          }"
+        ></div>
+      </template>
+    </JsvSwiper3D>
+  </div>
+  <div :style="{width:550,height:60,fontSize:24,color:'#FFFFFF',lineHeight:30,left:30,top:50}">
+  {{ '操作提示：左右键选择，【OK】键触发点击事件。初始聚焦：第 2 项' }}
+  </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { JsvSwiper3D, useFocusHub } from "jsview";
+import { onMounted, reactive } from "vue";
+const focusHub = useFocusHub();
+const layoutInfo = {
+  width: 1200,
+  height: 500,
+  left: 30,
+  top: 200,
+};
+const items = reactive([
+  {
+    image:
+      "https://pic.meetao.com/images/admin/2531edf0b7e34c299892ceace72b2c81.jpg",
+  },
+  {
+    image:
+      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWLWXvKAdqZ5AAB5Ot8fJhc62.webp",
+  },
+  {
+    image:
+      "https://pic.meetao.com/images/admin/bc28dfc4a9ae470e86eed8f743a3d97a.png",
+  },
+  {
+    image:
+      "https://pic.meetao.com/images/admin/1070701b82e8416d940c558f5fb61ad2.jpg",
+  },
+  {
+    image:
+      "https://pic.meetao.com/images/admin/5a454819dabd469991c62c72e348c49b.jpg",
+  },
+  {
+    image:
+      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpwcGAM-w1AACsNFeB3SQ56.webp",
+  },
+  {
+    image:
+      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpw9GAbOL_AABn2OGO6UY97.webp",
+  },
+  {
+    image:
+      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWLWWFGAfDz4AAB_dMtnwC831.webp",
+  },
+  {
+    image:
+      "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/TabUi/rBAQvWNpxACASppDAACKmP9qkQ020.webp",
+  },
+]);
+
+const onClick = (index) => {
+  console.log(index);
+};
+const initItemStyle = {
+  width: 300,
+  height: 400,
+};
+
+const onChange = (preIndex, currentIndex) => {
+  console.log('preIndex:',preIndex, 'currentIndex',currentIndex);
+};
+onMounted(() => {
+  focusHub.setFocus("JsvSwiper3D");
+});
+</script>
+
+<style scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #007788;
+}
+</style>

package/ViewOpacity/App.vue

@@ -0,0 +1,98 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-10-24 13:19:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-02-13 11:20:12
+ * @Description: file content
+-->
+<script setup>
+import { shallowRef, onMounted, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const test1 =
+  "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_1.jpeg)";
+const test2 =
+  "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_2.jpeg)";
+
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    if (window.JsView) {
+      window.JsView.setGlobalConfig({
+        texCache: -1,
+      });
+    }
+
+    router.go(-1); // 有router时，回退
+    return true;
+  }
+  return false;
+};
+
+const style1 = {
+  left: 0,
+  top: 0,
+  width: 300,
+  height: 300,
+  borderRadius: 15,
+};
+
+let altOpacity = shallowRef(0.1);
+let timerHandle = -1;
+
+onMounted(() => {
+  timerHandle = setInterval(() => {
+    altOpacity.value += 0.3;
+    if (altOpacity.value > 1.0) {
+      altOpacity.value = 0.1;
+    }
+    console.log("Opacity set to" + altOpacity.value);
+  }, 1200);
+});
+
+onUnmounted(() => {
+  if (timerHandle != -1) {
+    clearInterval(timerHandle);
+    timerHandle = -1;
+  }
+});
+</script>
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
+    <div class="allBgc">
+      <div class="block">
+        <div :style="{ left: 120, top: 0 }">
+          <img
+            :style="{
+              ...style1,
+              opacity: altOpacity,
+            }"
+            :src="test1"
+          />
+        </div>
+
+        <div :style="{ left: 500, top: 0 }">
+          <img
+            :style="{
+              ...style1,
+              opacity: altOpacity,
+            }"
+            :src="test2"
+          />
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+<style scoped>
+.allBgc {
+  width: 1920;
+  height: 1080;
+  background-color: #334c4c;
+}
+.block {
+  left: 20;
+  top: 50;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.1.200",
+  "version": "2.1.340-test.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",