Pixel UI

Loading 加载 ​

加载数据时显示动效。

区域加载 ​

在需要的时候展示加载动画, 防止页面失去响应提高用户体验。

Pixel UI 提供了两种调用 Loading 的方法: 指令和服务。对于自定义指令 v-loading, 只需要绑定 boolean 值即可。默认状况下, Loading 遮罩会插入到绑定元素的子节点。通过添加 body 修饰符, 可以使遮罩插入至 Dom 中的 body 上。

<template>
  <div class="p-10 container" v-loading="isLoading">
    <px-collapse v-model="activeNames" accordion>
      <px-collapse-item title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </px-collapse-item>
      <px-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </px-collapse-item>
      <px-collapse-item title="Efficiency" name="3">
        <div>
          Simplify the process: keep operating process simple and intuitive;
        </div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the
          users can quickly understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps
          the users to identify and frees them from memorizing and recalling.
        </div>
      </px-collapse-item>
      <px-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do
          not make decisions for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to
          operate, including canceling, aborting or terminating current
          operation.
        </div>
      </px-collapse-item>
    </px-collapse>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const isLoading = ref(true)
const activeNames = ref([])
</script>

自定义组件内容​ ​

你可以自定义加载中组件的文字, 图标, 以及背景颜色。

在绑定了 v-loading 指令的元素上添加 px-loading-text 属性, 其值会被渲染为加载文案, 并显示在加载图标的下方。类似地, px-loading-spinner、px-loading-background 和 px-loading-customClass 属性分别用来设定加载图标、背景色值、自定义类名。

<template>
  <div class="container">
    <px-collapse v-model="activeNames">
      <px-collapse-item
        title="Consistency"
        name="1"
        v-loading="isLoading"
        px-loading-text="Loading..."
        px-loading-spinner="spinner-third-solid"
        px-loading-background="rgba(255, 119, 7, 0.4)"
      >
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </px-collapse-item>
      <px-collapse-item title="Feedback" name="2" v-loading="isLoading">
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </px-collapse-item>
    </px-collapse>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const isLoading = ref(true)
const activeNames = ref(['1', '2'])
</script>
<style scoped>
:deep(.px-collapse-item) {
  padding: 10px;
}
</style>

自定义遮罩层 ​

同 Overlay 组件类似, 提供了 grid, matte, preset1 属性, 用于设置遮罩层的样式。

<template>
  <div class="container">
    <px-collapse v-model="activeNames">
      <px-collapse-item
        title="Consistency"
        name="1"
        v-loading.grid="isLoading"
        px-loading-text="Loading..."
        px-loading-spinner="spinner-third-solid"
      >
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </px-collapse-item>
      <px-collapse-item
        title="Feedback"
        name="2"
        v-loading.matte.preset1="isLoading"
      >
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </px-collapse-item>
    </px-collapse>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const isLoading = ref(true)
const activeNames = ref(['1', '2'])
</script>
<style scoped>
:deep(.px-collapse-item) {
  padding: 20px;
}
</style>

全屏加载 ​

加载数据时显示全屏动画。

当使用指令方式时, 全屏遮罩需要添加 fullscreen 修饰符 (遮罩会插入至 body 上) 此时若需要锁定屏幕的滚动, 可以使用 lock 修饰符; 当使用服务方式时, 遮罩默认即为全屏, 无需额外设置。

<template>
  <px-button
    v-loading.fullscreen.lock="loading"
    type="primary"
    @click="openLoading1"
  >
    As a directive
  </px-button>
  <px-button type="primary" @click="openLoading2"> As a service </px-button>
</template>
<script setup>
import { ref } from 'vue'
import { PxLoading } from '@mmt817/pixel-ui'

const loading = ref(false)

function openLoading1() {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}

function openLoading2() {
  const _loading = PxLoading.service({
    lock: true,
    spinner: 'spinner-third-solid',
    text: '加载中...',
    background: 'rgba(255,255,255,0.5)'
  })
  setTimeout(() => {
    _loading.close()
  }, 2000)
}
</script>

服务方式调用 ​

Loading 还可以通过服务的方式调用。可以这样引入 Loading 服务:

ts
import { PxLoading } from '@mmt817/pixel-ui'

在需要时通过下面的方式调用:

ts
PxLoading.service(options)

其中 options 参数为 Loading 的配置项, 具体见下表。LoadingService 会返回一个 Loading 实例, 可以通过调用该实例的 close 方法来关闭当前 Loading:

ts
const loadingInstance = PxLoading.service(options)
nextTick(() => {
  // loading should be closed asynchronously
  loadingInstance.close()
})

需要注意的是, 以服务的方式调用的全屏 Loading 是单例的。若在前一个全屏 Loading 关闭前再次调用全屏 Loading, 并不会创建一个新的 Loading 实例, 而是返回现有全屏 Loading 的实例

ts
const loadingInstance1 = PxLoading.service({ fullscreen: true })
const loadingInstance2 = PxLoading.service({ fullscreen: true })
console.log(loadingInstance1 === loadingInstance2) // true

此时调用它们中任意一个的 close 方法都能关闭这个全屏 Loading。

如果完整引入了 Pixel UI, 那么 app.config.globalProperties 上会有一个全局方法 $loading, 它的调用方式为: this.$loading(options), 同样会返回一个 Loading 实例。

API_Table插件测试 ​

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Loading API

Props

NameDescriptionTypeDefault
targetLoading 需要覆盖的 DOM 节点, 可传入一个 DOM 对象或字符串; 若传入字符串, 则会将其作为参数传入 document.querySelector 以获取到对应 DOM 节点HTMLElement | stringdocument.body
body同 v-loading 指令中的 body 修饰符booleanfalse
fullscreen同 v-loading 指令中的 fullscreen 修饰符booleantrue
lock同 v-loading 指令中的 lock 修饰符booleanfalse
text显示在 Loading 图标下方的加载文案string-
spinner自定义加载图标, 可传入 false 禁用默认图标boolean | stringtrue
backgroundLoading 遮罩的背景色string-
customClassLoading 自定义类名string-
grid是否显示网格背景booleanfalse
matte是否开启哑光booleanfalse
preset1网格背景预设-1booleanfalse
beforeClose关闭前的回调, 返回 false 将阻止关闭function-
closedLoading 关闭后的回调function-

Directives

NameDescriptionType
v-loading是否显示动画boolean | LoadingOptions
px-loading-text显示在加载图标下方的加载文案string
px-loading-spinner自定义加载图标string
px-loading-background背景遮罩的颜色string
px-loading-custom-classloading 自定义类名string
本站访客数 人次 本站总访问量 次