@shijiu/jsview-vue 0.9.272 → 0.9.277

package/samples/Basic/components/anim/AnimKeyframeComposite.vue

@@ -11,22 +11,27 @@
 </div>
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
-const titleStyle = {
-    width: 100,
-    height: 20,
-    textAlign: 'center',
-    lineHeight: 20
-};
-
-const itemStyle = {
-    top: 20,
-    width: 50,
-    height: 50,
-    backgroundColor: 'rgba(255, 0, 0, 1)'
-};
-
+<script>
+export default {
+  computed: {
+    titleStyle() {
+      return {
+        width: 100,
+        height: 20,
+        textAlign: 'center',
+        lineHeight: 20
+      }
+    },
+    itemStyle() {
+      return {
+        top: 20,
+        width: 50,
+        height: 50,
+        backgroundColor: 'rgba(255, 0, 0, 1)'
+      }
+    }
+  }
+}
 </script>
 
 <style>

package/samples/Basic/components/anim/AnimTransition.vue

@@ -41,71 +41,75 @@
 </div>
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
-import { defineProps, onMounted, onBeforeUnmount } from "vue";
-
-
-const props = defineProps({
-  timeCount: Number,
-})
-
-var state = {
-    transform: null,
-    transformOrigin: null,
-    transformTranslate: null,
-    transformRotate: null,
-    transformScale: null,
-};
-
-var timerId = -1;
-
-onMounted(() => {
-    changeState();
-    timerId = setInterval(() => {
-      changeState();
-    }, 6000);
-});
-
-onBeforeUnmount(() => {
-    if (timerId >= 0) {
-      window.clearInterval(timerId);
+<script>
+export default {
+  props: {
+    timeCount: Number,
+  },
+  computed: {
+    titleStyle() {
+      return {
+        width: 100,
+        height: 20,
+        textAlign: 'left',
+        lineHeight: 20
+      }
+    },
+    itemStyle() {
+      return {
+        top: 20,
+        width: 50, height: 50,
+        whiteSpace: 'pre-wrap',
+        backgroundColor: 'rgba(255, 0, 0, 1)'
+      }
     }
-    timerId = -1;
-});
-
-function changeState() {
-    setTimeout(() => {
+  },
+  methods: {
+    changeState() {
+      setTimeout(() => {
         // 状态变更
-        state.transform = 'translate3d(80px,0px,0) scale3d(2,2,1.0) rotate3d(0, 0, 1, 360deg)';
-        state.transformOrigin = 'center center';
-        state.transformScale = 'scale3d(0.2,0.2,1.0)';
-        state.transformRotate = 'rotate3d(0, 0, 1.0, 360deg)';
-        state.transformTranslate = 'translate3d(180px,0px,0)';
+        this.state.transform = 'translate3d(80px,0px,0) scale3d(2,2,1.0) rotate3d(0, 0, 1, 360deg)';
+        this.state.transformOrigin = 'center center';
+        this.state.transformScale = 'scale3d(0.2,0.2,1.0)';
+        this.state.transformRotate = 'rotate3d(0, 0, 1.0, 360deg)';
+        this.state.transformTranslate = 'translate3d(180px,0px,0)';
         // 状态变更
         setTimeout(() => {
-            state.transform = 'translate3d(30px,0px,0) scale3d(0.2,0.2,1.0) rotate3d(0, 0, 1, -360deg)';
-            state.transformOrigin = 'center center';
-            state.transformScale = 'scale3d(1.2,1.2,1.0)';
-            state.transformRotate = 'rotate3d(0, 0, 1.0, -360deg)';
-            state.transformTranslate = 'translate3d(-80px,0px,0)';
+          this.state.transform = 'translate3d(30px,0px,0) scale3d(0.2,0.2,1.0) rotate3d(0, 0, 1, -360deg)';
+          this.state.transformOrigin = 'center center';
+          this.state.transformScale = 'scale3d(1.2,1.2,1.0)';
+          this.state.transformRotate = 'rotate3d(0, 0, 1.0, -360deg)';
+          this.state.transformTranslate = 'translate3d(-80px,0px,0)';
         }, 3000);
-    }, 3000);
-}
-
-const titleStyle = {
-    width: 100,
-    height: 20,
-    textAlign: 'left',
-    lineHeight: 20
-};
+      }, 3000);
+    }
+  },
+  data() {
+    return {
+      timerId: -1,
+      state: {
+        transform: null,
+        transformOrigin: null,
+        transformTranslate: null,
+        transformRotate: null,
+        transformScale: null,
+      }
+    }
+  },
+  mounted() {
+    this.changeState();
+    this.timerId = setInterval(() => {
+      this.changeState();
+    }, 6000);
+  },
+  beforeUnmount() {
+    if (this.timerId >= 0) {
+      window.clearInterval(this.timerId);
+    }
+    this.timerId = -1;
+  }
 
-const itemStyle = {
-    top: 20,
-    width: 50, height: 50,
-    whiteSpace: 'pre-wrap',
-    backgroundColor: 'rgba(255, 0, 0, 1)'
-};
+}
 </script>
 
 <style>

package/samples/Basic/components/div/DivBackground.vue

@@ -5,9 +5,16 @@
 </div>;
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
+<script>
 import iconImgPath from '../../assets/icon.png';
+
+export default {
+    computed: {
+        iconImgPath() {
+            return iconImgPath
+        }
+    }
+}
 </script>
 
 <style>

package/samples/Basic/components/div/DivClip.vue

@@ -60,19 +60,32 @@
 </div>
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
+<script>
 import testImgPath from '../../assets/test.jpg';
 
-const titleHeight = 16;
-const imageSize = {
-    width: 80,
-    height: 64,
-};
-const clipSize = {
-    width: 50,
-    height: 40,
-};
+export default {
+    computed: {
+        testImgPath() {
+            return testImgPath;
+        },
+        titleHeight() {
+            return 16;
+        },
+        imageSize() {
+            return {
+                width: 80,
+                height: 64,
+            }
+        },
+        clipSize() {
+            return {
+                width: 50,
+                height: 40,
+            }
+        }
+    }
+}
+
 </script>
 
 

package/samples/Basic/components/div/DivCssVar.vue

@@ -10,34 +10,43 @@
     </div>
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
-import { reactive, onMounted, onBeforeUnmount } from "vue";
+<script>
+import { reactive } from "vue";
 
-const state = reactive({
-    foreColor: '#FF0000',
-    backColor: '#00FF00',
-})
-
-var timerId = -1;
-onMounted(() => {
-    timerId = setInterval(() => {
-        if(state.foreColor == '#00FF00') {
-            state.foreColor = '#FF0000'
-            state.backColor = '#00FF00'
-        } else {
-            state.foreColor = '#00FF00'
-            state.backColor = '#FF0000'
+export default {
+    computed: {
+        iconImgPath() {
+            return iconImgPath
         }
-    }, 3000);
-});
-
-onBeforeUnmount(() => {
-    if (timerId >= 0) {
-      window.clearInterval(timerId);
+    },
+    data() {
+        return {
+            timerId: -1,
+            state: reactive({
+                foreColor: '#FF0000',
+                backColor: '#00FF00',
+            }),
+        }
+    },
+    mounted() {
+        this.timerId = setInterval(() => {
+            if(this.state.foreColor == '#00FF00') {
+                this.state.foreColor = '#FF0000'
+                this.state.backColor = '#00FF00'
+            } else {
+                this.state.foreColor = '#00FF00'
+                this.state.backColor = '#FF0000'
+            }
+        }, 3000);
+    },
+    beforeUnmount() {
+        if (this.timerId >= 0) {
+            window.clearInterval(this.timerId);
+        }
+        this.timerId = -1;
     }
-    timerId = -1;
-});
+}
+
 </script>
 
 <style scoped>

package/samples/Basic/components/div/DivGroup1.vue

@@ -12,22 +12,30 @@
     </div>
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
-import { defineProps } from "vue";
+<script>
 import ContentBlock from '../ContentBlock';
 import DivBackground from './DivBackground';
 import DivClip from './DivClip';
 import DivLayout from './DivLayout';
 
-const name = 'DivGroup1';
-const props = defineProps({
-  contentClass: String,
-  itemSides: Object 
-})
-
-const contentBlockProps = {
-    colIndex: 0,
-    itemSides: props.itemSides
-};
+export default {
+    props: {
+        contentClass: String,
+        itemSides: Object 
+    },
+    components: {
+        ContentBlock,
+        DivBackground,
+        DivClip,
+        DivLayout,
+    },
+    computed: {
+        contentBlockProps() {
+            return {
+                colIndex: 0,
+                itemSides: this.itemSides
+            }
+        }
+    }
+}
 </script>

package/samples/Basic/components/div/DivGroup2.vue

@@ -12,24 +12,32 @@
     </div>
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
-import { defineProps } from "vue";
+<script>
 import ContentBlock from '../ContentBlock';
 import DivCssScoped from './DivCssScoped';
 import DivCssVar from './DivCssVar';
 import DivRadius from './DivRadius';
 
-const name = 'DivGroup2';
-const props = defineProps({
-  contentClass: String,
-  itemSides: Object 
-})
-
-const contentBlockProps = {
-    colIndex: 0,
-    itemSides: props.itemSides
-};
+export default {
+    props: {
+        contentClass: String,
+        itemSides: Object 
+    },
+    components: {
+        ContentBlock,
+        DivCssScoped,
+        DivCssVar,
+        DivRadius,
+    },
+    computed: {
+        contentBlockProps() {
+            return {
+                colIndex: 0,
+                itemSides: this.itemSides
+            }
+        }
+    }
+}
 </script>
 
 <style scoped>

package/samples/Basic/components/div/DivRadius.vue

@@ -27,19 +27,28 @@
         borderRadius: '0 10px 20px 30px'}">
         各角不同
     </div>
-</div>;
+</div>
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
+<script>
 import iconImgPath from '../../assets/icon.png';
 
-const blockSize = {
-    width: 65,
-    height: 65,
-};
-
-const gap = 5;
+export default {
+    computed: {
+        iconImgPath() {
+            return iconImgPath
+        },
+        blockSize() {
+            return {
+                width: 65,
+                height: 65,
+            }
+        },
+        gap() {
+            return 5;
+        }
+    }
+}
 </script>
 
 <style>

package/samples/Basic/components/text/TextAlign.vue

@@ -28,19 +28,27 @@
 </div>
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
-const blockSize = {
-    width: 90,
-    height: 40,
-};
+<script>
+export default {
+    computed: {
+        blockSize() {
+            return {
+                width: 90,
+                height: 40,
+            }
+        },
+        blockStyle() {
+            return {
+                width: this.blockSize.width,
+                height: this.blockSize.height,
+                backgroundColor: 'rgba(255, 255, 0, 0.5)',
+                color: 'rgba(255, 0, 0, 1)',
+            }
+        }
+    }
+}
 
-const blockStyle = {
-    width: blockSize.width,
-    height: blockSize.height,
-    backgroundColor: 'rgba(255, 255, 0, 0.5)',
-    color: 'rgba(255, 0, 0, 1)',
-};
+/* eslint-disable no-unused-vars */
 </script>
 
 <style>

package/samples/Basic/components/text/TextFontStyle.vue

@@ -43,14 +43,21 @@
 </div>
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
-const gap = 5;
+<script>
+export default {
+    computed: {
+        gap() {
+            return 5;
+        },
 
-const blockStyle = {
-    width: 70,
-    height: 20
-};
+        blockStyle() {
+            return {
+                width: 70,
+                height: 20
+            }
+        }
+    }
+}
 </script>
 
 <style>

package/samples/Basic/components/text/TextGroup.vue

@@ -12,21 +12,30 @@
     </div>
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
-import { defineProps } from "vue";
+<script>
 import ContentBlock from '../ContentBlock';
 import TextAlign from './TextAlign';
 import TextFontStyle from './TextFontStyle';
 import TextOverflow from './TextOverflow';
 
-const name = 'DivGroup2';
-const props = defineProps({
-  contentClass: String,
-  itemSides: Object 
-})
-const contentBlockProps = {
-    colIndex: 0,
-    itemSides: props.itemSides
-};
+export default {
+    props: {
+        contentClass: String,
+        itemSides: Object 
+    },
+    components: {
+        ContentBlock,
+        TextAlign,
+        TextFontStyle,
+        TextOverflow
+    },
+    computed: {
+        contentBlockProps() {
+            return {
+                colIndex: 0,
+                itemSides: this.itemSides
+            }
+        }
+    }
+}
 </script>

package/samples/Basic/components/text/TextOverflow.vue

@@ -50,26 +50,34 @@
 </div>
 </template>
 
-<script setup>
-/* eslint-disable no-unused-vars */
-const gap = 2;
-
-const blockSize = {
-    width: 180,
-    height: 35,
-};
-
-const baseStyle = {
-    width: blockSize.width, height: blockSize.height,
-    backgroundColor: 'rgba(255, 255, 0, 0.5)',
-    color: 'rgba(255, 0, 0, 1)',
-};
-
-// 多行的处理，在PC端依靠CSS属性 white-space: pre-line，在JsView平台不需要特别属性
-const multiLine = "多行文字（末尾省略)："
-        + "\n第一行：我末尾有个\"\\n\""
-        + "\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十"
-        + "\n第三行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十";
+<script>
+export default {
+    computed: {
+        gap() {
+            return 5;
+        },
+        blockSize() {
+            return {
+                width: 180,
+                height: 35,
+            }
+        },
+        baseStyle() {
+            return {
+                width: this.blockSize.width, height: this.blockSize.height,
+                backgroundColor: 'rgba(255, 255, 0, 0.5)',
+                color: 'rgba(255, 0, 0, 1)',
+            }
+        },
+        // 多行的处理，在PC端依靠CSS属性 white-space: pre-line，在JsView平台不需要特别属性
+        multiLine() {
+            return "多行文字（末尾省略)："
+                 + "\n第一行：我末尾有个\"\\n\""
+                 + "\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十"
+                 + "\n第三行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十";
+        }
+    }
+}
 
 </script>