@shijiu/jsview-vue-samples 2.0.1073 → 2.0.1106

package/Input/InputPanel.vue

@@ -1,129 +1,107 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-01-25 10:33:07
- * @LastEditTime: 2023-02-01 13:46:07
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-04-28 
  * @Description: file content
 -->
-<script>
+<script setup>
 import FullKeyboard from "./FullKeyboard.vue";
 import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
-import { ref } from "vue";
+import { shallowRef} from "vue";
 
 const blurColor = "#AAAAAA";
 const focusColor = "#FFFF00";
-
-export default {
-  components: {
-    FullKeyboard,
-    JsvInput,
-  },
-  props: {
+let focusNode = shallowRef(null)
+let input=shallowRef(null)
+let showCursor = shallowRef(false)
+const focusHub = useFocusHub()
+let cursorColor = shallowRef(blurColor)
+const props = defineProps({
     name: String,
     type: Number,
     textAlign: String,
     placeHolder: String,
     onEdge: Function,
-  },
-  setup() {
-    return {
-      showCursor: ref(false),
-      focusHub: useFocusHub(),
-      cursorColor: ref(blurColor),
-    };
-  },
-  methods: {
-    _onFocus() {
-      this.showCursor = true;
-      this.cursorColor = blurColor;
-      this.focusHub.setFocus(`${this.name}/keyboard`);
-    },
-    _onBlur() {
-      this.showCursor = false;
-      this.cursorColor = blurColor;
-    },
-    _keyboardOnClick(item) {
-      const char = item.content;
-      if (char === "删除") {
-        this.$refs.input?.delete();
-      } else if (char === "清空") {
-        this.$refs.input?.clear();
-      } else {
-        this.$refs.input?.add(char);
-      }
-    },
-    _keyboardOnEdge(edgeInfo) {
-      if (edgeInfo.direction === EdgeDirection.top) {
-        this.focusHub.setFocus(`${this.name}/etext`);
-        this.cursorColor = focusColor;
-      } else {
-        this.onEdge?.(edgeInfo);
-      }
-    },
-    _onTextChange(str) {
-      console.log(this.name + " text change:", str);
-    },
-    _onTextOverflow() {
-      console.log(this.name + " text overflow.");
-    },
-    _inputOnEdge(edgeInfo) {
-      if (edgeInfo.direction === EdgeDirection.bottom) {
-        this.focusHub.setFocus(`${this.name}/keyboard`);
-        this.cursorColor = blurColor;
-      } else {
-        this.onEdge?.(edgeInfo);
-      }
-      return true;
-    },
-  },
-};
+})
+const _onFocus = () => {
+    showCursor.value = true;
+    cursorColor.value = blurColor;
+    focusHub.setFocus(`${props.name}/keyboard`);
+}
+const _onBlur = () => {
+    showCursor.value = false;
+    cursorColor.value = blurColor;
+}
+const _keyboardOnClick = (item) => {
+    const char = item.content;
+    if (char === "删除") {
+        input.value?.delete();
+    } else if (char === "清空") {
+        input.value?.clear();
+    } else {
+        input.value?.add(char);
+    }
+}
+const _keyboardOnEdge = (edgeInfo) => {
+    if (edgeInfo.direction === EdgeDirection.top) {
+        focusHub.setFocus(`${props.name}/etext`);
+        cursorColor.value = focusColor;
+    } else {
+        props.onEdge?.(edgeInfo);
+    }
+}
+const _onTextChange = (str) => {
+    console.log(props.name + " text change:", str);
+}
+const _onTextOverflow = () => {
+    console.log(props.name + " text overflow.");
+}
+const _inputOnEdge = (edgeInfo) => {
+    if (edgeInfo.direction === EdgeDirection.bottom) {
+        focusHub.setFocus(`${props.name}/keyboard`);
+        cursorColor.value = blurColor;
+    } else {
+        props.onEdge?.(edgeInfo);
+    }
+    return true;
+}
 </script>
 
 <template>
