Home Page With Element ! (Modular)

Arcadei Project...
Inscription

src/components/CMyPageIntro/CMyPageIntro.ts

@@ -0,0 +1,79 @@
+import {
+  defineComponent, onMounted, ref, toRef, watch,
+} from 'vue'
+
+import { IMyPage } from '@src/model'
+import { useGlobalStore } from '@store/globalStore'
+import { LandingFooter } from '@/components/LandingFooter'
+
+import { CImgTitle } from '../CImgTitle/index'
+import { CTitle } from '../CTitle/index'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  name: 'CMyPageIntro',
+  components: { LandingFooter, CImgTitle, CTitle },
+  props: {
+    title: String,
+    mypath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    img: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    sizes: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    styleadd: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    maxheightimg: {
+      type: Number,
+    },
+    maxwidthimg: {
+      type: Number,
+    },
+    link: {
+      type: String,
+    },
+  },
+
+  setup(props) {
+    const rec = ref<IMyPage | null>(null)
+    const mypath = toRef(props, 'mypath')
+    const $router = useRouter()
+
+    const globalStore = useGlobalStore()
+
+    const load = async (): Promise<void> => {
+      // console.log('load', mypath.value)
+      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
+    }
+
+    watch(() => props.mypath, async (to: string, from: string) =>  {
+      // console.log('load', mypath.value)
+      if (mypath.value !== '') rec.value = await globalStore.loadPage('/' + mypath.value)
+    })
+
+    function openclick() {
+      if (props.link)
+        $router.push(props.link)
+    }
+
+
+    // onMounted(load)
+
+    load()
+
+    return { rec, openclick }
+  },
+
+})

src/components/CMyPageIntro/CMyPageIntro.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div v-if="mypath && !!rec">
+      <div class="q-ma-sm q-gutter-sm q-pa-xs">
+        <div v-if="!!rec.img1" class="text-center">
+          <q-btn v-if="link" @click="openclick">
+              <q-img :src="rec.img1" :height="maxheightimg + `px`" :width="maxwidthimg + `px`" fit="fill"></q-img>
+          </q-btn>
+          <q-img v-else :src="rec.img1" :height="maxheightimg + `px`" :width="maxwidthimg + `px`" fit="fill" @click="openclick"></q-img>
+        </div>
+
+        <div v-if="!!rec.content" v-html="rec.content"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyPageIntro.ts">
+</script>
+<style lang="scss" scoped>
+@import './CMyPageIntro.scss';
+</style>

src/components/CMyPageIntro/index.ts

@@ -0,0 +1 @@
+export { default as CMyPageIntro } from './CMyPageIntro.vue'