<script setup>  
import { ref } from 'vue';  
  
const content = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。  
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。  
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`);  
</script>

<script setup>  
import { ref, onMounted } from 'vue';  
  
// 创建响应式数据  
const content = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。  
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。  
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`);  
  
// 创建组件引用  
const uReadMoreRef = ref(null);  
  
// 定义方法  
function load() {  
    if (uReadMoreRef.value) {  
        uReadMoreRef.value.init();  
    }  
}  
  
// 如果需要在组件挂载后调用 load 方法，可以使用 onMounted 钩子  
onMounted(() => {  
    load();  
});  
</script>

<script setup>  
import { ref, onMounted } from 'vue';  
  
// 创建响应式数据  
const content = ref('');  
  
// 创建组件引用  
const uReadMoreRef = ref(null);  
  
// 模拟后端请求  
async function fetchData() {  
  return new Promise((resolve) => {  
    setTimeout(() => {  
      resolve(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。  
      苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。  
      无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`);  
    }, 2000);  
  });  
}  
  
// 在组件挂载后调用  
onMounted(async () => {  
  const text = await fetchData();  
  content.value = text;  
    
  // 等待 DOM 更新  
  await nextTick();  
    
  // 调用子组件的 init 方法  
  if (uReadMoreRef.value) {  
    uReadMoreRef.value.init();  
  }  
});  
</script>

<script setup>  
import { reactive } from 'vue';  
  
const state = reactive({  
  content: '',  
  shadowStyle: {  
    backgroundImage: "none",  
    paddingTop: "0",  
    marginTop: "20rpx"  
  }  
});  
</script>