CSS Animations

src/components/CImgPoster/CImgPoster.ts

@@ -0,0 +1,102 @@
+import { defineComponent, ref } from 'vue'
+
+import { tools } from '@src/store/Modules/tools'
+import { shared_consts } from '@src/common/shared_vuejs'
+
+export default defineComponent({
+  name: 'CImgPoster',
+  props: {
+    src: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    myheight: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    myheightmobile: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    legendinside: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    legend: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    classTitle: String,
+    classSubtitle: String,
+    colorTitle: String,
+    colorSubtitle: String,
+    vertalign: Number,
+    speed: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    class_anim: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    class_anim2: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    logo: String,
+    logoheight: String,
+    logowidth: String,
+    fit: String,
+  },
+
+  setup(props) {
+    function getsrc(): string {
+      const filefull = tools.getimgFullpathbysize(props.src)
+
+      return tools.getimgbysize(filefull.path, filefull.file)
+    }
+
+    function getaltimg(): string {
+      const filefull = tools.getimgFullpathbysize(props.src)
+      return tools.getaltimg(filefull.path, filefull.file, props.title)
+    }
+
+    function myclass() {
+      let mycl = ''
+      if (props.vertalign === shared_consts.VERTALIGNTYPE.UP) {
+        mycl += ' align_top'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.CENTER) {
+        mycl += ' align_middle'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.DOWN) {
+        mycl += ' align_bottom'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.DOWN_LEFT) {
+        mycl += ' align_bottom_left'
+      } else if (props.vertalign === shared_consts.VERTALIGNTYPE.UP_LEFT) {
+        mycl += ' align_top_left'
+      }
+
+      return mycl
+    }
+
+    return {
+      getsrc,
+      getaltimg,
+      myclass,
+      tools,
+    }
+  },
+
+})