@shijiu/jsview-vue-samples 1.9.747

package/Input/InputPanel.vue

@@ -0,0 +1,131 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-01-25 10:33:07
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-02 13:44:41
+ * @Description: file content
+-->
+<script>
+import FullKeyboard from "./FullKeyboard.vue";
+import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
+import { ref, shallowRef } from "vue";
+
+const blurColor = "#AAAAAA";
+const focusColor = "#FFFF00";
+
+export default {
+  components: {
+    FullKeyboard,
+    JsvInput,
+  },
+  props: {
+    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() {
+      console.log("testtest 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;
+    },
+  },
+};
+</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"
+    />
+
+    <div :style="{ top: 100 }">
+      <full-keyboard
+        :name="`${this.name}/keyboard`"
+        :onClick="_keyboardOnClick"
+        :onEdge="_keyboardOnEdge"
+      />
+    </div>
+  </jsv-focus-block>
+</template>

package/Input/KeyboardItem.vue

@@ -0,0 +1,58 @@
+<script>
+export default {
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+    onClick: Function,
+  },
+  data() {
+    return {
+      focused: false,
+    };
+  },
+  computed: {
+    style() {
+      return {
+        width: this.data.width,
+        height: this.data.height,
+        fontSize: 20,
+        textAlign: "center",
+        lineHeight: this.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);
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="focused"
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundColor: '#00FF00',
+    }"
+  />
+  <div ref="element" :style="style">
+    {{ data.content }}
+  </div>
+</template>

package/LongImage/App.vue

@@ -0,0 +1,80 @@
+<!--
+ *
+ * 【界面概述】
+ * 带下拉条的长图片展示样例
+ *
+ * 【控件介绍】
+ * SimpleWidget：见simpleMetrowidget
+ *
+ * 【技巧说明】
+ * Q: 如何让图片的高度自适应？
+ * A: 使用img元素，并且style中高度不设置即可
+ *    通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
+ *
+ * Q: 如何知道图片加载完成？
+ * A: 为img标签追加OnLoad回调函数来接收图片加载完成的消息
+ *
+ -->
+
+<script setup>
+import LongImageScroll from "./LongImageScroll.vue";
+import Button from "./Button.vue";
+import longImageSource from "./assets/1280x7200.jpg";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+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
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 100,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      可加载长或宽超过2048px的图片
+    </div>
+    <div :style="{ left: 100, top: 100 }">
+      <LongImageScroll
+        :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
+        :imageSrc="longImageSource"
+        :scrollBlockStyle="{
+          width: 10,
+          height: 30,
+          backgroundColor: '#555555',
+        }"
+        :scrollStyle="{
+          left: 1005,
+          width: 10,
+          height: 500,
+          backgroundColor: '#DDDDDD',
+        }"
+        :step="60"
+      />
+      <div :style="{ left: 400, top: 550 }">
+        <Button></Button>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>

package/LongImage/Button.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-08 15:18:02
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 17:47:25
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef } from "vue";
+import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
+import ButtonItem from "./ButtonItem.vue";
+
+const focusHub = useFocusHub();
+const data = [
+  {
+    width: 100,
+    height: 50,
+    marginRight: 100,
+    content: "同意",
+  },
+  {
+    width: 100,
+    height: 50,
+    content: "取消",
+  },
+];
+
+const measures = (item) => {
+  return item;
+};
+
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus("longImageScroll");
+  }
+};
+</script>
+
+<template>
+  <metro-widget
+    name="button"
+    :width="500"
+    :height="50"
+    :data="data"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <button-item
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+      />
+    </template>
+  </metro-widget>
+</template>

package/LongImage/ButtonItem.vue

@@ -0,0 +1,44 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-08 15:05:00
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 17:46:39
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+const focused = ref(false);
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClick = () => {};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: props.data.width,
+      height: props.data.height,
+      fontSize: 30,
+      backgroundColor: focused ? '#DD8800' : '#BBBBAA',
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/LongImage/LongImageScroll.vue

