You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
980 B
45 lines
980 B
<template>
|
|
<div class="simple-test">
|
|
<h3>简单测试组件</h3>
|
|
<p>数据状态: {{ data ? '已加载' : '未加载' }}</p>
|
|
<p>错误: {{ error ? error.message : '无' }}</p>
|
|
<p>加载中: {{ pending ? '是' : '否' }}</p>
|
|
<div v-if="data" class="data-content">
|
|
<h4>{{ data.title }}</h4>
|
|
<p>{{ data.body }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useFetch } from '../compose/useFetch'
|
|
|
|
// 使用一个简单的 API 进行测试
|
|
const { data, error, pending } = useFetch(
|
|
'https://jsonplaceholder.typicode.com/posts/1',
|
|
{
|
|
key: 'post-1',
|
|
server: true,
|
|
transform: (post: any) => ({
|
|
id: post.id,
|
|
title: post.title,
|
|
body: post.body.substring(0, 100) + '...'
|
|
})
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.simple-test {
|
|
background: #f9f9f9;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.simple-test p {
|
|
margin: 5px 0;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
|