@shijiu/jsview-vue 0.9.500 → 0.9.602

package/samples/AnimPicture/App.vue

@@ -2,127 +2,110 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-13 14:44:03
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-18 14:13:06
+ * @LastEditTime: 2022-07-08 10:09:50
  * @Description: file content
 -->
-<script>
+<script setup>
 import { ref } from "vue";
-import JsvApic, { LoopType } from "jsview/utils/JsViewVueWidget/JsvApic";
+import { useRouter, useRoute } from "vue-router";
+import { LoopType, JsvApic } from "jsview";
 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,
+const router = useRouter();
+const route = useRoute();
+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;
   },
-  setup() {
-    let catRunPlay = ref(false);
-    let girlRunPlay = ref(false);
-    let quanPlay = ref(false);
-    let ballPlay = ref(false);
+};
+const ballCallback = {
+  onStart: () => {
+    ballPlay.value = true;
+  },
+  onEnd: () => {
+    ballPlay.value = false;
+  },
+};
+let catRunRef = ref(null);
+let girlRunRef = ref(null);
+let quanRef = ref(null);
+let ballRef = ref(null);
 
-    const catRunCallback = {
-      onStart: () => {
-        catRunPlay.value = true;
-      },
-      onEnd: () => {
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+
+  if (ev.keyCode === 37) {
+    if (catRunRef.value) {
+      if (catRunPlay.value) {
+        catRunRef.value.stop();
         catRunPlay.value = false;
-      },
-    };
-    const girlRunCallback = {
-      onStart: () => {
-        girlRunPlay.value = true;
-      },
-      onEnd: () => {
+      } else {
+        catRunRef.value.play();
+        catRunPlay.value = true;
+      }
+    }
+  } else if (ev.keyCode === 13) {
+    if (girlRunRef.value) {
+      if (girlRunPlay.value) {
+        girlRunRef.value.stop();
         girlRunPlay.value = false;
-      },
-    };
-    const quanCallback = {
-      onStart: () => {
-        quanPlay.value = true;
-      },
-      onEnd: () => {
+      } else {
+        girlRunRef.value.play();
+        girlRunPlay.value = true;
+      }
+    }
+  } else if (ev.keyCode === 39) {
+    if (quanRef.value) {
+      if (quanPlay.value) {
+        quanRef.value.stop();
         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;
+      } else {
+        quanRef.value.play();
+        quanPlay.value = 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;
-          }
-        }
+    }
+  } else if (ev.keyCode === 38) {
+    if (ballRef.value) {
+      if (ballPlay.value) {
+        ballRef.value.stop();
+        ballPlay.value = false;
+      } else {
+        ballRef.value.play();
+        ballPlay.value = true;
       }
-      return true;
-    },
-  },
+    }
+  }
+  return true;
 };
 </script>
 

package/samples/Basic/App.vue

@@ -45,93 +45,90 @@
  *    注意点2：transition目前只支持left/top/width/height属性的跟踪，其他属性目前不支持
 -->
 
-<script>
-import { Options, Vue } from "vue-class-component";
-import Panel1 from './components/panel/Panel1';
-import Panel2 from './components/panel/Panel2';
+<script setup>
+import { jJsvRuntimeBridge } from "jsview";
+import { reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import Panel1 from "./components/panel/Panel1";
+import Panel2 from "./components/panel/Panel2";
 
-@Options({
-  components: {
-    Panel1,
-    Panel2,
-  }
-})
-
-class App extends Vue {
-  constructor(props) {
-    super(props);
-  }
-
-  // Override
-  mounted() {
-    window.jJsvRuntimeBridge?.notifyPageLoaded();
-  }
+const router = useRouter();
+const itemSides = {
+  top: 0,
+  left: 0,
+  width: 240,
+  height: 160,
+};
 
-  onKeyDown(ev) {
-    // 8:Backspace, 27:Escape, 10000:盒子返回键
-    if(ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      console.log("Basic has this.$router: ", !!this.$router)
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      return true;
-    } else if(ev.keyCode == 37) { // left
-      const panelInfo = this.panelInfo;
-      panelInfo.index = (--panelInfo.index > 1 ? panelInfo.index : 1);
-      panelInfo.desc = (panelInfo.index + '/' + panelInfo.total);
-      return true;
-    } else if(ev.keyCode == 39) { // right
-      const panelInfo = this.panelInfo;
-      panelInfo.index = (++panelInfo.index < panelInfo.total ? panelInfo.index : panelInfo.total);
-      panelInfo.desc = (panelInfo.index + '/' + panelInfo.total);
-      return true;
-    }
-
-    return false;
+const panelInfo = reactive({
+  index: 1,
+  total: 2,
+  desc: "1/2",
+});
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  } else if (ev.keyCode == 37) {
+    // left
+    panelInfo.index = --panelInfo.index > 1 ? panelInfo.index : 1;
+    panelInfo.desc = panelInfo.index + "/" + panelInfo.total;
+    return true;
+  } else if (ev.keyCode == 39) {
+    // right
+    panelInfo.index =
+      ++panelInfo.index < panelInfo.total ? panelInfo.index : panelInfo.total;
+    panelInfo.desc = panelInfo.index + "/" + panelInfo.total;
+    return true;
   }
 
-  itemSides = {
-    top: 0,
-    left: 0,
-    width: 240,
-    height: 160,
-  };
-
-  panelInfo = {
-    index: 1,
-    total: 2,
-    desc: "1/2",
-  };
-}
-
-export default App;
+  return false;
+};
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
 </script>
 
 <template>