-  <jsv-focus-block
-    :name="name"
-    ref="focusNode"
-    :onAction="{
-      onFocus: _onFocus,
-      onBlur: _onBlur,
-    }"
-  >
-    <div
-      :style="{
-        left: 50,
-        top: 50,
-        width: 150,
-        height: 40,
-        backgroundColor: '#33334f',
-      }"
-    />
-    <jsv-input
-      :name="`${this.name}/etext`"
-      ref="input"
-      :type="type"
-      :left="50"
-      :top="50"
-      :height="40"
-      :width="150"
-      :placeholder="placeHolder"
-      :cursorShow="showCursor"
-      :fontStyle="{
-        fontSize: 28,
-        color: '#ffff00',
-        textAlign: textAlign,
-      }"
-      :onEdge="_inputOnEdge"
-      :cursorWidth="2"
-      :onTextChange="_onTextChange"
-      :onTextOverflow="_onTextOverflow"
-      :cursorColor="cursorColor"
-    />
+    <jsv-focus-block :name="props.name" ref="focusNode" :onAction="{
+            onFocus: _onFocus,
+            onBlur: _onBlur,
+        }">
+        <div :style="{
+                left: 50,
+                top: 50,
+                width: 150,
+                height: 40,
+                backgroundColor: '#33334f',
+            }" />
+        <jsv-input :name="`${props.name}/etext`" 
+                    ref="input" 
+                   :type="props.type" 
+                   :left="50" 
+                   :top="50" 
+                   :height="40"
+                   :width="150" 
+                   :placeholder="props.placeHolder" 
+                   :cursorShow="showCursor" 
+                   :fontStyle="{
+                    fontSize: 28,
+                    color: '#ffff00',
+                    textAlign: props.textAlign,
+                }" 
+                :onEdge="_inputOnEdge" 
+                :cursorWidth="2" 
+                :onTextChange="_onTextChange"
+                :onTextOverflow="_onTextOverflow" 
+                :cursorColor="cursorColor" />
 
-    <div :style="{ top: 100 }">
-      <full-keyboard
-        :name="`${this.name}/keyboard`"
-        :onClick="_keyboardOnClick"
-        :onEdge="_keyboardOnEdge"
-      />
-    </div>
-  </jsv-focus-block>
+        <div :style="{ top: 100 }">
+            <full-keyboard :name="`${props.name}/keyboard`" :onClick="_keyboardOnClick" :onEdge="_keyboardOnEdge" />
+        </div>
+    </jsv-focus-block>
 </template>

package/Input/KeyboardItem.vue

@@ -1,58 +1,48 @@
-<script>
-export default {
-  props: {
+<script setup>
+import { shallowRef,computed } from "vue"
+const props = defineProps({
     data: Object,
     query: Object,
     onEdge: Function,
     onAction: Object,
     onClick: Function,
-  },
-  data() {
+})
+const focused = shallowRef(false)
+
+const style = computed(() => {
     return {
-      focused: false,
-    };
-  },
-  computed: {
-    style() {
-      return {
-        width: this.data.width,
-        height: this.data.height,
+        width: props.data.width,
+        height: props.data.height,
         fontSize: 20,
         textAlign: "center",
-        lineHeight: this.data.height,
+        lineHeight: props.data.height,
         color: "#FFFFFF",
-      };
-    },
-  },
-  methods: {
-    _onFocus() {
-      this.focused = true;
-    },
-    _onBlur() {
-      this.focused = false;
-    },
-    _onClick() {
-      this.onClick(this.data);
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this._onFocus);
-    this.onAction.register("onBlur", this._onBlur);
-    this.onAction.register("onClick", this._onClick);
-  },
-};
+    };
+})
+const _onFocus = () => {
+    focused.value = true;
+}
+const _onBlur = () => {
+    focused.value = false;
+}
+const _onClick = () => {
+    props.onClick(props.data);
+}
+
+props.onAction.register("onFocus", _onFocus);
+props.onAction.register("onBlur", _onBlur);
+props.onAction.register("onClick", _onClick);
+
+
 </script>
 
 <template>
