@shijiu/jsview-vue 0.9.246 → 0.9.254

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -1,197 +1,197 @@
-<script>
-import { Forge } from "../../dom/jsv-forge-define";
-import {
-  JsvStyleClass,
-  JsvTextStyleClass,
-  combinedStyles,
-} from "../JsViewVueTools/JsvStyleClass";
-export default {
-  props: {
-    text: {
-      type: String,
-      default: "",
-    },
-    layoutStyles: {
-      type: Array,
-      default: () => [this.sDefaultLayoutStyle],
-    },
-    fontStyles: {
-      type: Array,
-      default: () => [this.sDefaultFontStyle],
-    },
-    styleToken: String,
-    slideSpeed: {
-      // 60px per second
-      type: Number,
-      default: 60,
-    },
-    forceSlide: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      asyncTextLenTimer: -1,
-      rollTimeId: -1,
-      animationCount: 0,
-      LayoutStyle: null,
-      FontStyle: null,
-      FontStyleClass: null,
-      TokenProcessed: null,
-      sDefaultLayoutStyle: new JsvStyleClass({
-        left: 0,
-        top: 0,
-        width: 0,
-        height: 20,
-      }),
-      sDefaultFontStyle: new JsvTextStyleClass({
-        color: "rgba(255,255,255,1.0)",
-        fontSize: 10,
-        textAlign: "center",
-        lineHeight: "20px",
-      }),
-      sCommonFontStyle: new JsvTextStyleClass({
-        whiteSpace: "nowrap",
-      }),
-    };
-  },
-  methods: {
-    _asyncStartSlider() {
-      // 清理之前的Slider处理
-      this._resetSlider();
-
-      // 稍进行延迟，以等待JsView的native端描绘文字并回传文字宽度
-      if (this.asyncTextLenTimer < 0) {
-        this.asyncTextLenTimer = setTimeout(() => {
-          if (
-            this.forceSlide ||
-            this.$refs.textRef.clientWidth > this.LayoutStyle.width
-          ) {
-            this._slideNextStep();
-          }
-          this.asyncTextLenTimer = -1;
-        }, 500);
-      }
-    },
-    _resetSlider() {
-      if (this.rollTimeId >= 0) {
-        clearTimeout(this.rollTimeId);
-        this.rollTimeId = -1;
-      }
-      this.animationCount = 0;
-      this.$refs.sliderRef?.jsvMaskView?.StopAnimation();
-    },
-    _slideNextStep() {
-      const text_width = this.$refs.textRef.clientWidth;
-      if (this.animationCount % 2 === 0) {
-        // 文字从原始位置，向左移动出屏幕(每次完整移动，停顿1秒)
-        this.rollTimeId = setTimeout(() => {
-          this.rollTimeId = -1;
-          const anim = new Forge.TranslateFrameAnimation(
-            0,
-            -text_width,
-            this.$props.slideSpeed,
-            true,
-            0,
-            0
-          );
-          anim.SetAnimationListener(
-            new Forge.AnimationListener(
-              null,
-              (ended) => {
-                if (ended) {
-                  // 正常结束，非Cancel时，进行下一个动作
-                  this._slideNextStep();
-                }
-              },
-              null
-            )
-          );
-          anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
-          this.$refs.sliderRef.jsvMaskView.StartAnimation(anim);
-          this.animationCount += 1;
-        }, 1000);
-      } else {
-        // 文字从右边屏幕外部，移动回屏幕中的文字原始位置
-        const anim = new Forge.TranslateFrameAnimation(
-          this.LayoutStyle.width,
-          0,
-          this.$props.slideSpeed,
-          true,
-          this.LayoutStyle.width,
-          0
-        );
-        anim.SetAnimationListener(
-          new Forge.AnimationListener(
-            null,
-            (ended) => {
-              if (ended) {
-                // 正常结束，非Cancel时，进行下一个动作
-                this._slideNextStep();
-              }
-            },
-            null
-          )
-        );
-        this.$refs.sliderRef.jsvMaskView.StartAnimation(anim);
-        this.animationCount += 1;
-      }
-    },
-    _AnalyzeStyleChange() {
-      if (this.$props.styleToken !== this.TokenProcessed) {
-        // Token变化时，重新解析style array
-        const layout_set = combinedStyles(this.$props.layoutStyles, true);
-        const font_set = combinedStyles([
-          ...this.$props.fontStyles,
-          this.sCommonFontStyle,
-        ]);
-        this.LayoutStyle = layout_set.combinedStyle;
-        this.FontStyle = font_set.combinedStyle;
-        this.FontStyleClass = font_set.combinedClass;
-        if (this.FontStyleClass.length === 0) {
-          this.FontStyleClass = null;
-        }
-        this.TokenProcessed = this.$props.styleToken;
-      }
-    },
-  },
-  created() {
-    this._AnalyzeStyleChange();
-  },
-  mounted() {
-    this._asyncStartSlider();
-  },
-  unmounted() {
-    // 清理所有异步处理，并停止Slider动作
-    if (this.asyncTextLenTimer >= 0) {
-      clearTimeout(this.asyncTextLenTimer);
-      this.asyncTextLenTimer = -1;
-    }
-    this._resetSlider();
-  },
-};
-</script>
-
-<template>
-  <div :style="{ ...this.LayoutStyle, overflow: 'hidden' }">
-    <div
-      ref="sliderRef"
-      :style="{
-        left: 0,
-        top: 0,
-        width: this.LayoutStyle.width,
-        height: this.LayoutStyle.height,
-      }"
-    >
-      <div
-        ref="textRef"
-        :className="this.FontStyleClass"
-        :style="{ ...this.FontStyle, height: this.LayoutStyle.height }"
-        :jsv_text_align_minwidth="this.LayoutStyle.width"
-      >
-        {{ this.$props.text }}
-      </div>
-    </div>
-  </div>
+<script>
+import { Forge } from "../../dom/jsv-forge-define";
+import {
+  JsvStyleClass,
+  JsvTextStyleClass,
+  combinedStyles,
+} from "../JsViewVueTools/JsvStyleClass";
+export default {
+  props: {
+    text: {
+      type: String,
+      default: "",
+    },
+    layoutStyles: {
+      type: Array,
+      default: () => [this.sDefaultLayoutStyle],
+    },
+    fontStyles: {
+      type: Array,
+      default: () => [this.sDefaultFontStyle],
+    },
+    styleToken: String,
+    slideSpeed: {
+      // 60px per second
+      type: Number,
+      default: 60,
+    },
+    forceSlide: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      asyncTextLenTimer: -1,
+      rollTimeId: -1,
+      animationCount: 0,
+      LayoutStyle: null,
+      FontStyle: null,
+      FontStyleClass: null,
+      TokenProcessed: null,
+      sDefaultLayoutStyle: new JsvStyleClass({
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 20,
+      }),
+      sDefaultFontStyle: new JsvTextStyleClass({
+        color: "rgba(255,255,255,1.0)",
+        fontSize: 10,
+        textAlign: "center",
+        lineHeight: "20px",
+      }),
+      sCommonFontStyle: new JsvTextStyleClass({
+        whiteSpace: "nowrap",
+      }),
+    };
+  },
+  methods: {
+    _asyncStartSlider() {
+      // 清理之前的Slider处理
+      this._resetSlider();
+
+      // 稍进行延迟，以等待JsView的native端描绘文字并回传文字宽度
+      if (this.asyncTextLenTimer < 0) {
+        this.asyncTextLenTimer = setTimeout(() => {
+          if (
+            this.forceSlide ||
+            this.$refs.textRef.clientWidth > this.LayoutStyle.width
+          ) {
+            this._slideNextStep();
+          }
+          this.asyncTextLenTimer = -1;
+        }, 500);
+      }
+    },
+    _resetSlider() {
+      if (this.rollTimeId >= 0) {
+        clearTimeout(this.rollTimeId);
+        this.rollTimeId = -1;
+      }
+      this.animationCount = 0;
+      this.$refs.sliderRef?.jsvMaskView?.StopAnimation();
+    },
+    _slideNextStep() {
+      const text_width = this.$refs.textRef.clientWidth;
+      if (this.animationCount % 2 === 0) {
+        // 文字从原始位置，向左移动出屏幕(每次完整移动，停顿1秒)
+        this.rollTimeId = setTimeout(() => {
+          this.rollTimeId = -1;
+          const anim = new Forge.TranslateFrameAnimation(
+            0,
+            -text_width,
+            this.$props.slideSpeed,
+            true,
+            0,
+            0
+          );
+          anim.SetAnimationListener(
+            new Forge.AnimationListener(
+              null,
+              (ended) => {
+                if (ended) {
+                  // 正常结束，非Cancel时，进行下一个动作
+                  this._slideNextStep();
+                }
+              },
+              null
+            )
+          );
+          anim.Enable(Forge.AnimationEnable.ReleaseAfterEndCallback);
+          this.$refs.sliderRef.jsvMaskView.StartAnimation(anim);
+          this.animationCount += 1;
+        }, 1000);
+      } else {
+        // 文字从右边屏幕外部，移动回屏幕中的文字原始位置
+        const anim = new Forge.TranslateFrameAnimation(
+          this.LayoutStyle.width,
+          0,
+          this.$props.slideSpeed,
+          true,
+          this.LayoutStyle.width,
+          0
+        );
+        anim.SetAnimationListener(
+          new Forge.AnimationListener(
+            null,
+            (ended) => {
+              if (ended) {
+                // 正常结束，非Cancel时，进行下一个动作
+                this._slideNextStep();
+              }
+            },
+            null
+          )
+        );
+        this.$refs.sliderRef.jsvMaskView.StartAnimation(anim);
+        this.animationCount += 1;
+      }
+    },
+    _AnalyzeStyleChange() {
+      if (this.$props.styleToken !== this.TokenProcessed) {
+        // Token变化时，重新解析style array
+        const layout_set = combinedStyles(this.$props.layoutStyles, true);
+        const font_set = combinedStyles([
+          ...this.$props.fontStyles,
+          this.sCommonFontStyle,
+        ]);
+        this.LayoutStyle = layout_set.combinedStyle;
+        this.FontStyle = font_set.combinedStyle;
+        this.FontStyleClass = font_set.combinedClass;
+        if (this.FontStyleClass.length === 0) {
+          this.FontStyleClass = null;
+        }
+        this.TokenProcessed = this.$props.styleToken;
+      }
+    },
+  },
+  created() {
+    this._AnalyzeStyleChange();
+  },
+  mounted() {
+    this._asyncStartSlider();
+  },
+  unmounted() {
+    // 清理所有异步处理，并停止Slider动作
+    if (this.asyncTextLenTimer >= 0) {
+      clearTimeout(this.asyncTextLenTimer);
+      this.asyncTextLenTimer = -1;
+    }
+    this._resetSlider();
+  },
+};
+</script>
+
+<template>
+  <div :style="{ ...this.LayoutStyle, overflow: 'hidden' }">
+    <div
+      ref="sliderRef"
+      :style="{
+        left: 0,
+        top: 0,
+        width: this.LayoutStyle.width,
+        height: this.LayoutStyle.height,
+      }"
+    >
+      <div
+        ref="textRef"
+        :className="this.FontStyleClass"
+        :style="{ ...this.FontStyle, height: this.LayoutStyle.height }"
+        :jsv_text_align_minwidth="this.LayoutStyle.width"
+      >
+        {{ this.$props.text }}
+      </div>
+    </div>
+  </div>
 </template>

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -1,76 +1,76 @@
-<!--
- * 【模块 export 内容】
- * JsvNinePatch：Vue高阶组件，.9图展示控件，该控件的原图要求为正方形，延展后可为长方形
- *      props说明:
- *          style       {Object}    同div的Style，通过width/height来控制.9图片延展后的显示尺寸，另外通过top/left控制坐标
- *          imageUrl    {String}    (必填)显示图片的加载地址
- *          imageWidth  {int}       (必填)原图信息: 原图的宽度(由于正方形,宽高相同)
- *          contentWidth {int}      (必填)原图信息: 原图内用来装内容区域的宽度(由于正方形,宽高相同)
- *          borderOutset {int}      在目标显示中，边框的显示宽度，默认值为0(由于正方形,宽高相同)，
- *                                  边框显示在目标区域的外缘，而非内缘
- *          animTime    {int}       (必填)缩放动画的时长(单位毫秒)
- *          waitForInit {boolean}  尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
--->
-
-<script>
-export default {
-  name: "JsvNinePatch",
-  props: {
-    style: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    top: { type: Number, default: 0 },
-    left: { type: Number, default: 0 },
-    borderOutset: { type: Number, default: 0 },
-    waitForInit: { type: Boolean, default: true },
-
-    imageUrl: String,
-    imageWidth: Number,
-    contentWidth: Number,
-    animTime: Number,
-  },
-
-  methods: {
-    isReady() {
-      if (!this.waitForInit) {
-        return true;
-      }
-
-      return this.style && this.style.width !== 0 && this.style.height !== 0;
-    },
-    getTransition() {
-      let transition = "";
-      if (this.animTime) {
-        transition = `left ${this.animTime}s, top ${this.animTime}s, width ${this.animTime}s, height ${this.animTime}s`;
-      }
-
-      return transition;
-    },
-  },
-
-  data() {
-    return {
-      sliceWidth: Math.ceil((this.imageWidth - this.contentWidth) / 2),
-    };
-  },
-};
-</script>
-
-<template>
-  <div
-    v-if="isReady"
-    :style="{
-      ...style,
-      transition: getTransition(),
-      borderImage: `url(${imageUrl}) ${sliceWidth} fill`,
-      borderImageWidth: `${sliceWidth}px`,
-      borderImageOutset: `${borderOutset}px`,
-    }"
-  />
-</template>
-
-<style scoped>
-</style>
+<!--
+ * 【模块 export 内容】
+ * JsvNinePatch：Vue高阶组件，.9图展示控件，该控件的原图要求为正方形，延展后可为长方形
+ *      props说明:
+ *          style       {Object}    同div的Style，通过width/height来控制.9图片延展后的显示尺寸，另外通过top/left控制坐标
+ *          imageUrl    {String}    (必填)显示图片的加载地址
+ *          imageWidth  {int}       (必填)原图信息: 原图的宽度(由于正方形,宽高相同)
+ *          contentWidth {int}      (必填)原图信息: 原图内用来装内容区域的宽度(由于正方形,宽高相同)
+ *          borderOutset {int}      在目标显示中，边框的显示宽度，默认值为0(由于正方形,宽高相同)，
+ *                                  边框显示在目标区域的外缘，而非内缘
+ *          animTime    {int}       (必填)缩放动画的时长(单位毫秒)
+ *          waitForInit {boolean}  尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
+-->
+
+<script>
+export default {
+  name: "JsvNinePatch",
+  props: {
+    style: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    top: { type: Number, default: 0 },
+    left: { type: Number, default: 0 },
+    borderOutset: { type: Number, default: 0 },
+    waitForInit: { type: Boolean, default: true },
+
+    imageUrl: String,
+    imageWidth: Number,
+    contentWidth: Number,
+    animTime: Number,
+  },
+
+  methods: {
+    isReady() {
+      if (!this.waitForInit) {
+        return true;
+      }
+
+      return this.style && this.style.width !== 0 && this.style.height !== 0;
+    },
+    getTransition() {
+      let transition = "";
+      if (this.animTime) {
+        transition = `left ${this.animTime}s, top ${this.animTime}s, width ${this.animTime}s, height ${this.animTime}s`;
+      }
+
+      return transition;
+    },
+  },
+
+  data() {
+    return {
+      sliceWidth: Math.ceil((this.imageWidth - this.contentWidth) / 2),
+    };
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="isReady"
+    :style="{
+      ...style,
+      transition: getTransition(),
+      borderImage: `url(${imageUrl}) ${sliceWidth} fill`,
+      borderImageWidth: `${sliceWidth}px`,
+      borderImageOutset: `${borderOutset}px`,
+    }"
+  />
+</template>
+
+<style scoped>
+</style>