@@ -0,0 +1,92 @@
+<script setup>
+import Scroll from "./Scroll.vue";
+import { ref, shallowRef, onMounted } from "vue";
+import { useFocusHub } from "jsview";
+
+const props = defineProps({
+  step: Number,
+  style: Object,
+  scrollStyle: Object,
+  scrollBlockStyle: Object,
+  imageSrc: String,
+});
+
+const focusHub = useFocusHub();
+const element = shallowRef(null);
+const scrollY = ref(0);
+const textY = ref(0);
+const onAction = {
+  onKeyDown: (ev) => {
+    const valid =
+      element.value &&
+      element.value.clientHeight &&
+      element.value.clientHeight > props.style.height;
+    // let keyUsed = true;
+    if (valid) {
+      let text_y;
+      switch (ev.keyCode) {
+        case 38:
+          if (textY.value !== 0) {
+            text_y =
+              textY.value + props.step >= 0 ? 0 : textY.value + props.step;
+            (textY.value = text_y),
+              (scrollY.value =
+                (-text_y / (element.value.clientHeight - props.style.height)) *
+                (props.scrollStyle.height - props.scrollBlockStyle.height));
+          }
+          break;
+        case 40:
+          if (textY.value !== props.style.height - element.value.clientHeight) {
+            text_y =
+              textY.value - props.step <=
+              props.style.height - element.value.clientHeight
+                ? props.style.height - element.value.clientHeight
+                : textY.value - props.step;
+            (textY.value = text_y),
+              (scrollY.value =
+                (-text_y / (element.value.clientHeight - props.style.height)) *
+                (props.scrollStyle.height - props.scrollBlockStyle.height));
+          } else {
+            focusHub.setFocus("button");
+          }
+          break;
+      }
+    }
+  },
+  onFocus: () => {
+    console.log("LongImageScroll getFocus");
+  },
+  onBlur: () => {
+    console.log("LongImageScroll loseFocus");
+  },
+};
+
+const onLoad = () => {
+  // 图片加载完成的回调
+  console.log("Image loaded!");
+};
+
+onMounted(() => {
+  focusHub.setFocus("longImageScroll");
+});
+</script>
+
+
+<template>
+  <jsv-focus-block name="longImageScroll" :onAction="onAction">
+    <div :style="{ overflow: 'hidden', ...style }">
+      <img
+        alt=""
+        ref="element"
+        :src="imageSrc"
+        :style="{ top: textY, width: style.width }"
+        :onLoad="onLoad"
+      />
+    </div>
+    <Scroll
+      :top="scrollY"
+      :scrollStyle="scrollStyle"
+      :scrollBlockStyle="scrollBlockStyle"
+    />
+  </jsv-focus-block>
+</template>

package/LongImage/Scroll.vue

@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  scrollStyle: Object,
+  top: Number,
+  scrollBlockStyle: Object,
+});
+</script>
+<template>
+  <div :style="{ ...scrollStyle }">
+    <div :style="{ top: top }">
+      <div :style="{ ...scrollBlockStyle }"></div>
+    </div>
+  </div>
+</template>

package/LongText/App.vue

@@ -0,0 +1,96 @@
+<!--
+ * 【界面概述】
+ * 协议书的示例
+ *
+ * 【控件介绍】
+ * SimpleWidget：见simpleMetrowidget
+ *
+ * 【技巧说明】
+ * Q: 如何长文字div的高度自适应？
+ * A: 描画长文字的div的高度不设置即可
+ *    并通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
+ *
+ * Q: 长段文字如何换行？
+ * A: 若文字内容中需要折行，则需要把要显示内容放入字符串中，并加入'\n'来达到换行效果，例如：
+ *          <div>{"第一行
+ *          第二行"}</div>
+ *          =======需要改成=======
+ *          <div>{"第一行\n\
+ *          第二行"}</div>
+ *
+ * Q: 文字首行缩进如何做？
+ * A: 目前系统只支持通过空格进行首行缩进，行首加入期望的空格数量即可达到缩进，因为盒子字体库和PC不尽相同，
+ *    所以务必在盒子上实际测试缩进效果。
+ -->
+
+<script setup>
+import LongTextScroll from "./LongTextScroll.vue";
+import Button from "./Button.vue";
+import { jJsvRuntimeBridge } from "jsview";
+import { onMounted, ref, shallowRef } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div>
+      <div
+        :style="{
+          textAlign: 'center',
+          fontSize: '30px',
+          lineHeight: '50px',
+          color: '#ffffff',
+          left: 140,
+          top: 20,
+          width: 1000,
+          height: 50,
+          backgroundColor: 'rgba(27,38,151,0.8)',
+        }"
+      >
+        可展示篇幅超过一屏的文字
+      </div>
+      <div :style="{ left: 140, top: 100 }">
+        <LongTextScroll
+          :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
+          :textStyle="{ color: '#000000', fontSize: 20 }"
+          :scrollBlockStyle="{
+            width: 10,
+            height: 30,
+            backgroundColor: '#555555',
+          }"
+          :scrollStyle="{
+            left: 1005,
+            width: 10,
+            height: 500,
+            backgroundColor: '#DDDDDD',
+          }"
+          :step="20"
+        >
+        </LongTextScroll>
+        <div :style="{ left: 400, top: 550 }">
+          <Button />
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+

package/LongText/Button.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref, shallowRef } from "vue";
+import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
+import ButtonItem from "./ButtonItem.vue";
+
+const focusHub = useFocusHub();
+const data = [
+  {
+    width: 100,
+    height: 50,
+    marginRight: 100,
+    content: "同意",
+  },
+  {
+    width: 100,
+    height: 50,
+    content: "取消",
+  },
+];
+
+const measures = (item) => {
+  return item;
+};
+
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus("longTextScroll");
+  }
+};
+</script>
+
+<template>
+  <metro-widget
+    name="button"
+    :width="500"
+    :height="50"
+    :data="data"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <button-item
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+      />
+    </template>
+  </metro-widget>
+</template>

package/LongText/ButtonItem.vue

@@ -0,0 +1,44 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-08 15:05:00
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 17:45:44
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+const focused = ref(false);
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClick = () => {};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: props.data.width,
+      height: props.data.height,
+      fontSize: 30,
+      backgroundColor: focused ? '#DD8800' : '#BBBBAA',
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>