内部加载

Vue 组件
Linear Progress 线性进度
Vue 组件
Circular Progress 环形进度
Vue 组件
Spinners 加载项
Vue 组件
Skeleton 骨架屏
Quasar 插件
Loading 加载
Quasar 插件
Loading Bar 加载条

QInnerLoading 组件可以给一个组件内部添加进度动画。与加载插件类似，它们的目的都是给用户传递信息：某个工作在后台运行，需要等待。QInnerLoading 会给目标元素添加一个不透明的覆盖层和一个Spinner组件。

QInnerLoading API

QInnerLoading API
label
: String
v2.2+
说明
添加一个标签；当使用默认插槽时会被覆盖
label-class
: String
v2.2+
说明
将 CSS 类（们）添加到标签；仅在 'label' 属性上起作用
label-style
: String | Array | Object
v2.2+
说明
将自定义样式应用于标签；仅在 'label' 属性上起作用

用法

WARNING

为了将加载器正确放置在要显示加载的元素的中央，该元素必须将 CSS 定位设置为 relative（或使用 relative-position CSS 类）。

WARNING

QInnerLoading 必须是其父元素内部的最后一个元素，以便它可以显示在其他内容的顶部。

基础

<template>
  <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. Fusce pellentesque sagittis felis quis porta. Aenean condimentum neque sed erat suscipit malesuada. Nulla eget rhoncus enim. Duis dictum interdum eros.
          </div>
        </transition>
      </q-card-section>

      <q-inner-loading :showing="visible">
        <q-spinner-gears size="50px" color="primary" />
      </q-inner-loading>
    </q-card>
  </div>
</template>
Lorem Ipsum
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.

标签
v2.2+

在使用默认槽时，您可以添加一个标签，但您也可以使用 “label” 属性代替：

<template>
  <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. Fusce pellentesque sagittis felis quis porta. Aenean condimentum neque sed erat suscipit malesuada. Nulla eget rhoncus enim. Duis dictum interdum eros.
          </div>
        </transition>
      </q-card-section>

      <q-inner-loading
        :showing="visible"
        label="Please wait..."
        label-class="text-teal"
        label-style="font-size: 1.1em"
      />
    </q-card>
  </div>
</template>
Lorem Ipsum
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.
查看更多？
Vue 组件
Infinite Scroll 无限滚动
Vue 组件
Intersection 交叉
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。