@shijiu/jsview-vue-samples 2.0.1073 → 2.0.1106

package/TestNativeSharedView/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { JsvNativeSharedDiv, JsvFocusBlock, jJsvRuntimeBridge, enableNativeViewListener, disableNativeViewListener } from "jsview"
-import { onBeforeUnmount, onMounted, reactive } from 'vue';
+import { onBeforeUnmount, onMounted, reactive, watch, shallowRef } from 'vue';
 
 let state = reactive({
   outX: 20,
@@ -17,6 +17,30 @@ let _TestData = [
 
 let _Index = 0;
 
+//给两个div给定不同的响应式变量
+let view1 = shallowRef('null')
+let view2 = shallowRef('null')
+let isShow=shallowRef(false)
+let isStop=shallowRef(false)
+//创造出需要的四个属性的对象
+const obj = (newValue) => {
+  const resultObj = {}
+  const newObj = JSON.parse(newValue.replace(/(\w+)\=/g, "\"$1\":").replace(/'/g, "\"").replace(/^Bundle\[/, "").replace(/\]$/, ""));
+  for (const key in newObj) {
+    if (key == 'height' || key == 'width' || key == 'x' || key == 'y') {
+      resultObj[key] = newObj[key];
+    }
+  }
+  return resultObj
+}
+//监听
+watch(view1, (n, o) => {
+  view1 = obj(n)
+})
+watch(view2, (n, o) => {
+  view2 = obj(n)
+  isShow.value=true
+})
 // 每2秒进行位置变化以测试位置信息更新
 let loopTimer = setInterval(() => {
   _Index = (_Index + 1) % 3;
@@ -34,11 +58,11 @@ let _ResiterCallbackId1 = -1;
 let _ResiterCallbackId2 = -1;
 
 let getId = (id) => {
-    if (_ReisterId !== id) {
-      _ResiterCallbackId1 = enableNativeViewListener(id);
-      _ReisterId = id;
-    }
-  };
+  if (_ReisterId !== id) {
+    _ResiterCallbackId1 = enableNativeViewListener(id, view1)
+    _ReisterId = id;
+  }
+};
 
 let timeout1 = -1;
 let timeout2 = -1;
@@ -51,17 +75,18 @@ let getId2 = (id) => {
     // 提前发出的event在listener注册时，可以收到最后状态信息
     timeout1 = setTimeout(() => {
       timeout1 = -1;
-      _ResiterCallbackId2 = enableNativeViewListener(id);
+      _ResiterCallbackId2 = enableNativeViewListener(id, view2);
       timeout2 = setTimeout(() => {
         timeout2 = -1;
         disableNativeViewListener(_ResiterCallbackId2);
+        isStop.value=true
         _ResiterCallbackId2 = -1;
       }, 10000);
     }, 1000);
   }
 };
 
-onBeforeUnmount(()=>{
+onBeforeUnmount(() => {
   if (loopTimer >= 0) {
     clearInterval(loopTimer);
     loopTimer = -1;
@@ -87,7 +112,7 @@ onBeforeUnmount(()=>{
   }
 })
 
-onMounted(()=>{
+onMounted(() => {
   console.log("TestNativeSharedView mounted");
   jJsvRuntimeBridge.notifyPageLoaded();
 })
@@ -95,76 +120,106 @@ onMounted(()=>{
 </script>
 
 <template>
-  <jsv-focus-block
-    autoFocus
-  >
+  <jsv-focus-block autoFocus>
     <!-- 一个无限动画元素，来测试卡顿 -->
-    <div
-      :style="{
-        top: 100,
-        left: 1000,
-        height: 150,
-        width: 150,
-        backgroundColor: '#334455',
-        animation: 'test-anim-rotate 1s infinite linear',
-      }"
-    />
-    <div
-      :style="{
+    <div :style="{
+      top: 100,
+      left: 1000,
+      height: 150,
+      width: 150,
+      backgroundColor: '#334455',
+      animation: 'test-anim-rotate 1s infinite linear',
+    }" />
+    <!-- 显示参数 -->
+    <div :style="{ top: 400, left: 1000, width: 256, height: 240, backgroundColor: 'rgba(27,38,151,0.8)' }">
+      <div :style="{ top: 0, left: 0, width: 120, height: 30, color: '#FFFFFF', fontSize: 20, textAlign: 'center' }">{{
+        'view1的参数'
+      }}</div>
+      <div v-for="(value, key, index) in view1" :style="{
+            top: 30 + index * 40,
+            left: 10,
+            width: 100,
+            height: 40,
+            fontSize: 20,
+            color: '#FFFFFF',
+            textAlign: 'center'
+          }">{{ key }}:{{ value }}</div>
+      <div :style="{ top: 0, left: 130, width: 120, height: 30, color: '#FFFFFF', fontSize: 20, textAlign: 'center' }">{{
+        'view2的参数'
+      }}</div>
+      <div v-if="isShow">
+      <div v-for="(value, key, index) in view2" :style="{
+            top: 30 + index * 40,
+            left: 130,
+            width: 100,
+            height: 40,
+            fontSize: 20,
+            color: '#FFFFFF',
+            textAlign: 'center'
+          }">{{ key }}:{{ value }}</div>
+          <div :style="{top: 200,
+            left: 130,
+            width: 100,
+            height: 40,
+            fontSize: 20,
+            color: '#FFFFFF',
+            textAlign: 'center'}">{{ isStop ? "监听停止":"" }}</div>
+          </div>
+          <div 
+          v-else
+          :style="{
+            top: 30 + 2*30,
+            left: 130,
+            width: 100,
+            height: 40,
+            fontSize: 20,
+            color: '#FFFFFF',
+            textAlign: 'center'}">{{ '未监听' }}</div>
+    </div>
+
+
+    <div :style="{
         left: state.outX,
         top: state.outY,
         backgroundColor: '#00FF00',
         width: 600,
         height: 600,
-      }"
-    >
-      <jsv-native-shared-div
-        :getId="getId"
-        :style="{
+      }">
+      <jsv-native-shared-div :getId="getId" :style="{
           left: state.inX,
           top: state.inY,
           width: 500,
           height: 500,
-        }"
-      >
-        <div
-          :style="{
+        }">
+        <div :style="{
             backgroundColor: '#00FF00',
             left: 50,
             top: 40,
             width: 30,
             height: 30,
-          }"
-        />
+          }" />
       </jsv-native-shared-div>
     </div>
-    <div
-      :style="{
+    <div :style="{
         left: state.outX + 200,
         top: state.outY,
         backgroundColor: '#00FF00',
         width: 600,
         height: 600,
-      }"
-    >
-      <jsv-native-shared-div
-        :getId="getId2"
-        :style="{
+      }">
+      <jsv-native-shared-div :getId="getId2" :style="{
           left: state.inX,
           top: state.inY,
           width: 500,
           height: 500,
