@shijiu/jsview-vue-samples 2.1.25 → 2.1.200

package/Marquee/App.vue

@@ -8,7 +8,7 @@
 <script setup>
 import { jJsvRuntimeBridge, JsvMarquee } from "jsview";
 import { useRouter } from "vue-router";
-import { onMounted } from "vue";
+import { onMounted, shallowRef } from "vue";
 import { longLongText, rtlLongLongText } from "./longText";
 
 const slideSpeed = 240;
@@ -21,17 +21,32 @@ const style = {
   fontSize: 50,
   color: "#000000",
 };
+const style2 = Object.assign({ textAlign: "center" }, style);
+const style3 = Object.assign({ textAlign: "end" }, style);
 const longText =
   "石室诗士施氏，嗜狮，誓食十狮。施氏时时适市视狮。十时，适十狮适市。是时，适施氏适市。施氏视是十狮，恃矢势，使是十狮逝世。氏拾是十狮尸，适石室。石室湿，氏使侍拭石室。石室拭，施氏始试食是十狮尸。食时，始识是十狮尸，实十石狮尸。试释是事。";
 const shortText = "测试文字";
-
+const littleLongText = "君不见，黄河之水天上来，奔流到海不复回。";
 const rtlText = 'ABC انجليزي "abc" سعر الملابس 180 ';
 
 const router = useRouter();
-
+const index = shallowRef(1);
+//响应式变化的文字
+let changeText = shallowRef("响应式文字");
+setInterval(() => {
+  if (changeText.value.length <= 20) {
+    changeText.value += changeText.value;
+  } else {
+    changeText.value = changeText.value.slice(0, 5);
+  }
+}, 5000);
 const _onKeyDown = (ev) => {
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
     router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  } else if (ev.keyCode == 37) {
+    index.value = --index.value > 1 ? index.value : 1;
+  } else if (ev.keyCode == 39) {
+    index.value = ++index.value < 4 ? index.value : 4;
   }
   return true;
 };
@@ -46,250 +61,763 @@ onMounted(() => {
       onKeyDown: _onKeyDown,
     }"
     :style="{
-      width: 1920,
-      height: 1080,
+      width: 1280,
+      height: 720,
       backgroundColor: '#007788',
     }"
   >
-    <div
-      :style="{
-        left: 50,
-        top: 50,
-        width: width,
-        height: height,
-        backgroundColor: '#FFFFFF',
-      }"
-    >
-      <jsv-marquee
-        :style="style"
-        :text="longText"
-        :slideSpeed="slideSpeed"
-        :forceSlide="false"
-      />
+    <div v-if="index == 1">
       <div
         :style="{
-          left: width + 20,
+          left: 50,
+          top: 50,
+          width: width,
           height: height,
-          color: '#ffffff',
-          fontSize: 50,
-          lineHeight: 50,
+          backgroundColor: '#FFFFFF',
         }"
       >
-        长文字滚动
+        <jsv-marquee
+          :style="style"
+          :text="longText"
+          :slideSpeed="slideSpeed"
+          :forceSlide="false"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          长文字滚动
+        </div>
       </div>
-    </div>
-    <div
-      :style="{
-        left: 50,
-        top: 130,
-        width: width,
-        height: height,
-        backgroundColor: '#FFFFFF',
-      }"
-    >
-      <jsv-marquee :style="style" :text="shortText" :forceSlide="false" />
       <div
         :style="{
-          left: width + 20,
+          left: 50,
+          top: 130,
+          width: width,
           height: height,
-          color: '#ffffff',
-          fontSize: 50,
-          lineHeight: 50,
+          backgroundColor: '#FFFFFF',
         }"
       >
-        短文字不滚动
+        <jsv-marquee
+          :style="style"
+          :text="littleLongText"
+          :forceSlide="false"
+          :slideSpeed="slideSpeed"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          略长文字滚动
+        </div>
       </div>
