<template>
  <div class="demo-skeleton-loading">
    <ui-skeleton
      :loading="loading"
      :active="true">
      <div>
        <h3>title</h3>
        <ul>
          <li>content 1</li>
          <li>content 2</li>
          <li>content 3</li>
        </ul>
      </div>
    </ui-skeleton>
    <ui-button
      :disabled="loading"
      @click="beginLoading">
      开始加载
    </ui-button>
  </div>
</template>

<script>
import { Skeleton, Button } from "amumu-ui"
export default {
  components: {
    "ui-skeleton": Skeleton,
    "ui-button": Button,
  },
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    beginLoading() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 3000)
    },
  },
}
</script>
