@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/Preload/Item.vue

@@ -1,32 +1,24 @@
-<script>
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  data() {
-    return {
-      focus: false,
-    };
-  },
-  methods: {
-    onFocus() {
-      this.focus = true;
-    },
-    onBlur() {
-      this.focus = false;
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", () => {
-      console.log("cchtest item on click ", this.data);
-    });
-  },
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+const focus = ref(false);
+
+const onFocus = () => {
+  focus.value = true;
+};
+const onBlur = () => {
+  focus.value = false;
 };
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", () => {
+  console.log("cchtest item on click ", data);
+});
 </script>
 
 <template>
@@ -36,5 +28,5 @@ export default {
       height: 90,
       backgroundImage: focus ? data.focusUrl : data.url,
     }"
-  />
+  ></div>
 </template>

package/samples/QrcodeDemo/App.vue

@@ -1,33 +1,28 @@
-<script>
-import QRCode from "jsview/utils/JsViewVueWidget/JsvQrcode";
-export default {
-  components: { QRCode },
-  data() {
-    return {
-      value: "http://www.baidu.com/",
-      size: 400,
-      fgColor: "#0000FF",
-      bgColor: "#ffff00",
-      level: "H", // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
-      includeImage: true,
-      imageH: 64,
-      imageW: 64,
-      imageSrc:
-        "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg",
-      tipsInfo: `功能：二维码展示可配置项：1.前景色 
+<script setup>
+import { JsvQrcode } from "jsview";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const value = "http://www.baidu.com/";
+const size = 400;
+const fgColor = "#0000FF";
+const bgColor = "#ffff00";
+const level = "H"; // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
+const includeImage = true;
+const imageH = 64;
+const imageW = 64;
+const imageSrc =
+  "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg";
+const tipsInfo = `功能：二维码展示可配置项：1.前景色 
 2.背景色 
 3.指定小图标 
-4.容错级别：'L', 'M', 'Q', 'H'`,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
-  },
+4.容错级别：'L', 'M', 'Q', 'H'`;
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
 };
 </script>
 
@@ -55,7 +50,7 @@ export default {
         {{ tipsInfo }}
       </div>
       <div :style="{ left: 200, top: 100 }">
-        <QRCode
+        <jsv-qrcode
           :value="value"
           :size="size"
           :fgColor="fgColor"

package/samples/SoundPool/App.vue

@@ -2,121 +2,92 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-25 09:56:46
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-01-25 10:23:53
+ * @LastEditTime: 2022-07-08 18:09:10
  * @Description: file content
 -->
-<script>
+<script setup>
 import coin from "./coin.mp3";
 import lose from "./lose.mp3";
-import bgm from "./bgmusic.mp3";
-import { JsvSoundPool } from "jsview/utils/JsViewVueWidget/JsvSoundPool";
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+import bgmusic from "./bgmusic.mp3";
+import { JsvSoundPool, jJsvRuntimeBridge } from "jsview";
+import { onMounted, onBeforeUnmount, ref } from "vue";
+import { useRouter } from "vue-router";
 
-export default {
-  setup() {
-    return {
-      soundPool: null,
-      coinController1: null,
-      coinController2: null,
-      loseController1: null,
-      loseController2: null,
-      bgm,
-    };
-  },
-  created() {
-    this.soundPool = new JsvSoundPool(10);
-    this.soundPool.request(
-      `url(${coin})`,
-      null,
-      1,
-      (state, audioController) => {
-        console.log("cchtest load succeed", audioController);
-        if (state === 0) {
-          this.coinController1 = audioController;
-        }
+const router = useRouter();
+const soundPool = new JsvSoundPool(10);
+let coinController1 = null;
+let coinController2 = null;
+let loseController1 = null;
+let loseController2 = null;
+let bgm = ref(null);
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+  switch (ev.keyCode) {
+    case 37:
+      if (loseController1) {
+        loseController1.play();
       }
-    );
-    this.soundPool.request(
-      `url(${coin})`,
-      null,
-      1,
-      (state, audioController) => {
-        if (state === 0) {
-          this.coinController2 = audioController;
-          this.coinController2.setLoop(0);
-        }
+      break;
+    case 38:
+      if (coinController1) {
+        coinController1.play();
       }
-    );
-
-    this.soundPool.request(
-      `url(${lose})`,
-      null,
-      1,
-      (state, audioController) => {
-        if (state === 0) {
-          this.loseController1 = audioController;
-        }
-      }
-    );
-    this.soundPool.request(
-      `url(${lose})`,
-      null,
-      1,
-      (state, audioController) => {
-        if (state === 0) {
-          this.loseController2 = audioController;
-        }
-      }
-    );
-  },
-  methods: {
-    _onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
+      break;
+    case 39:
+      if (loseController2) {
+        loseController2.play();
       }
-      switch (ev.keyCode) {
-        case 37:
-          if (this.loseController1) {
-            this.loseController1.play();
-          }
-          break;
-        case 38:
-          if (this.coinController1) {
-            this.coinController1.play();
-          }
-          break;
-        case 39:
-          if (this.loseController2) {
-            this.loseController2.play();
-          }
-          break;
-        case 40:
-          if (this.coinController2) {
-            this.coinController2.play();
-          }
-          break;
-        case 13:
-          this.$refs.bgm?.play();
-          break;
+      break;
+    case 40:
+      if (coinController2) {
+        coinController2.play();
       }
-      return true;
-    },
-  },
-  mounted() {
-    // 调试接口，对接JSCenter平台去掉启动图的处理
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
-  beforeUnmount() {
-    this.coinController1 = null;
-    this.coinController2 = null;
-    this.loseController1 = null;
-    this.loseController2 = null;
-    this.soundPool.destroy();
-    this.$refs.bgm?.pause();
-    this.$refs.bgm?.unload();
-  },
+      break;
+    case 13:
+      bgm.value?.play();
+      break;
+  }
+  return true;
 };
+soundPool.request(`url(${coin})`, null, 1, (state, audioController) => {
+  console.log("cchtest load succeed", audioController);
+  if (state === 0) {
+    coinController1 = audioController;
+  }
+});
+soundPool.request(`url(${coin})`, null, 1, (state, audioController) => {
+  if (state === 0) {
+    coinController2 = audioController;
+    coinController2.setLoop(0);
+  }
+});
+
+soundPool.request(`url(${lose})`, null, 1, (state, audioController) => {
+  if (state === 0) {
+    loseController1 = audioController;
+  }
+});
+soundPool.request(`url(${lose})`, null, 1, (state, audioController) => {
+  if (state === 0) {
+    loseController2 = audioController;
+  }
+});
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+onBeforeUnmount(() => {
+  coinController1 = null;
+  coinController2 = null;
+  loseController1 = null;
+  loseController2 = null;
+  soundPool.destroy();
+  bgm.value?.pause();
+  bgm.value?.unload();
+});
 </script>
 
 <template>
@@ -157,7 +128,7 @@ export default {
           `[确定]: 播放背景音乐\n[左]: 播放失败音乐1\n[右]: 播放失败音乐2\n[上]: 播放硬币音乐1\n[下]: 播放硬币音乐2`
         }}
       </div>
-      <audiotrack ref="bgm" :src="bgm" loop="loop" />
+      <audiotrack ref="bgm" :src="bgmusic" loop="loop" />
     </div>
   </jsv-focus-block>
 </template>

package/samples/SprayView/App.vue

@@ -2,11 +2,11 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-13 11:19:26
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-18 14:21:18
+ * @LastEditTime: 2022-07-08 17:09:58
  * @Description: file content
 -->
 <script>
-import JsvSpray from "jsview/utils/JsViewVueWidget/JsvSpray";
+import { JsvSpray } from "jsview";
 import snow from "./assets/snow.png";
 const sprayOk = {
   type: 0,
@@ -114,7 +114,7 @@ export default {
       }
       return true;
     },
-  }
+  },
 };
 </script>
 
@@ -158,11 +158,13 @@ export default {
         </div>
       </div>
       <div :style="{ top: 20, left: 400 }">
-        <div :style="{
-          width: 40,
-          height: 40,
-          animation: 'cycle 3s linear infinite',
-        }">
+        <div
+          :style="{
+            width: 40,
+            height: 40,
+            animation: 'cycle 3s linear infinite',
+          }"
+        >
           <jsv-spray :pointRes="`url(${snow})`" :sprayStyle="sprayCycle" />
         </div>
         <div

package/samples/SpriteImage/App.vue

@@ -26,8 +26,7 @@
  -->
 
 <script>
-import JsvSpriteAnim from "../../utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteAnim.vue";
-import { SpriteController } from "../../utils/JsViewVueWidget/JsvSpriteAnim/SpriteController";
+import { SpriteController, JsvSpriteAnim } from "jsview";
 import spriteImage from "./images/egg_break.png";
 import config_json from "./images/egg_break.json";
 export default {

package/samples/TextBox/App.vue

@@ -22,120 +22,105 @@
  *    2. 变更文字内容，将触发控件重绘，但不会重新解析styles
  -->
 
- <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+ <script setup>
 import RenderLeft from "./RenderLeft.vue";
 import RenderRight from "./RenderRight.vue";
 import RenderCenter from "./RenderCenter.vue";
 import RenderOneLine from "./RenderOneLine.vue";
-import {
-  JsvTextStyleClass,
-  JsvStyleClass,
-} from "jsview/utils/JsViewVueTools/JsvStyleClass.js";
+import { JsvTextStyleClass, JsvStyleClass } from "jsview";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
 
-@Options({
-  components: {
-    RenderLeft,
-    RenderRight,
-    RenderCenter,
-    RenderOneLine,
-  },
-})
-export default class App extends Vue {
-  constructor(props: any) {
-    super(props);
-  }
-
-  private offsetX: any = 0;
-  private offsetY: any = 0;
-  private onLineText = "abcdefghigk";
-  private text: any = `静夜思 --唐李白
+const router = useRouter();
+let offsetX = ref(0);
+let offsetY = ref(0);
+const onLineText = "abcdefghigk";
+const text = `静夜思 --唐李白
 床前明月光，疑是地上霜；
 举头望明月，低头思故乡。`;
-  private text_latex: String = `静夜思 --唐李白
+const text_latex = `静夜思 --唐李白
 床前\\textcolor{#FF0000}{明月光}，疑是地上霜；
 举头\\textcolor{#0000FF}{望明月}，低头思故乡。`;
-  private sLayoutSet: any = new JsvStyleClass({
-    width: 400,
-    height: 300,
-    backgroundColor: "rgba(255,255,0,0.5)",
-  });
-  private sFontSetLeft40Top: any = new JsvTextStyleClass({
-    fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
-    textAlign: "left",
-    lineHeight: "40px",
-  });
-  private sFontSetLeft40Center: any = new JsvTextStyleClass({
-    fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
-    textAlign: "left",
-    lineHeight: "40px",
-  });
-  private sFontSetLeft40Bottom: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "left",
-    lineHeight: "40px",
-  });
-  private sFontSetLeft80: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "left",
-    lineHeight: "80px",
-  });
-  private sFontSetCenter40: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "center",
-    lineHeight: "40px",
-  });
-  private sFontSetCenter80: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "center",
-    lineHeight: "80px",
-  });
-  private sFontSetRight40: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "right",
-    lineHeight: "80px",
-  });
-  private sFontSetRight80: any = new JsvTextStyleClass({
-    fontSize: "30px",
-    textAlign: "right",
-    lineHeight: "80px",
-  });
-  private sStyleToken: String = "v1.0";
-  private rootRef: any = null;
-  private moveCount: any = 0;
+const sLayoutSet = new JsvStyleClass({
+  width: 400,
+  height: 300,
+  backgroundColor: "rgba(255,255,0,0.5)",
+});
+const sFontSetLeft40Top = new JsvTextStyleClass({
+  fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
+  textAlign: "left",
+  lineHeight: "40px",
+});
+const sFontSetLeft40Center = new JsvTextStyleClass({
+  fontSize: "30px", // 测试 30 和 '30px' 两种写法的兼容性
+  textAlign: "left",
+  lineHeight: "40px",
+});
+const sFontSetLeft40Bottom = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "left",
+  lineHeight: "40px",
+});
+const sFontSetLeft80 = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "left",
+  lineHeight: "80px",
+});
+const sFontSetCenter40 = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "center",
+  lineHeight: "40px",
+});
+const sFontSetCenter80 = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "center",
+  lineHeight: "80px",
+});
+const sFontSetRight40 = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "right",
+  lineHeight: "80px",
+});
+const sFontSetRight80 = new JsvTextStyleClass({
+  fontSize: "30px",
+  textAlign: "right",
+  lineHeight: "80px",
+});
+const sStyleToken = "v1.0";
+const rootRef = ref(null);
+const moveCount = ref(0);
 
