nguyen van thai
113 lines
4.4 KiB
Vue
113 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { breakpoint } from '~/definitions';
|
|
import { useWindowSize } from '@vueuse/core'
|
|
const { width } = useWindowSize()
|
|
import { useArticleStore } from '~/stores/articles';
|
|
import { useDynamicPageStore } from "~/stores/dynamic-page";
|
|
import Poll from '~/components/article/immerse/Poll.vue'
|
|
import Quiz from '~/components/article/immerse/Quiz.vue'
|
|
import Survey from '~/components/article/immerse/Survey.vue'
|
|
import Document from '~/components/article/immerse/Document.vue'
|
|
import Attachment from '@/components/article/immerse/Attachment.vue'
|
|
import Tag from '@/components/article/immerse/Tag.vue'
|
|
import Articlerelation from '~/components/article/immerse/ArticleRelation.vue'
|
|
const { currentArticle } = storeToRefs(useArticleStore());
|
|
const { step } = storeToRefs(useDynamicPageStore());
|
|
|
|
const router = useRouter()
|
|
// import * as cherrio from 'cheerio'
|
|
|
|
// const $ = cherrio.load(currentArticle.value.detail)
|
|
// for(let index = 0; index < $('articlerelation').length, index++) {
|
|
// $('articlerelation')[index]
|
|
// }
|
|
// console.log($('articlerelation').length, 'cherrip')
|
|
// onBeforeMount(async () => {
|
|
// await useArticleStore().getArticleCondition({ids: [1, 2, 3]})
|
|
// })
|
|
// console.log(router,'route')
|
|
onMounted(() => {
|
|
// const elements = document.querySelectorAll('custom-figure')
|
|
// elements.forEach((element) => {
|
|
// element.addEventListener('click', (event) => {
|
|
// event.preventDefault();
|
|
// console.log(element, 'element')
|
|
// const url = `figure/${element.getAttribute('data-code')}`;
|
|
|
|
// const a = document.createElement('a')
|
|
// a.href = url;
|
|
// document.body.appendChild(a)
|
|
// a.click();
|
|
// document.body.removeChild(a);
|
|
// })
|
|
// })
|
|
|
|
clickElement('figure', 'custom-figure', 'data-code')
|
|
clickElement('author', 'author', 'data-code')
|
|
})
|
|
|
|
function clickElement(type: string, selector: string, attribute: string) {
|
|
const elements = document.querySelectorAll(selector)
|
|
elements.forEach((element) => {
|
|
element.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
const url = `${window.location.protocol}//${window.location.host}/${type}/${element.getAttribute(attribute)}`;
|
|
|
|
const a = document.createElement('a')
|
|
a.href = url;
|
|
document.body.appendChild(a)
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
})
|
|
})
|
|
}
|
|
// const fileName = ref('')
|
|
// onMounted(() => {
|
|
// const documentElements = document.querySelectorAll('document, attachment')
|
|
|
|
// console.log(documentElements, 'doc')
|
|
|
|
// if(documentElements.length > 0) {
|
|
// documentElements.forEach((doc) => {
|
|
// doc.addEventListener('click', (event) => {
|
|
// event.preventDefault();
|
|
// const url = doc.getAttribute('data-resource');
|
|
// const file = doc.getAttribute('data-resource') ? doc.getAttribute('data-resource')?.toString().split('.').pop() : 'docx'
|
|
// fileName.value = `${doc.getAttribute('data-title')}.${file}` ;
|
|
// console.log(url , fileName.value, '123')
|
|
// if(url && fileName.value) {
|
|
// const a = document.createElement('a');
|
|
// a.href = url?.toString();
|
|
// a.download = fileName.value;
|
|
// document.body.appendChild(a);
|
|
// a.click();
|
|
// document.body.removeChild(a);
|
|
// }
|
|
// })
|
|
// })
|
|
// }
|
|
// })
|
|
</script>
|
|
<template>
|
|
<div class="content" v-if="currentArticle">
|
|
<h1 id="sub" v-html="currentArticle?.sub" class=" font-bold opacity-60 pb-1"></h1>
|
|
<h3 id="title" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
|
|
<p id="published-on" class="text-gray-600 mb-3">{{ utils.dateFormat(currentArticle?.publishedOn, "dddd, DD/MM/YYYY - HH:mm") }}</p>
|
|
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1 mb-3"></div>
|
|
<component :is="{template: currentArticle.detail, components: { Poll, Quiz, Survey, Document, Attachment, Tag} }" />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
#sub, #intro, #intro + div {
|
|
font-size: calc(16px + var(--step) * 1px);
|
|
}
|
|
|
|
#title {
|
|
font-size: calc(28px + var(--step) * 1px);
|
|
}
|
|
|
|
#published-on {
|
|
font-size: calc(14px + var(--step) * 1px);
|
|
}
|
|
</style> |