-<div>
-  <!-- 有router时，将按键交给router去处理，此处没有其他用处 -->
-  <jsv-focus-block autoFocus :onKeyDown="onKeyDown"/>
+  <div>
+    <!-- 有router时，将按键交给router去处理，此处没有其他用处 -->
+    <jsv-focus-block autoFocus :onKeyDown="onKeyDown" />
 
-  <div class="root">
-      <Panel1 v-if="panelInfo.index == 1" :style="{top:10, left:20}" panelClass="panel-size" :itemSides=itemSides />
-      <Panel2 v-else-if="panelInfo.index == 2" :style="{top:10, left:20}" panelClass="panel-size" :itemSides=itemSides />
-      <div :style="{top: 650, left:20, width:500, color:'#0000FF'}">
+    <div class="root">
+      <Panel1
+        v-if="panelInfo.index == 1"
+        :style="{ top: 10, left: 20 }"
+        panelClass="panel-size"
+        :itemSides="itemSides"
+      />
+      <Panel2
+        v-else-if="panelInfo.index == 2"
+        :style="{ top: 10, left: 20 }"
+        panelClass="panel-size"
+        :itemSides="itemSides"
+      />
+      <div :style="{ top: 650, left: 20, width: 500, color: '#0000FF' }">
         {{ panelInfo.desc }}
       </div>
-      <div :style="{top: 650, left:50, width:500, color:'#0000FF'}">
+      <div :style="{ top: 650, left: 50, width: 500, color: '#0000FF' }">
         按左/右键切换Panel，按Back键返回
       </div>
+    </div>
   </div>
-</div>
 </template>
 
 <style>
 .root {
-  top: 10; left: 10;
-  width: 1250; height: 670;
-  background-color: rgba(200, 200, 200, 1)
+  top: 10;
+  left: 10;
+  width: 1250;
+  height: 670;
+  background-color: rgba(200, 200, 200, 1);
 }
 
 .panel-size {
-  width: 1210; height: 630;
+  width: 1210;
+  height: 630;
 }
-
 </style>

package/samples/Basic/components/ContentBlock.vue

@@ -1,43 +1,38 @@
+<script setup>
+const props = defineProps({
+  title: String,
+  index: Number,
+  itemSides: Object,
+});
+const titleStyle = {
+  lineHeight: 18,
+  width: props.itemSides.width,
+  height: 18,
+  backgroundColor: "rgba(0,0,255,0.7)",
+};
+const blockOpacity = props.index % 2 === 0 ? 0.2 : 0.5;
+</script>
+
 <template>
-<div>
-  <div class="container-font" :style=titleStyle>
-    {{title}}
-  </div>
-  <div key="blockColor" :style="{ top: titleStyle.lineHeight, width: itemSides.width, height: itemSides.height - 18, backgroundColor: 'rgba(0,0,255,'+blockOpacity+')' }">
+  <div>
+    <div class="container-font" :style="titleStyle">
+      {{ title }}
+    </div>
+    <div
+      key="blockColor"
+      :style="{
+        top: titleStyle.lineHeight,
+        width: itemSides.width,
+        height: itemSides.height - 18,
+        backgroundColor: 'rgba(0,0,255,' + blockOpacity + ')',
+      }"
+    ></div>
+    <div key="container" :style="{ top: titleStyle.lineHeight }">
+      <slot></slot>
+    </div>
   </div>
