<template>
    <div class="app-html" v-html="html" v-if="showHtml"></div>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import axios, { AxiosRequestConfig } from 'axios'

const props = defineProps({
    url: {
        type: String,
        required: true
    },
})

const html = shallowRef()
const showHtml = shallowRef(false)
const config: AxiosRequestConfig = {
    url: props.url,
    method: 'get',
    responseType: 'document',
    responseEncoding: 'utf-8'
}

setTimeout(() => {
    showHtml.value = true
}, 200);

axios(config).then((res) => {
    html.value = res.data
})
</script>

<style lang="less" scoped>
@import './index.less';
</style>