-  <div
-    v-if="focused"
-    :style="{
-      width: data.width,
-      height: data.height,
-      backgroundColor: '#00FF00',
-    }"
-  />
-  <div ref="element" :style="style">
-    {{ data.content }}
-  </div>
+    <div v-if="focused" :style="{
+            width: props.data.width,
+            height: props.data.height,
+            backgroundColor: '#00FF00',
+        }" />
+    <div ref="element" :style="style">
+        {{ props.data.content }}
+    </div>
 </template>

package/JsvRadarChart/App.vue

@@ -8,16 +8,16 @@
 <template>
     <jsv-focus-block autoFocus :onAction="actionDefines">
         <div :style="{
-                textAlign: 'center',
-                fontSize: 30,
-                lineHeight: 50,
-                color: '#ffffff',
-                left: 100,
-                top: 20,
-                width: 1280 - 200,
-                height: 50,
-                backgroundColor: 'rgba(27,38,151,0.8)',
-            }">按左键各个方向随机减少，按右键各个方向随机增加</div>
+            textAlign: 'center',
+            fontSize: 30,
+            lineHeight: 50,
+            color: '#ffffff',
+            left: 100,
+            top: 20,
+            width: 1280 - 200,
+            height: 50,
+            backgroundColor: 'rgba(27,38,151,0.8)',
+        }">按左键各个方向随机减少，按右键各个方向随机增加</div>
         <JsvRadarChart :data="data" :backgroundUrl="bgImageUrl" :foregroundUrl="resultSquare" :style="style"
             :fontSize="fontSize" :extendOffset="70" :fontColor="'#ff3212'" :radius="200" />
         <JsvRadarChart :data="data2" :backgroundUrl="bgImageUrl" :foregroundUrl="resultSquare" :style="style2"
@@ -29,10 +29,7 @@
 import { JsvRadarChart } from "jsview";
 import resultSquare from "./assets/resultSquare.png"
 import bgImageUrl from "./assets/Square.png"
