quasar+vue实现loading加载等待效果代码-html代码-BFW代码库

quasar+vue实现loading加载等待效果代码

代码语言：html

代码描述：quasar+vue实现loading加载等待效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quasar.prod.css">
  
<style>
    .card-example {
  width: 288px;
  height: 290px;
}

</style>
</head>

<body>
<!--
  Forked from:
  http://www.quasarchs.com/vue-components/inner-loading#example--label-props
-->
<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-md q-gutter-md">
    <q-btn color="primary" @click="showTextLoading">
      Show it
    </q-btn>

    <q-card class="bg-grey-3 relative-position card-example">
      <q-card-section class="q-pb-none">
        <div class="text-h6">Lorem Ipsum</div>
      </q-card-section>

      <q-card-section>
        <transition
          appear
          enter-active-class="animated fadeIn"
          leave-active-class="animated fadeOut"
        >
          <div v-show="showSimulatedReturnData">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel magna eu risus laoreet tristique. Nulla ut fermentum elit, nec consequat augue. Morbi et dolor nec metus tincidunt pellentesque. Nullam non semper ante. Fusc.........完整代码请登录后点击上方下载按钮下载查看