-        }"
-      >
-        <div
-          :style="{
+        }">
+        <div :style="{
             backgroundColor: '#00FF00',
             left: 50,
             top: 40,
             width: 30,
             height: 30,
-          }"
-        />
+          }" />
       </jsv-native-shared-div>
     </div>
   </jsv-focus-block>
@@ -175,6 +230,7 @@ onMounted(()=>{
   from {
     transform: rotate3d(0, 0, 1, 270deg);
   }
+
   to {
     transform: rotate3d(0, 0, 1, 0deg);
   }

package/TextBox/RenderCenter.vue

@@ -1,133 +1,109 @@
-<script>
+<script setup>
 import { JsvTextBox } from "jsview";
-export default {
-  props: {
-    text: String,
-    text_latex: String,
-  },
-  components: { JsvTextBox },
-};
+const props = defineProps({
+  text: String,
+  text_latex: String,
+})
 </script>
 
 <template>
   <div :style="{ top: 400 }">
-    <div
-      :style="{
-        left: 0,
-        top: -50,
-        width: 400,
-        height: 50,
-        fontSize: 20,
-        textAlign: 'left',
-        lineHeight: 50,
-        backgroundColor: '#00ff00',
-      }"
-    >
+    <div :style="{
+      left: 0,
+      top: -50,
+      width: 400,
+      height: 50,
+      fontSize: 20,
+      textAlign: 'left',
+      lineHeight: 50,
+      backgroundColor: '#00ff00',
+    }">
       整体垂直向上对齐、文字水平居中显示
     </div>
-    <JsvTextBox
-      :verticalAlign="'top'"
-      :style="{
-        left: 0,
-        top: 0,
-        width: 400,
-        height: 300,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: 30,
-        textAlign: 'center',
-        lineHeight: 40,
-      }"
-    >
-      {{ `[TC]${text}` }}
+    <JsvTextBox :verticalAlign="'top'" :style="{
+      left: 0,
+      top: 0,
+      width: 400,
+      height: 300,
+      backgroundColor: 'rgba(255,255,0,0.5)',
+      fontSize: 30,
+      textAlign: 'center',
+      lineHeight: 40,
+    }">
+      {{ `[TC]${props.text}` }}
     </JsvTextBox>