-  <div key="container" :style="{ top: titleStyle.lineHeight }">
-    <slot/>
-  </div>
-</div>
 </template>
 
-<script>
-
-export default {
-  props: {
-    title: String,
-    index: Number,
-    itemSides: Object,
-  },
-  computed: {
-      blockOpacity() {
-        return (((this.index) % 2 === 0) ? 0.2 : 0.5);
-      }
-  },
-  data() {
-    return {
-      titleStyle: { 
-        lineHeight: 18,
-        width: this.itemSides.width, height: 18,
-        backgroundColor: 'rgba(0,0,255,0.7)',
-      }
-    }
-  }
-
-}
-
-</script>
-
 <style>
 @import "./FontStyle.css";
 </style>

package/samples/Basic/components/anim/AnimGroup.vue

@@ -1,80 +1,66 @@
-<template>
-    <div id='item-root'>
-        <ContentBlock
-            :class=contentClass
-            :style="{ top: itemSides.height * 0 }"
-            :=contentBlockProps
-            :index=1
-            title="Keyframe基础动画集合">
-            <AnimKeyframeBasic/>
-        </ContentBlock>
-        <ContentBlock
-            :class=contentClass
-            :style="{ top: itemSides.height * 1 }"
-            :=contentBlockProps
-            :index=2
-            title="Keyframe组合示例">
-            <AnimKeyframeComposite/>
-        </ContentBlock>
-        <ContentBlock
-            :class=contentClass
-            :style="{ top: itemSides.height * 2}"
-            :="{...contentBlockProps, itemSides: {...itemSides, height:290}}"
-            :index=3
-            title="Transition动画示例">
-            <AnimTransition :timeCount=state.timeCount />
-        </ContentBlock>
-    </div>
+<script setup>
+import { reactive, onMounted, onBeforeUnmount } from "vue";
+import ContentBlock from "../ContentBlock";
+import AnimKeyframeBasic from "./AnimKeyframeBasic";
+import AnimKeyframeComposite from "./AnimKeyframeComposite";
+import AnimTransition from "./AnimTransition";
+
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object,
+});
 
-</template>
+const contentBlockProps = {
+  colIndex: 0,
+  itemSides: props.itemSides,
+};
+let timerId = -1;
+const state = reactive({
+  timeCount: 20,
+});
 
-<script>
-/* eslint-disable no-unused-vars */
-import { reactive } from "vue";
-import ContentBlock from '../ContentBlock';
-import AnimKeyframeBasic from './AnimKeyframeBasic';
-import AnimKeyframeComposite from './AnimKeyframeComposite';
-import AnimTransition from './AnimTransition';
+onMounted(() => {
+  timerId = setInterval(() => {
+    state.timeCount = state.timeCount + 5;
+  }, 2000);
+});
 
-export default {
-  props: {
-    contentClass: String,
-    itemSides: Object 
-  },
-  components: {
-    ContentBlock,
-    AnimKeyframeBasic,
-    AnimKeyframeComposite,
-    AnimTransition,
-  },
-  computed: {
-    contentBlockProps() {
-      return {
-        colIndex: 0,
-        itemSides: this.itemSides
-      }
-    }
-  },
-  data() {
-    return {
-      timerId: -1,
-      state: reactive({
-        timeCount: 20
-      })
-    }
-  },
-  mounted() {
-    this.timerId = setInterval(() => {
-      // console.log('change timeCount: ' + timeCount);
-      this.state.timeCount = (this.state.timeCount + 5);
-    }, 2000);
-  },
-  beforeUnmount() {
-    if (this.timerId >= 0) {
-      window.clearInterval(this.timerId);
-    }
-    this.timerId = -1;
+onBeforeUnmount(() => {
+  if (timerId >= 0) {
+    clearInterval(timerId);
   }
-}
+  timerId = -1;
+});
+</script>
 
-</script>
+<template>
+  <div id="item-root">
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 0 }"
+      :="contentBlockProps"
+      :index="1"
+      title="Keyframe基础动画集合"
+    >
+      <AnimKeyframeBasic />
+    </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 1 }"
+      :="contentBlockProps"
+      :index="2"
+      title="Keyframe组合示例"
+    >
+      <AnimKeyframeComposite />
+    </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 2 }"
+      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 290 } }"
+      :index="3"
+      title="Transition动画示例"
+    >
+      <AnimTransition :timeCount="state.timeCount" />
+    </ContentBlock>
+  </div>
+</template>