Vue-Default-Page

一个 Vue 3.0 自定义指令包插件，内置 v-loading，v-skeleton，v-skeleton-avatar，v-skeleton-list，v-error，v-empty 等缺省页指令，专注解决网络请求时等待、回显和报错等场景。

安装

npm i vue-default-page

快速上手

完整引入

// main.js

// 引入指令
import vueDefaultPage from 'vue-default-page';

import { createApp } from 'vue';

const app = createApp();

// 注册指令
app.use(vueDefaultPage);

<!-- demo.vue -->

<div v-loading="true"></div>

全局配置

// main.js

app.use(vueDefaultPage, {
  background: '#000',
  loading: {
    iconColor: '#fff',
    miniIconColor: '#fff',
    textColor: '#fff',
  },
});

名称	说明	类型	默认值
zIndex	指令的层叠顺序	number / string	100
background	背景遮罩的颜色	string	#fff
loading	v-loading 指令配置	boolean / VdpLoading	true
skeleton	v-skeleton 指令配置	boolean / VdpSkeleton	true
skeletonAvatar	v-skeleton-avatar 指令配置	boolean / VdpSkeletonAvatar	false
skeletonList	v-skeleton-list 指令配置	boolean / VdpSkeletonList	false
error	v-error 指令配置	boolean / VdpError	true
empty	v-empty 指令配置	boolean / VdpEmpty	true

按需引入

// main.js

// 引入指令
import { vdpLoading } from 'vue-default-page';

import { createApp } from 'vue';

const app = createApp();

// 注册指令
app.use(vdpLoading);

按需引入全局配置

// main.js

app.use(vdpLoading, {
  background: '#000',
  iconColor: '#fff',
  miniIconColor: '#fff',
  textColor: '#fff',
});

名称	说明	配置项类型
vdpLoading	v-loading 指令	VdpLoading
vdpSkeleton	v-skeleton 指令	VdpSkeleton
vdpSkeletonAvatar	v-skeleton-avatar 指令	VdpSkeletonAvatar
vdpSkeletonList	v-skeleton-list 指令	VdpSkeletonList
vdpError	v-error 指令	VdpError
vdpEmpty	v-empty 指令	VdpEmpty

局部引入

<!-- demo.vue -->

<script setup lang="js">
  // 引入指令创建方法
  import { createVueDefaultPage } from 'vue-default-page';
  // 创建指令
  const vLoading = createVueDefaultPage('loading');
</script>

<template>
  <div v-loading="true"></div>
</template>

局部引入配置

方法一：在指令创建方法中配置，具体配置与按需引入全局配置一致。

<!-- demo.vue -->

<script setup lang="js">
  // 创建指令
  const vLoading = createVueDefaultPage('loading', {
    background: '#000',
    iconColor: '#fff',
    miniIconColor: '#fff',
    textColor: '#fff',
  });
</script>

<template>
  <div v-loading="true"></div>
</template>

方法二：在元素上添加属性配置。

<!-- demo.vue -->

<template>
  <div
    v-loading="true"
    vdp-background="#000"
    vdp-loading-icon-color="#fff"
    vdp-loading-mini-icon-color="#fff"
    vdp-loading-text-color="#fff"
  ></div>
</template>

通用属性配置项，各指令属性配置项请前往下方具体章节查看。

名称	说明	类型	默认值
vdp-z-index	指令的层叠顺序	string	100
vdp-background	背景遮罩的颜色	string	#fff

进阶

<!-- demo.vue -->

<script setup lang="js">
  import { ref } from 'vue';
  // npm i vue-hooks-plus
  import { useRequest } from 'vue-hooks-plus';

  const data = ref([]);
  // 模拟首次请求失败，刷新重试请求成功
  let times = 0;
  const api = () =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        data.value = Array.from({ length: 10 }, (v, k) => k);
        times ? resolve('请求成功') : reject('请求失败');
        times++;
      }, 2000);
    });

  // https://inhiblabcore.github.io/docs/hooks/useRequest
  const { loading, error, refresh } = useRequest(api);
</script>

<template>
  <div v-loading="loading" v-error="[!!error, refresh]" v-empty="!data.length">
    <div v-for="i in data" :key="i">{{ i }}</div>
  </div>
</template>

显示优先级