-    <div
-      :style="{
-        left: 410,
-        top: -50,
-        width: 400,
-        height: 50,
-        fontSize: 20,
-        textAlign: 'left',
-        lineHeight: 50,
-        backgroundColor: '#00ff00',
-      }"
-    >
+    <div :style="{
+      left: 410,
+      top: -50,
+      width: 400,
+      height: 50,
+      fontSize: 20,
+      textAlign: 'left',
+      lineHeight: 50,
+      backgroundColor: '#00ff00',
+    }">
       整体垂直居中对齐、文字水平居中显示
     </div>
-    <JsvTextBox
-      :verticalAlign="'middle'"
-      :style="{
-        left: 410,
-        top: 0,
-        width: 400,
-        height: 300,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: 30,
-        textAlign: 'center',
-        lineHeight: 40,
-      }"
-      :enableLatex="true"
-    >
-      {{ `[MC]${text_latex}` }}
+    <JsvTextBox :verticalAlign="'middle'" :style="{
+      left: 410,
+      top: 0,
+      width: 400,
+      height: 300,
+      backgroundColor: 'rgba(255,255,0,0.5)',
+      fontSize: 30,
+      textAlign: 'center',
+      lineHeight: 40,
+    }" :enableLatex="true">
+      {{ `[MC]${props.text_latex}` }}
     </JsvTextBox>
-    <div
-      :style="{
-        left: 820,
-        top: -50,
-        width: 400,
-        height: 50,
-        fontSize: 20,
-        textAlign: 'left',
-        lineHeight: 50,
-        backgroundColor: '#00ff00',
-      }"
-    >
+    <div :style="{
+      left: 820,
+      top: -50,
+      width: 400,
+      height: 50,
+      fontSize: 20,
+      textAlign: 'left',
+      lineHeight: 50,
+      backgroundColor: '#00ff00',
+    }">
       整体垂直向下对齐、文字水平居中显示
     </div>
-    <JsvTextBox
-      :verticalAlign="'bottom'"
-      :style="{
-        left: 820,
-        top: 0,
-        width: 400,
-        height: 300,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: 30,
-        textAlign: 'center',
-        lineHeight: 40,
-      }"
-    >
-      {{ `[BC]${text}` }}
+    <JsvTextBox :verticalAlign="'bottom'" :style="{
+      left: 820,
+      top: 0,
+      width: 400,
+      height: 300,
+      backgroundColor: 'rgba(255,255,0,0.5)',
+      fontSize: 30,
+      textAlign: 'center',
+      lineHeight: 40,
+    }">
+      {{ `[BC]${props.text}` }}
     </JsvTextBox>
 
-    <div
-      :style="{
-        left: 1240,
-        top: -50,
-        width: 500,
-        height: 50,
-        fontSize: 20,
-        textAlign: 'left',
-        lineHeight: 50,
-        backgroundColor: '#00ff00',
-      }"
-    >
+    <div :style="{
+      left: 1240,
+      top: -50,
+      width: 500,
+      height: 50,
+      fontSize: 20,
+      textAlign: 'left',
+      lineHeight: 50,
+      backgroundColor: '#00ff00',
+    }">
       整体垂直居中对齐、文字水平居中显示、行高80px
     </div>
-    <JsvTextBox
-      :verticalAlign="'middle'"
-      :style="{
-        left: 1240,
-        top: 0,
-        width: 500,
-        height: 300,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: 30,
-        textAlign: 'center',
-        lineHeight: 80,
-      }"
-    >
-      {{ `[MC]${text}` }}
+    <JsvTextBox :verticalAlign="'middle'" :style="{
+      left: 1240,
+      top: 0,
+      width: 500,
+      height: 300,
+      backgroundColor: 'rgba(255,255,0,0.5)',
+      fontSize: 30,
+      textAlign: 'center',
+      lineHeight: 80,
+    }">
+      {{ `[MC]${props.text}` }}
     </JsvTextBox>
   </div>
 </template>

package/TextBox/RenderLeft.vue

@@ -1,132 +1,108 @@
-<script>
+<script setup>
 import { JsvTextBox } from "jsview";
-export default {
-  props: {
-    text: String,
-    moveCount: Number,
-  },
-  components: { JsvTextBox },
-};
+const props = defineProps({
+  text: String,
+  moveCount: Number,
+})
 </script>
 
 <template>
   <div :style="{ top: 50 }">
-    <div
-      :style="{
-        left: 0,
-        top: -50,
-        width: 400,
-        height: 50,
-        fontSize: 20,
-        textAlign: 'left',
-        lineHeight: 50,
-        backgroundColor: '#00ff00',
-      }"
-    >
+    <div :style="{
+      left: 0,
+      top: -50,
+      width: 400,
+      height: 50,
+      fontSize: 20,
+      textAlign: 'left',
+      lineHeight: 50,
+      backgroundColor: '#00ff00',
+    }">
       整体向上对齐、文字居左显示
     </div>
