<template>
  <pre class="text-body">
    {{ textContent }}
  </pre>
</template>

<script setup>
import { ref, watch } from 'vue';
import axios from 'axios';
// const proxy = getCurrentInstance()
let textContent = ref("")
const props = defineProps({ src: String })
// console.log(props)
function loadText(url) {
  axios.get(url)
    .then(response => {
      // console.log(response.data)
      textContent.value = response.data
    })
    .catch(error => {
      console.error('Error loading text file:', error);
    });
}
watch(() => props.src, (newVal) => {
  // console.log(newVal)
  loadText(newVal)
}, { immediate: true })
</script>


<style lang="less" scoped>
.text-body {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 0px 10px;
  background-color: white;
  white-space: pre-line;
  // overflow-x: auto;
  // overflow-y: hidden;
}
</style>