指令均为 true 时会按以下优先级显示。

v-loading > v-skeleton = v-skeleton-avatar = v-skeleton-list > v-error > v-empty

v-loading

可自定义图标，v-error 和 v-empty 中也有相同的配置项。

<!-- demo.vue -->

<script setup lang="js">
  import { createVueDefaultPage } from 'vue-default-page';
  const icon = `<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
    <path
      d="M151.5,80A71.5,71.5,0,1,1,80,8.5"
      fill="none"
      stroke="#bbb"
      stroke-miterlimit="10"
      stroke-width="16"
    />
  </svg>`;
  // 创建指令
  const vLoading = createVueDefaultPage('loading', {
    icon,
    miniIcon: icon,
  });
</script>

<template>
  <div v-loading="true"></div>
</template>

<style>
  .circle {
    display: block;
    animation: spin 1.5s ease-in-out infinite;
  }
  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }
</style>

VdpLoading 配置项

名称	说明	类型	默认值
enable	是否使用指令（仅在全局配置时生效）	boolean	true
text	文案	string	Loading…
textColor	文案颜色	string	#999
iconColor	图标颜色（自定义图标时失效）	string	#bbb
miniIconColor	小图标颜色（自定义小图标时失效）	string	#bbb
icon	自定义图标	string	—
miniIcon	自定义小图标	boolean / string	true
iconMaxSize	图标最大尺寸	number / string	24
iconShowText	大图标时是否显示文案	boolean	true
zIndex	指令的层叠顺序	number / string	100
background	背景遮罩的颜色	string	#fff

属性配置项

名称	说明	类型	默认值
vdp-loading-text	文案	string	Loading…
vdp-loading-text-color	文案颜色	string	#999
vdp-loading-icon-color	图标颜色（自定义图标时失效）	string	#bbb
vdp-loading-mini-icon-color	小图标颜色（自定义小图标时失效）	string	#bbb
vdp-loading-icon	自定义图标	string	—
vdp-loading-mini-icon	自定义小图标	string	—
vdp-loading-icon-max-size	图标最大尺寸	string	24

v-skeleton

默认显示头像和列表 skeleton，也可以单独使用。

<!-- demo.vue -->

<template>
  <div v-skeleton="true"></div>
  <div v-skeleton.avatar="true"></div>
  <div v-skeleton.list="true"></div>
</template>

VdpSkeleton 配置项

名称	说明	类型	默认值
enable	是否使用指令（仅在全局配置时生效）	boolean	true
animation	动画	boolean / ('avatar' ｜ 'list')[] / Animation	true
avatarMaxSize	头像最大尺寸	number / string	54
zIndex	指令的层叠顺序	number / string	100
background	背景遮罩的颜色	string	#fff

属性配置项

名称	说明	类型	默认值
vdp-skeleton-avatar-max-size	头像最大尺寸	string	54

Animation

名称	说明	类型	默认值
avatar	开启头像动画	boolean	true
list	开启列表动画	boolean	true

头像或列表 skeleton 也可以通过定义指令的形式单独使用，但与其他指令不同的是这两个指令默认是关闭的，需手动开启。

// main.js

app.use(vueDefaultPage, {
  skeletonAvatar: true,
  skeletonList: true,
});

<!-- demo.vue -->

<template>
  <div v-skeleton-avatar="true"></div>
  <div v-skeleton-list="true"></div>
</template>

VdpSkeletonAvatar 配置项

名称	说明	类型	默认值
enable	是否使用指令（仅在全局配置时生效）	boolean	false
animation	动画	boolean	true
avatarMaxSize	头像最大尺寸	number / string	54
zIndex	指令的层叠顺序	number / string	100
background	背景遮罩的颜色	string	#fff

VdpSkeletonList 配置项

名称	说明	类型	默认值
enable	是否使用指令（仅在全局配置时生效）	boolean	false
animation	动画	boolean	true
zIndex	指令的层叠顺序	number / string	100
background	背景遮罩的颜色	string	#fff

v-error

和其他指令一样可以通过布尔值控制显示和隐藏。

<!-- demo.vue -->

<template>
  <div v-error="true"></div>
</template>

也可以通过数组传入对应的刷新函数，具体使用可以查看进阶篇章。

<!-- demo.vue -->

