@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/AnimPicture/App.vue

@@ -1,224 +1,224 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-13 14:44:03
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-18 14:13:06
- * @Description: file content
--->
-<script>
-import { ref } from "vue";
-import JsvApic, { LoopType } from "jsview/utils/JsViewVueWidget/JsvApic";
-import catRun from "./assets/animated_webp.webp";
-import girlRun from "./assets/girl_run.gif";
-import quan from "./assets/quan.webp";
-import ball from "./assets/ball_3.webp";
-
-export default {
-  components: {
-    JsvApic,
-  },
-  setup() {
-    let catRunPlay = ref(false);
-    let girlRunPlay = ref(false);
-    let quanPlay = ref(false);
-    let ballPlay = ref(false);
-
-    const catRunCallback = {
-      onStart: () => {
-        catRunPlay.value = true;
-      },
-      onEnd: () => {
-        catRunPlay.value = false;
-      },
-    };
-    const girlRunCallback = {
-      onStart: () => {
-        girlRunPlay.value = true;
-      },
-      onEnd: () => {
-        girlRunPlay.value = false;
-      },
-    };
-    const quanCallback = {
-      onStart: () => {
-        quanPlay.value = true;
-      },
-      onEnd: () => {
-        quanPlay.value = false;
-      },
-    };
-    const ballCallback = {
-      onStart: () => {
-        ballPlay.value = true;
-      },
-      onEnd: () => {
-        ballPlay.value = false;
-      },
-    };
-
-    return {
-      catRun,
-      girlRun,
-      quan,
-      ball,
-      catRunPlay,
-      girlRunPlay,
-      quanPlay,
-      ballPlay,
-      catRunCallback,
-      girlRunCallback,
-      quanCallback,
-      ballCallback,
-      LoopType,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
-      }
-
-      if (ev.keyCode === 37) {
-        if (this.$refs.catRunRef) {
-          if (this.catRunPlay) {
-            this.$refs.catRunRef.stop();
-            this.catRunPlay = false;
-          } else {
-            this.$refs.catRunRef.play();
-            this.catRunPlay = true;
-          }
-        }
-      } else if (ev.keyCode === 13) {
-        if (this.$refs.girlRunRef) {
-          if (this.girlRunPlay) {
-            this.$refs.girlRunRef.stop();
-            this.girlRunPlay = false;
-          } else {
-            this.$refs.girlRunRef.play();
-            this.girlRunPlay = true;
-          }
-        }
-      } else if (ev.keyCode === 39) {
-        if (this.$refs.quanRef) {
-          if (this.quanPlay) {
-            this.$refs.quanRef.stop();
-            this.quanPlay = false;
-          } else {
-            this.$refs.quanRef.play();
-            this.quanPlay = true;
-          }
-        }
-      } else if (ev.keyCode === 38) {
-        if (this.$refs.ballRef) {
-          if (this.ballPlay) {
-            this.$refs.ballRef.stop();
-            this.ballPlay = false;
-          } else {
-            this.$refs.ballRef.play();
-            this.ballPlay = true;
-          }
-        }
-      }
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block ref="rootNode" autoFocus :onKeyDown="onKeyDown">
-    <div :style="{ width: 1920, height: 1080, backgroundColor: '#334C4C' }">
-      <div :style="{ left: 20, top: 20 }">
-        <jsv-apic
-          ref="catRunRef"
-          :src="`url(${catRun})`"
-          :style="{ width: 250, height: 250 }"
-          :autoPlay="true"
-          :loopType="LoopType.LOOP_DEFAULT"
-          :onStart="catRunCallback.onStart"
-          :onEnd="catRunCallback.onEnd"
-        />
-        <div className="text" :style="{ top: 270, width: 250 }">
-          {{ `WEBP(${catRunPlay ? "运行" : "停止"})\n左键控制` }}
-        </div>
-      </div>
-
-      <div :style="{ left: 280, top: 20 }">
-        <JsvApic
-          ref="girlRunRef"
-          :src="`url(${girlRun})`"
-          :style="{ width: 250, height: 214 }"
-          :autoPlay="true"
-          :loopType="LoopType.LOOP_DEFAULT"
-          :onStart="girlRunCallback.onStart"
-          :onEnd="girlRunCallback.onEnd"
-        />
-        <div className="text" :style="{ top: 219, width: 250 }">
-          {{ `GIF(${girlRunPlay ? "运行" : "停止"})\nOK键控制` }}
-        </div>
-      </div>
-
-      <div :style="{ left: 540, top: 20 }">
-        <JsvApic
-          ref="quanRef"
-          :src="`url(${quan})`"
-          :style="{ width: 250, height: 296 }"
-          :autoPlay="true"
-          :loopType="LoopType.LOOP_DEFAULT"
-          :onStart="quanCallback.onStart"
-          :onEnd="quanCallback.onEnd"
-        />
-        <div className="text" :style="{ top: 301, width: 250 }">
-          {{ `单次播放WEBP(${quanPlay ? "运行" : "停止"})\n右键控制` }}
-        </div>
-      </div>
-
-      <div :style="{ left: 800, top: 20 }">
-        <JsvApic
-          ref="ballRef"
-          :src="`url(${ball})`"
-          :style="{ width: 300, height: 200 }"
-          :autoPlay="true"
-          :loopType="LoopType.LOOP_PART"
-          :loopInfo="[
-            [3, 2, 4],
-            [5, 7, 10],
-          ]"
-          :onStart="ballCallback.onStart"
-          :onEnd="ballCallback.onEnd"
-        />
-        <div class="text" :style="{ top: 205, width: 300, height: 200 }">
-          {{
-            `局部循环WEBP(${
-              ballPlay ? "运行" : "停止"
-            })\n先循环2次后循环4次\n上键控制`
-          }}
-        </div>
-      </div>
-
-      <div
-        :style="{
-          left: 50,
-          top: 590,
-          width: 1180,
-          textAlign: 'center',
-          color: '#000000',
-          fontSize: '30px',
-        }"
-      >
-        {{ `(按键可进行停止/重播操作)` }}
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.text {
-  font-size: 25px;
-  height: 68px;
-  line-height: 34px;
-  color: #000000;
-  text-align: center;
-}
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 14:44:03
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-18 14:13:06
+ * @Description: file content
+-->
+<script>
+import { ref } from "vue";
+import JsvApic, { LoopType } from "jsview/utils/JsViewVueWidget/JsvApic";
+import catRun from "./assets/animated_webp.webp";
+import girlRun from "./assets/girl_run.gif";
+import quan from "./assets/quan.webp";
+import ball from "./assets/ball_3.webp";
+
+export default {
+  components: {
+    JsvApic,
+  },
+  setup() {
+    let catRunPlay = ref(false);
+    let girlRunPlay = ref(false);
+    let quanPlay = ref(false);
+    let ballPlay = ref(false);
+
+    const catRunCallback = {
+      onStart: () => {
+        catRunPlay.value = true;
+      },
+      onEnd: () => {
+        catRunPlay.value = false;
+      },
+    };
+    const girlRunCallback = {
+      onStart: () => {
+        girlRunPlay.value = true;
+      },
+      onEnd: () => {
+        girlRunPlay.value = false;
+      },
+    };
+    const quanCallback = {
+      onStart: () => {
+        quanPlay.value = true;
+      },
+      onEnd: () => {
+        quanPlay.value = false;
+      },
+    };
+    const ballCallback = {
+      onStart: () => {
+        ballPlay.value = true;
+      },
+      onEnd: () => {
+        ballPlay.value = false;
+      },
+    };
+
+    return {
+      catRun,
+      girlRun,
+      quan,
+      ball,
+      catRunPlay,
+      girlRunPlay,
+      quanPlay,
+      ballPlay,
+      catRunCallback,
+      girlRunCallback,
+      quanCallback,
+      ballCallback,
+      LoopType,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+        return true;
+      }
+
+      if (ev.keyCode === 37) {
+        if (this.$refs.catRunRef) {
+          if (this.catRunPlay) {
+            this.$refs.catRunRef.stop();
+            this.catRunPlay = false;
+          } else {
+            this.$refs.catRunRef.play();
+            this.catRunPlay = true;
+          }
+        }
+      } else if (ev.keyCode === 13) {
+        if (this.$refs.girlRunRef) {
+          if (this.girlRunPlay) {
+            this.$refs.girlRunRef.stop();
+            this.girlRunPlay = false;
+          } else {
+            this.$refs.girlRunRef.play();
+            this.girlRunPlay = true;
+          }
+        }
+      } else if (ev.keyCode === 39) {
+        if (this.$refs.quanRef) {
+          if (this.quanPlay) {
+            this.$refs.quanRef.stop();
+            this.quanPlay = false;
+          } else {
+            this.$refs.quanRef.play();
+            this.quanPlay = true;
+          }
+        }
+      } else if (ev.keyCode === 38) {
+        if (this.$refs.ballRef) {
+          if (this.ballPlay) {
+            this.$refs.ballRef.stop();
+            this.ballPlay = false;
+          } else {
+            this.$refs.ballRef.play();
+            this.ballPlay = true;
+          }
+        }
+      }
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block ref="rootNode" autoFocus :onKeyDown="onKeyDown">
+    <div :style="{ width: 1920, height: 1080, backgroundColor: '#334C4C' }">
+      <div :style="{ left: 20, top: 20 }">
+        <jsv-apic
+          ref="catRunRef"
+          :src="`url(${catRun})`"
+          :style="{ width: 250, height: 250 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_DEFAULT"
+          :onStart="catRunCallback.onStart"
+          :onEnd="catRunCallback.onEnd"
+        />
+        <div className="text" :style="{ top: 270, width: 250 }">
+          {{ `WEBP(${catRunPlay ? "运行" : "停止"})\n左键控制` }}
+        </div>
+      </div>
+
+      <div :style="{ left: 280, top: 20 }">
+        <JsvApic
+          ref="girlRunRef"
+          :src="`url(${girlRun})`"
+          :style="{ width: 250, height: 214 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_DEFAULT"
+          :onStart="girlRunCallback.onStart"
+          :onEnd="girlRunCallback.onEnd"
+        />
+        <div className="text" :style="{ top: 219, width: 250 }">
+          {{ `GIF(${girlRunPlay ? "运行" : "停止"})\nOK键控制` }}
+        </div>
+      </div>
+
+      <div :style="{ left: 540, top: 20 }">
+        <JsvApic
+          ref="quanRef"
+          :src="`url(${quan})`"
+          :style="{ width: 250, height: 296 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_DEFAULT"
+          :onStart="quanCallback.onStart"
+          :onEnd="quanCallback.onEnd"
+        />
+        <div className="text" :style="{ top: 301, width: 250 }">
+          {{ `单次播放WEBP(${quanPlay ? "运行" : "停止"})\n右键控制` }}
+        </div>
+      </div>
+
+      <div :style="{ left: 800, top: 20 }">
+        <JsvApic
+          ref="ballRef"
+          :src="`url(${ball})`"
+          :style="{ width: 300, height: 200 }"
+          :autoPlay="true"
+          :loopType="LoopType.LOOP_PART"
+          :loopInfo="[
+            [3, 2, 4],
+            [5, 7, 10],
+          ]"
+          :onStart="ballCallback.onStart"
+          :onEnd="ballCallback.onEnd"
+        />
+        <div class="text" :style="{ top: 205, width: 300, height: 200 }">
+          {{
+            `局部循环WEBP(${
+              ballPlay ? "运行" : "停止"
+            })\n先循环2次后循环4次\n上键控制`
+          }}
+        </div>
+      </div>
+
+      <div
+        :style="{
+          left: 50,
+          top: 590,
+          width: 1180,
+          textAlign: 'center',
+          color: '#000000',
+          fontSize: '30px',
+        }"
+      >
+        {{ `(按键可进行停止/重播操作)` }}
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.text {
+  font-size: 25px;
+  height: 68px;
+  line-height: 34px;
+  color: #000000;
+  text-align: center;
+}
 </style>