-    </div>
-    <div
-      :style="{
-        left: 50,
-        top: 210,
-        width: width,
-        height: height,
-        backgroundColor: '#FFFFFF',
-      }"
-    >
-      <jsv-marquee
-        :style="style"
-        :text="shortText"
-        :slideSpeed="slideSpeed"
-        :forceSlide="true"
-      />
       <div
         :style="{
-          left: width + 20,
+          left: 50,
+          top: 210,
+          width: width,
           height: height,
-          color: '#ffffff',
-          fontSize: 50,
-          lineHeight: 50,
+          backgroundColor: '#FFFFFF',
         }"
       >
-        短文字滚动
+        <jsv-marquee
+          :style="style"
+          :text="shortText"
+          :slideSpeed="slideSpeed"
+          :forceSlide="true"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          短文字滚动
+        </div>
       </div>
-    </div>
-    <div
-      :style="{
-        left: 50,
-        top: 290,
-        width: width,
-        height: height,
-        backgroundColor: '#FFFFFF',
-      }"
-    >
-      <jsv-marquee
+      <div
         :style="{
-          width,
-          height,
-          lineHeight: 70,
-          fontSize: 50,
-          color: '#000000',
-          direction: 'rtl',
+          left: 50,
+          top: 290,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
         }"
-        :text="rtlText"
-        :slideSpeed="slideSpeed"
-      />
+      >
+        <jsv-marquee
+          :style="{
+            width,
+            height,
+            lineHeight: 70,
+            fontSize: 50,
+            color: '#000000',
+            direction: 'rtl',
+          }"
+          :text="rtlText"
+          :slideSpeed="slideSpeed"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          rtl文字
+        </div>
+      </div>
       <div
         :style="{
-          left: width + 20,
+          left: 50,
+          top: 370,
+          width: width,
           height: height,
-          color: '#ffffff',
-          fontSize: 50,
-          lineHeight: 50,
+          backgroundColor: '#FFFFFF',
         }"
       >
-        rtl文字
+        <jsv-marquee
+          :style="{
+            width,
+            height,
+            lineHeight: 70,
+            fontSize: 50,
+            color: '#000000',
+            direction: 'rtl',
+          }"
+          text="انجليزي"
+          :slideSpeed="slideSpeed"
+          :forceSlide="true"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          rtl短文字滚动
+        </div>
       </div>
-    </div>
-    <div
-      :style="{
-        left: 50,
-        top: 370,
-        width: width,
-        height: height,
-        backgroundColor: '#FFFFFF',
-      }"
-    >
-      <jsv-marquee
+      <div
+        :style="{
+          left: 50,
+          top: 450,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee
+          :style="style"
+          :text="longLongText"
+          :slideSpeed="2000"
+          :forceSlide="false"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          超长文字
+        </div>
+      </div>
+      <div
         :style="{
-          width,
-          height,
-          lineHeight: 70,
-          fontSize: 50,
-          color: '#000000',
-          direction: 'rtl',
+          left: 50,
+          top: 530,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
         }"
-        text="انجليزي"
-        :slideSpeed="slideSpeed"
-        :forceSlide="true"
-      />
+      >
+        <jsv-marquee
+          :style="{
+            width,
+            height,
+            lineHeight: 70,
+            fontSize: 50,
+            color: '#000000',
+            direction: 'rtl',
+          }"
+          :text="rtlLongLongText"
+          :slideSpeed="2000"
+          :forceSlide="false"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          超长rtl文字
+        </div>
+      </div>
       <div
         :style="{
-          left: width + 20,
+          left: 50,
+          top: 610,
+          width: width,
           height: height,
-          color: '#ffffff',
-          fontSize: 50,
-          lineHeight: 50,
+          backgroundColor: '#FFFFFF',
         }"
       >
-        rtl短文字滚动
+        <jsv-marquee
+          :style="{
+            width,
+            height,
+            lineHeight: 70,
+            fontSize: 50,
+            color: '#000000',
+          }"
+          text="测试文字"
+          :forceSlide="true"
+          :slideSpeed="slideSpeed"
+          slideDirection="ets"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          反向滚动示例
+        </div>
       </div>
     </div>
 