<template>
  <div v-error="[error, () => {}]"></div>
</template>

VdpError 配置项

名称	说明	类型	默认值
enable	是否使用指令（仅在全局配置时生效）	boolean	true
text	文案	string	Network Error
refreshText	刷新文案（传入刷新函数时生效）	boolean / string	, Click to Refresh
textColor	文案颜色	string	#999
icon	自定义图标	string	—
miniIcon	自定义小图标	boolean / string	true
iconMaxSize	图标最大尺寸	number / string	180
iconShowText	大图标时是否显示文案	boolean	true
zIndex	指令的层叠顺序	number / string	100
background	背景遮罩的颜色	string	#fff

属性配置项

名称	说明	类型	默认值
vdp-error-text	文案	string	Network Error
vdp-error-refresh-text	刷新文案（传入刷新函数时生效）	string	, Click to Refresh
vdp-error-text-color	文案颜色	string	#999
vdp-error-icon	自定义图标	string	—
vdp-error-mini-icon	自定义小图标	string	—
vdp-error-icon-max-size	图标最大尺寸	string	180

v-empty

所有指令都会根据容器大小自动调整高度，并且有不同的显示状态。

<!-- demo.vue -->

<template>
  <div v-empty="true" style="height: 500px;"></div>
  <div v-empty="true"></div>
</template>

可通过 iconMaxSize 配置项或 vdp-empty-icon-max-size 属性配置项更改图标最大尺寸（v-skeleton 系列指令只能通过 avatarMaxSize 配置项更改头像最大尺寸）。

<!-- demo.vue -->

<template>
  <div
    v-empty="true"
    style="height: 500px;"
    vdp-empty-icon-max-size="400"
  ></div>
</template>

VdpEmpty 配置项

名称	说明	类型	默认值
enable	是否使用指令（仅在全局配置时生效）	boolean	true
text	文案	string	No Data
textColor	文案颜色	string	#999
icon	自定义图标	string	—
miniIcon	自定义小图标	boolean / string	false
iconMaxSize	图标最大尺寸	number / string	180
iconShowText	大图标时是否显示文案	boolean	true
zIndex	指令的层叠顺序	number / string	100
background	背景遮罩的颜色	string	#fff

属性配置项

名称	说明	类型	默认值
vdp-empty-text	文案	string	No Data
vdp-empty-text-color	文案颜色	string	#999
vdp-empty-icon	自定义图标	string	—
vdp-empty-mini-icon	自定义小图标	string	—
vdp-empty-icon-max-size	图标最大尺寸	string	180

兼容移动端

Vue-Default-Page 默认使用 px 作为样式单位，设计稿宽度为 375，可以使用 postcss-px-to-viewport 等插件转换为 viewport 单位。

// vite.config.js

import pxToViewport from 'postcss-px-to-viewport';

export default defineConfig(() => {
  return {
    css: {
      postcss: {
        plugins: [pxToViewport({ viewportWidth: 375 })],
      },
    },
  };
});

鸣谢

感谢 element-plus 提供灵感。

开源协议

本项目基于 MIT. 协议。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.zh-CN.md

README.zh-CN.md

Vue-Default-Page

目录

安装

快速上手

完整引入

全局配置

按需引入

按需引入全局配置

局部引入

局部引入配置

进阶

显示优先级

v-loading

VdpLoading 配置项

属性配置项

v-skeleton

VdpSkeleton 配置项

属性配置项

Animation

VdpSkeletonAvatar 配置项

VdpSkeletonList 配置项

v-error

VdpError 配置项

属性配置项

v-empty

VdpEmpty 配置项

属性配置项

兼容移动端

鸣谢

开源协议

Files

README.zh-CN.md

Latest commit

History

README.zh-CN.md

File metadata and controls

Vue-Default-Page

目录

安装

快速上手

完整引入

全局配置

按需引入

按需引入全局配置

局部引入

局部引入配置

进阶

显示优先级

v-loading

VdpLoading 配置项

属性配置项

v-skeleton

VdpSkeleton 配置项

属性配置项

Animation

VdpSkeletonAvatar 配置项

VdpSkeletonList 配置项

v-error

VdpError 配置项

属性配置项

v-empty

VdpEmpty 配置项

属性配置项

兼容移动端

鸣谢

开源协议