内部加载(Inner Loading)

QInnerLoading组件允许您在组件中添加进度动画。 就像加载功能一样，它的目的是为用户提供视觉确认，即某个进程正在后台进行，这需要花费过多的时间。 QInnerLoading将在延迟元素上添加一个不透明的叠加层，同时还会添加一个旋转器。

注意
为了将旋转器(spinner)正确放置在要显示加载效果的元素的中心，该元素必须声明为“relative-position”CSS类。

注意
QInnerLoading必须是其父项中的最后一个元素，因此它可以出现在其他内容之上

安装

编辑/quasar.conf.js:

framework: {
  components: [
  'QInnerLoading',
  
  //... 如果使用自定义旋转器，
  //无论如何请将其添加
  'QSpinnerGears'
  ]
}

基本用法

<div class="row justify-center" style="margin-top: 40px">
  <q-card style="width: 288px; height: 262px;" color="grey-2" class="text-dark relative-position">
    <q-card-title>
      Lorem Ipsum
    </q-card-title>
    <q-card-main>
      <q-transition
        appear
        enter="fadeIn"
        leave="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. Fusce pellentesque sagittis felis quis porta. Aenean condimentum neque sed erat suscipit malesuada. Nulla eget rhoncus enim. Duis dictum interdum eros.
        </div>
      </q-transition>
    </q-card-main>
    <!--
       将QInnerLoading放置为最后一个子元素。
       这对于将其显示在其他内容之上很重要。
    -->
    <q-inner-loading :visible="visible">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
    </q-inner-loading>
  </q-card>
</div>

想了解完整示例请查看演示源代码。

使用v-show或v-if和Inner Loading组件的visible属性来切换动画和你的内容。

Vue属性

Vue属性 类型 说明
dark 布尔 为较暗的设计减淡不透明覆盖层的颜色
visible 布尔 加载效果在true时变为可见
size 数字，字符串 更改默认旋转器的默认大小。 默认值是42像素。
color 字符串 指定默认旋转器的颜色。

注意
如果您添加自己的旋转器，请使用旋转器自己的size和color属性来更改尺寸和颜色。

要更改旋转器，您可以添加自己的旋转器作为QInnerLoading组件的子项。 下面的代码将添加一个大小为50像素的“Teal”——齿轮旋转器的变体。

<q-inner-loading :visible="visible">
  <q-spinner-gears size="50px" color="teal-4" />
</q-inner-loading>

在大多数情况下，您可能需要添加自己的旋转器、颜色和大小。 有关旋转器控制的更多信息，请参阅文档的旋转器部分。

加载 进度条