<template>
  <div>
    <!-- 使用 van-skeleton 组件 -->
    <van-skeleton title :row="3" />

    <!-- 模拟加载数据的按钮 -->
    <van-button @click="loadData">加载数据</van-button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 是否显示骨架屏，初始时显示
    const showSkeleton = ref(true);

    // 模拟加载数据的方法
    const loadData = () => {
      // 在加载数据前隐藏骨架屏
      showSkeleton.value = false;

      // 这里可以添加加载数据的逻辑，比如发起网络请求等

      // 模拟加载完成后再显示骨架屏
      setTimeout(() => {
        showSkeleton.value = true;
      }, 1000);
    };

    return {
      showSkeleton,
      loadData,
    };
  },
};
</script>

<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>