-    <div
-      :style="{
-        left: 50,
-        top: 450,
-        width: width,
-        height: height,
-        backgroundColor: '#FFFFFF',
-      }"
-    >
-      <jsv-marquee
-        :style="style"
-        :text="longLongText"
-        :slideSpeed="2000"
-        :forceSlide="false"
-      />
+    <div v-if="index == 2">
+      <div
+        :style="{
+          left: 50,
+          top: 50,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee :style="style" :text="shortText" :forceSlide="false" />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          不滚动文字居左
+        </div>
+      </div>
+
+      <div
+        :style="{
+          left: 50,
+          top: 130,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee
+          :style="style2"
+          text="测试文字"
+          :slideSpeed="slideSpeed"
+          :forceSlide="false"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          不滚动文字居中
+        </div>
+      </div>
+      <div
+        :style="{
+          left: 50,
+          top: 210,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee :style="style3" text="测试文字" :forceSlide="false" />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          不滚动文字居右
+        </div>
+      </div>
+      <div
+        :style="{
+          left: 50,
+          top: 290,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee
+          :style="style2"
+          text="انجليزي"
+          :slideSpeed="slideSpeed"
+          :forceSlide="false"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          rtl文字不滚动居中
+        </div>
+      </div>
       <div
         :style="{
-          left: width + 20,
+          left: 50,
+          top: 370,
+          width: width,
           height: height,
-          color: '#ffffff',
-          fontSize: 50,
-          lineHeight: 50,
+          backgroundColor: '#FFFFFF',
         }"
       >
-        超长文字
+        <jsv-marquee
+          :style="style3"
+          text="انجليزي"
+          :slideSpeed="slideSpeed"
+          :forceSlide="false"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          rtl文字不滚动居左
+        </div>
+      </div>
+      <div
+        :style="{
+          left: 50,
+          top: 450,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee
+          :style="style"
+          text="انجليزي"
+          :slideSpeed="slideSpeed"
+          :forceSlide="false"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          rtl文字不滚动居右
+        </div>
       </div>
     </div>
 
-    <div
-      :style="{
-        left: 50,
-        top: 530,
-        width: width,
-        height: height,
-        backgroundColor: '#FFFFFF',
-      }"
-    >
-      <jsv-marquee
+    <div v-else-if="index == 3">
+      <div
         :style="{
-          width,
-          height,
-          lineHeight: 70,
-          fontSize: 50,
-          color: '#000000',
-          direction: 'rtl',
+          left: 50,
+          top: 50,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
         }"
-        :text="rtlLongLongText"
-        :slideSpeed="2000"
-        :forceSlide="false"
-      />
+      >
+        <jsv-marquee
+          :style="style"
+          :text="longText"
+          :slideSpeed="slideSpeed"
+          :forceSlide="false"
+          :textGap="300"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          长文字滚动间隔300
+        </div>
+      </div>
       <div
         :style="{
-          left: width + 20,
+          left: 50,
+          top: 130,
+          width: width,
           height: height,
-          color: '#ffffff',
-          fontSize: 50,
-          lineHeight: 50,
+          backgroundColor: '#FFFFFF',
         }"
       >