-import { onMounted, ref } from 'vue';
-import { jJsvRuntimeBridge } from 'jsview';
-import { useRouter } from "vue-router";
-const router = useRouter();
+import { ref } from 'vue';
 const data = ref([
     { title: '语文', value: 70 },
     { title: '数学', value: 98 },
@@ -60,9 +57,8 @@ const style2 = {
 const fontSize = 30;
 
 const onKeyDown = (ev) => {
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        router.go(-1)
-    } else if (ev.keyCode == 39) {
+    if (ev.keyCode == 39) {
+        console.log('测试用：按下了右键');
         data.value.forEach((item, index) => {
             item.value += Math.random() * 10
             if (item.value >= 100) {
@@ -76,16 +72,17 @@ const onKeyDown = (ev) => {
             }
         })
     } else if (ev.keyCode == 37) {
+        console.log('测试用：按下了左键');
         data.value.forEach((item, index) => {
             item.value -= Math.random() * 10
             if (item.value <= 10) {
-                item.value == 8
+                item.value = 8
             }
         })
         data2.value.forEach((item, index) => {
             item.value -= Math.random() * 10
             if (item.value <= 10) {
-                item.value == 8
+                item.value = 8
             }
         })
     }

package/LongImage/Button.vue

@@ -1,12 +1,11 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-07-08 15:18:02
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 17:47:25
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-04 
  * @Description: file content
 -->
 <script setup>
-import { ref } from "vue";
 import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
 import ButtonItem from "./ButtonItem.vue";
 

package/LongText/App.vue

@@ -2,9 +2,6 @@
  * 【界面概述】
  * 协议书的示例
  *
- * 【控件介绍】
- * SimpleWidget：见simpleMetrowidget
- *
  * 【技巧说明】
  * Q: 如何长文字div的高度自适应？
  * A: 描画长文字的div的高度不设置即可

package/LongText/Button.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { ref } from "vue";
 import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
 import ButtonItem from "./ButtonItem.vue";
 

package/LongText/LongTextScroll.vue

@@ -61,10 +61,6 @@ const onAction = {
   },
 };
 
-const OnLoad = () => {
-  // 图片加载完成的回调
-  console.log("Image loaded!");
-};
 onMounted(() => {
   rootRef.value.requestFocus();
 });

package/Marquee/App.vue

@@ -143,6 +143,7 @@ onMounted(() => {
           lineHeight: 70,
           fontSize: 50,
           color: '#000000',
+          direction: 'rtl',
         }"
         :text="rtlText"
         :slideSpeed="slideSpeed"

package/MetroWidgetDemos/PerformanceTest/App.vue

@@ -73,10 +73,9 @@
 
 <script setup>
 import { data1, data2, data3 } from "./data";
-import borderImgPath from "./border.png";
 import Item from "./components/ContentItem.vue";
 import MyTab from "./components/MyTab.vue";
-import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { shallowRef, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 import {
   VERTICAL,
@@ -195,7 +194,7 @@ onMounted(() => {
 
 <style scoped>
 .rootSize {
-  top: 0px;
+  top: 0;
 }
 
 .widgetPos {

package/MetroWidgetDemos/PerformanceTest/Item.vue

@@ -1,67 +1,64 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-07-11 18:03:22
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-11 18:03:23
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-04 
  * @Description: file content
 -->
-<script>
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  methods: {
-    onFocus() {
-      this.focus = true;
-      this.anim = "focusScale 0.3s";
-    },
-    onBlur() {
-      this.focus = false;
-      this.anim = "blurScale 0.3s";
-    },
-    onClick() {
-      console.log("item click");
-    },
-    getStyle() {
-      const width = this.focus
-        ? (this.data.blocks.w - 10) * (1 / 0.8)
-        : this.data.blocks.w - 10;
-      const height = this.focus
-        ? (this.data.blocks.h - 10) * (1 / 0.8)
-        : this.data.blocks.h - 10;
-      const posx = this.focus ? (this.data.blocks.w - 10 - width) / 2 : 0;
-      const posy = this.focus ? (this.data.blocks.h - 10 - height) / 2 : 0;
-      return {
-        left: posx,
-        top: posy,
-        width: width,
-        height: height,
-        color: "#FFFFFF",
-        backgroundColor: this.focus ? "#FF0000" : this.data.color,
-        animation: this.anim,
-      };
-    },
-  },
-  data() {
-    return {
-      focus: false,
-      anim: null,
-    };
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
+<script setup>
+import { shallowRef } from "vue"
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+})
+
+let focus = shallowRef(false)
+let anim = shallowRef(null)
+
+const onFocus = () => {
+  focus.value = true;
+  anim.value = "focusScale 0.3s";
+}
+
+const onBlur = () => {
+  focus.value = false;
+  anim.value = "blurScale 0.3s";
+}
+
+const onClick = () => {
+  console.log("item click");
+}
+
+const getStyle = () => {
+  const width = focus.value
+    ? (props.data.blocks.w - 10) * (1 / 0.8)
+    : props.data.blocks.w - 10;
+  const height = focus.value
+    ? (props.data.blocks.h - 10) * (1 / 0.8)
+    : props.data.blocks.h - 10;
+  const posx = focus.value ? (props.data.blocks.w - 10 - width) / 2 : 0;
+  const posy = focus.value ? (props.data.blocks.h - 10 - height) / 2 : 0;
+  return {
+    left: posx,
+    top: posy,
+    width: width,
+    height: height,
+    color: "#FFFFFF",
+    backgroundColor: focus.value ? "#FF0000" : props.data.color,
+    animation: anim.value,
+  };
+}
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+
 </script>
 
 <template>
   <div :style="{ ...getStyle() }">
-    {{ data.content }}
+    {{ props.data.content }}
   </div>
 </template>