-  onKeyDown(ev: any) {
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      return true;
-    }
-    switch (ev.keyCode) {
-      case 37:
-        this.offsetX += 30;
-        this.moveCount++;
-        break;
-      case 39:
-        this.offsetX -= 30;
-        this.moveCount++;
-        break;
-      case 38:
-        this.offsetY += 30;
-        this.moveCount++;
-        break;
-      case 40:
-        this.offsetY -= 30;
-        this.moveCount++;
-        break;
-    }
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
     return true;
   }
-  onFocus() {
-    console.log("TextBox getFocus");
-  }
-  onBlur() {
-    console.log("TextBox loseFocus");
+  switch (ev.keyCode) {
+    case 37:
+      offsetX.value += 30;
+      moveCount.value++;
+      break;
+    case 39:
+      offsetX.value -= 30;
+      moveCount.value++;
+      break;
+    case 38:
+      offsetY.value += 30;
+      moveCount.value++;
+      break;
+    case 40:
+      offsetY.value -= 30;
+      moveCount.value++;
+      break;
   }
-}
+  return true;
+};
+const onFocus = () => {
+  console.log("TextBox getFocus");
+};
+const onBlur = () => {
+  console.log("TextBox loseFocus");
+};
 </script>
 
  <template>

package/samples/TextBox/RenderCenter.vue