-        超长rtl文字
+        <jsv-marquee
+          :style="style"
+          :text="littleLongText"
+          :forceSlide="false"
+          :textGap="300"
+          :slideSpeed="slideSpeed"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          略长文字滚动间隔300
+        </div>
+      </div>
+      <div
+        :style="{
+          left: 50,
+          top: 210,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee
+          :style="style"
+          :text="shortText"
+          :slideSpeed="slideSpeed"
+          :forceSlide="true"
+          :textGap="width - 100"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          短文字滚动间隔500
+        </div>
+      </div>
+      <div
+        :style="{
+          left: 50,
+          top: 290,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee
+          :style="{
+            width,
+            height,
+            lineHeight: 70,
+            fontSize: 50,
+            color: '#000000',
+            direction: 'rtl',
+          }"
+          :text="rtlText"
+          :slideSpeed="slideSpeed"
+          :textGap="300"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          rtl文字间隔300
+        </div>
+      </div>
+      <div
+        :style="{
+          left: 50,
+          top: 370,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee
+          :style="{
+            width,
+            height,
+            lineHeight: 70,
+            fontSize: 50,
+            color: '#000000',
+            direction: 'rtl',
+          }"
+          text="انجليزي"
+          :slideSpeed="slideSpeed"
+          :forceSlide="true"
+          :textGap="width - 100"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          rtl短文字滚动间隔500
+        </div>
+      </div>
+      <div
+        :style="{
+          left: 50,
+          top: 450,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee
+          :style="style"
+          :text="longLongText"
+          :slideSpeed="2000"
+          :forceSlide="false"
+          :textGap="300"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          超长文字间隔300
+        </div>
+      </div>
+      <div
+        :style="{
+          left: 50,
+          top: 530,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee
+          :style="{
+            width,
+            height,
+            lineHeight: 70,
+            fontSize: 50,
+            color: '#000000',
+            direction: 'rtl',
+          }"
+          :text="rtlLongLongText"
+          :slideSpeed="2000"
+          :forceSlide="false"
+          :textGap="300"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          超长rtl文字间隔300
+        </div>
+      </div>
+      <div
+        :style="{
+          left: 50,
+          top: 610,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
+        }"
+      >
+        <jsv-marquee
+          :style="{
+            width,
+            height,
+            lineHeight: 70,
+            fontSize: 50,
+            color: '#000000',
+          }"
+          text="测试文字"
+          :forceSlide="true"
+          :slideSpeed="slideSpeed"
+          slideDirection="ets"
+          :textGap="width - 100"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          反向滚动示例间隔500
+        </div>
       </div>
     </div>
-    <div
-      :style="{
-        left: 50,
-        top: 610,
-        width: width,
-        height: height,
-        backgroundColor: '#FFFFFF',
-      }"
-    >
-      <jsv-marquee
+    <div v-else-if="index == 4">
+      <div
         :style="{
-          width,
-          height,
-          lineHeight: 70,
-          fontSize: 50,
-          color: '#000000',
+          left: 50,
+          top: 50,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF',
         }"
-        text="测试文字"
-        :forceSlide="true"
-        :slideSpeed="slideSpeed"
-        slideDirection="ets"
-      />
+      >
+        <jsv-marquee
+          :style="style"
+          text="انجليزي"
+          :slideSpeed="slideSpeed"
+          :forceSlide="true"
+          slideDirection="ets"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          rtl短文字反向
+        </div>
+      </div>
       <div
         :style="{
-          left: width + 20,
+          left: 50,
+          top: 130,
+          width: width,
           height: height,
-          color: '#ffffff',
-          fontSize: 50,
-          lineHeight: 50,
+          backgroundColor: '#FFFFFF',
         }"
       >
-        反向滚动示例
+        <jsv-marquee
+          :style="style"
+          :text="shortText"
+          :slideSpeed="slideSpeed"
+          :forceSlide="true"
+          :textGap="200"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          短文字滚动失败
+        </div>
       </div>
+      <div
+        :style="{
+          left: 50,
+          top: 210,
+          width: width,
+          height: height,
+          backgroundColor: '#FFFFFF'
+        }"
+      >
+        <jsv-marquee
+          :style="style"
+          :text="changeText"
+          :slideSpeed="slideSpeed"
+          :forceSlide="false"
+        />
+        <div
+          :style="{
+            left: width + 20,
+            height: height,
+            color: '#ffffff',
+            fontSize: 50,
+            lineHeight: 50,
+          }"
+        >
+          每五秒文字响应式变化
+        </div>
+      </div>
+    </div>
+    <div
+      :style="{
+        left: 1000,
+        top: 680,
+        width: 300,
+        height: 30,
+        lineHeight: 28,
+        fontSize: 30,
+        color: '#000000',
+      }"
+    >
+      {{ "左右键翻页 " + `${index}/4` }}
     </div>
   </jsv-focus-block>
 </template>