-    <JsvTextBox
-      :verticalAlign="'top'"
-      :style="{
-        left: 0,
-        top: 0,
-        width: 400,
-        height: 300,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: 30,
-        textAlign: 'left',
-        lineHeight: 40,
-      }"
-    >
-      {{ `测试文字变化能引起刷新: [${moveCount}]\n[TL]${text}` }}
+    <JsvTextBox :verticalAlign="'top'" :style="{
+      left: 0,
+      top: 0,
+      width: 400,
+      height: 300,
+      backgroundColor: 'rgba(255,255,0,0.5)',
+      fontSize: 30,
+      textAlign: 'left',
+      lineHeight: 40,
+    }">
+      {{ `测试文字变化能引起刷新: [${props.moveCount}]\n[TL]${props.text}` }}
     </JsvTextBox>
-    <div
-      :style="{
-        left: 410,
-        top: -50,
-        width: 400,
-        height: 50,
-        fontSize: 20,
-        textAlign: 'left',
-        lineHeight: 50,
-        backgroundColor: '#00ff00',
-      }"
-    >
+    <div :style="{
+      left: 410,
+      top: -50,
+      width: 400,
+      height: 50,
+      fontSize: 20,
+      textAlign: 'left',
+      lineHeight: 50,
+      backgroundColor: '#00ff00',
+    }">
       整体垂直居中对齐、文字水平居左显示
     </div>
-    <JsvTextBox
-      :verticalAlign="'middle'"
-      :style="{
-        left: 410,
-        top: 0,
-        width: 400,
-        height: 300,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: 30,
-        textAlign: 'left',
-        lineHeight: 40,
-      }"
-    >
-      {{ `[ML]${text}` }}
+    <JsvTextBox :verticalAlign="'middle'" :style="{
+      left: 410,
+      top: 0,
+      width: 400,
+      height: 300,
+      backgroundColor: 'rgba(255,255,0,0.5)',
+      fontSize: 30,
+      textAlign: 'left',
+      lineHeight: 40,
+    }">
+      {{ `[ML]${props.text}` }}
     </JsvTextBox>
-    <div
-      :style="{
-        left: 820,
-        top: -50,
-        width: 400,
-        height: 50,
-        fontSize: 20,
-        textAlign: 'left',
-        lineHeight: 50,
-        backgroundColor: '#00ff00',
-      }"
-    >
+    <div :style="{
+      left: 820,
+      top: -50,
+      width: 400,
+      height: 50,
+      fontSize: 20,
+      textAlign: 'left',
+      lineHeight: 50,
+      backgroundColor: '#00ff00',
+    }">
       整体垂直向下对齐、文字水平居左显示
     </div>
-    <JsvTextBox
-      :verticalAlign="'bottom'"
-      :style="{
-        left: 820,
-        top: 0,
-        width: 400,
-        height: 300,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: 30,
-        textAlign: 'left',
-        lineHeight: 40,
-      }"
-    >
-      {{ `[BL]${text}` }}
+    <JsvTextBox :verticalAlign="'bottom'" :style="{
+      left: 820,
+      top: 0,
+      width: 400,
+      height: 300,
+      backgroundColor: 'rgba(255,255,0,0.5)',
+      fontSize: 30,
+      textAlign: 'left',
+      lineHeight: 40,
+    }">
+      {{ `[BL]${props.text}` }}
     </JsvTextBox>
-    <div
-      :style="{
-        left: 1240,
-        top: -50,
-        width: 500,
-        height: 50,
-        fontSize: 20,
-        textAlign: 'left',
-        lineHeight: 50,
-        backgroundColor: '#00ff00',
-      }"
-    >
+    <div :style="{
+      left: 1240,
+      top: -50,
+      width: 500,
+      height: 50,
+      fontSize: 20,
+      textAlign: 'left',
+      lineHeight: 50,
+      backgroundColor: '#00ff00',
+    }">
       整体垂直向上对齐、文字水平居左显示、行高80px
     </div>
-    <JsvTextBox
-      :verticalAlign="'top'"
-      :style="{
-        left: 1240,
-        top: 0,
-        width: 500,
-        height: 300,
-        backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: 30,
-        textAlign: 'left',
-        lineHeight: 80,
-      }"
-      className="test"
-    >
-      {{ `[TL]${text}` }}
+    <JsvTextBox :verticalAlign="'top'" :style="{
+      left: 1240,
+      top: 0,
+      width: 500,
+      height: 300,
+      backgroundColor: 'rgba(255,255,0,0.5)',
+      fontSize: 30,
+      textAlign: 'left',
+      lineHeight: 80,
+    }" className="test">
+      {{ `[TL]${props.text}` }}
     </JsvTextBox>
   </div>
 </template>