@@ -1,5 +1,5 @@
 <script>
-import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+import { JsvTextBox } from "jsview";
 export default {
   props: {
     text: String,

package/samples/TextBox/RenderLeft.vue

@@ -1,5 +1,5 @@
 <script>
-import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+import { JsvTextBox } from "jsview";
 export default {
   props: {
     text: String,

package/samples/TextBox/RenderOneLine.vue

@@ -1,5 +1,5 @@
 <script>
-import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+import { JsvTextBox } from "jsview";
 export default {
   props: {
     text: String,

package/samples/TextBox/RenderRight.vue

@@ -1,5 +1,5 @@
 <script>
-import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
+import { JsvTextBox } from "jsview";
 export default {
   props: {
     text: String,

package/samples/TextShadowDemo/App.vue

@@ -2,8 +2,7 @@
 * 当TextData数据中有blur为0（不显示阴影）时，为了测试会报“StyleFormatCheck.js?058c:447 textShadow: blur shadow above 0(now=2 2 0 #00FF00)”错误
 -->
 <script>
-import JsvTextBox from "jsview/utils/JsViewVueWidget/JsvTextBox.vue";
-import { JsvTextStyleClass } from "jsview/utils/JsViewVueTools/JsvStyleClass";
+import { JsvTextStyleClass, JsvTextBox } from "jsview";
 
 export default {
   components: {

package/samples/TextureAnimation/App.vue

@@ -1,8 +1,9 @@
 <script>
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-import JsvTextureAnim from "jsview/utils/JsViewVueWidget/JsvTextureAnim";
-import { getKeyFramesGroup } from "jsview/utils/JsViewVueTools/JsvDynamicKeyFrames";
-
+import {
+  jJsvRuntimeBridge,
+  getKeyFramesGroup,
+  JsvTextureAnim,
+} from "jsview";
 import img from "./assets/php2.png";
 import swipLight from "./assets/swipLight.png";
 
@@ -319,15 +320,17 @@ export default {
     </div>
 
     <!-- 说明文字 -->
-    <div :style="{
-      left: 100,
-      top: 620,
-      width: 1920,
-      height: 200,
-      fontSize: 30,
-      color: '#000000'
-    }">
-    {{"1. 注意圆角\n2. 红色半透明的view为标准, 图片的动画需要与其一致"}}
+    <div
+      :style="{
+        left: 100,
+        top: 620,
+        width: 1920,
+        height: 200,
+        fontSize: 30,
+        color: '#000000',
+      }"
+    >
+      {{ "1. 注意圆角\n2. 红色半透明的view为标准, 图片的动画需要与其一致" }}
     </div>
   </jsv-focus-block>
 </template>