@shijiu/jsview-vue-samples 2.0.1073 → 2.0.1106

package/TextBox/RenderOneLine.vue

@@ -1,11 +1,8 @@
-<script>
+<script setup>
 import { JsvTextBox } from "jsview";
-export default {
-  props: {
-    text: String,
-  },
-  components: { JsvTextBox },
-};
+const props=defineProps({
+  text: String
+})
 </script>
 
 <template>
@@ -37,7 +34,7 @@ export default {
         lineHeight: 80,
       }"
     >
-      {{ text }}
+      {{ props.text }}
     </JsvTextBox>
     <div
       :style="{
@@ -66,7 +63,7 @@ export default {
         lineHeight: 80,
       }"
     >
-      {{ text }}
+      {{ props.text }}
     </JsvTextBox>
     <div
       :style="{
@@ -95,7 +92,7 @@ export default {
         lineHeight: 80,
       }"
     >
-      {{ text }}
+      {{ props.text }}
     </JsvTextBox>
   </div>
 </template>

package/TextBox/RenderRight.vue

@@ -1,11 +1,8 @@
-<script>
+<script setup>
 import { JsvTextBox } from "jsview";
-export default {
-  props: {
-    text: String,
-  },
-  components: { JsvTextBox },
-};
+const props=defineProps({
+  text: String
+})
 </script>
 
 <template>
@@ -37,7 +34,7 @@ export default {
         lineHeight: 40,
       }"
     >
-      {{ `[TR]${text}` }}
+      {{ `[TR]${props.text}` }}
     </JsvTextBox>
     <div
       :style="{
@@ -66,7 +63,7 @@ export default {
         lineHeight: 40,
       }"
     >
-      {{ `[MR]${text}` }}
+      {{ `[MR]${props.text}` }}
     </JsvTextBox>
     <div
       :style="{
@@ -95,7 +92,7 @@ export default {
         lineHeight: 40,
       }"
     >
-      {{ `[BR]${text}` }}
+      {{ `[BR]${props.text}` }}
     </JsvTextBox>
 
     <div
@@ -125,7 +122,7 @@ export default {
         lineHeight: 80,
       }"
     >
-      {{ `[BR]${text}` }}
+      {{ `[BR]${props.text}` }}
     </JsvTextBox>
   </div>
 </template>

package/TextShadowDemo/App.vue

@@ -1,88 +1,67 @@
-<!--
-* 当TextData数据中有blur为0（不显示阴影）时，为了测试会报“StyleFormatCheck.js?058c:447 textShadow: blur shadow above 0(now=2 2 0 #00FF00)”错误
--->
-<script>
+<script setup>
 import { JsvTextBox } from "jsview";
-
-export default {
-  components: {
-    JsvTextBox,
+import { useRouter } from "vue-router";
+const router = useRouter();
+const TextData = [
+  {
+    id: 0,
+    title: "偏移x,y为0(文字发光)",
+    textShadow: "0 0 3 #00FF00",
+  },
+  {
+    id: 1,
+    title: "blur为0(不显示阴影)",
+    textShadow: "2 2 0 #00FF00",
+    /* 此处会报错，为正常情况。
+     * 当TextData数据中有blur为0（不显示阴影）时，为了测试会报“StyleFormatCheck.js?058c:447 textShadow: blur shadow above 0(now=2 2 0 #00FF00)”错误
+     */
   },
-  data() {
-    return {
-      TextData: [
-        {
-          id: 0,
-          title: "偏移x,y为0(文字发光)",
-          textShadow: "0 0 3 #00FF00",
-        },
-        {
-          id: 1,
-          title: "blur为0(不显示阴影)",
-          textShadow: "2 2 0 #00FF00",
-        },
-        {
-          id: 2,
-          title: "rgba格式颜色(半透明红)",
-          textShadow: "4 4 3 rgba(255,0,0,0.5)",
-        },
-        {
-          id: 3,
-          title: "#格式颜色(蓝色)",
-          textShadow: "4 4 0.5 #0000EF",
-        },
-      ],
-    };
+  {
+    id: 2,
+    title: "rgba格式颜色(半透明红)",
+    textShadow: "4 4 3 rgba(255,0,0,0.5)",
   },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
+  {
+    id: 3,
+    title: "#格式颜色(蓝色)",
+    textShadow: "4 4 0.5 #0000EF",
   },
-};
+]
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+}
 </script>
 
 <template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      v-for="item in TextData"
-      :key="item.id"
-      :style="{ left: 320 * item.id }"
-    >
+  <jsv-focus-block autoFocus :onAction="{
+    onKeyDown: onKeyDown,
+  }">
+    <div v-for="item in TextData" :key="item.id" :style="{ left: 320 * item.id }">
       <div>
-        <div
-          :style="{
-            width: 320,
-            height: 50,
-            fontSize: 25,
-            textAlign: 'center',
-            lineHeight: 50,
-            backgroundColor: item.id % 2 == 0 ? '#00ff00' : '#0000ff',
-          }"
-        >
+        <div :style="{
+          width: 320,
+          height: 50,
+          fontSize: 25,
+          textAlign: 'center',
+          lineHeight: 50,
+          backgroundColor: item.id % 2 == 0 ? '#00ff00' : '#0000ff',
+        }">
           {{ item.title }}
         </div>
-        <JsvTextBox
-          :verticalAlign="'middle'"
-          :style="{
-            top: 50,
-            width: 320,
-            height: 70,
-            textShadow: item.textShadow,
-            backgroundColor: item.id % 2 == 0 ? '#ffffee' : '#ffff10',
-            fontSize: 35,
-            textAlign: 'center',
-            lineHeight: 40,
-          }"
-        >
+        <JsvTextBox :verticalAlign="'middle'" :style="{
+          top: 50,
+          width: 320,
+          height: 70,
+          textShadow: item.textShadow,
+          backgroundColor: item.id % 2 == 0 ? '#ffffee' : '#ffff10',
+          fontSize: 35,
+          textAlign: 'center',
+          lineHeight: 40,
+        }">
           文字阴影
         </JsvTextBox>
       </div>