vue-default-page v1.1.0

Vue-Default-Page

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

目录

• 安装
• 快速上手
  • 完整引入
  • 全局配置
  • 按需引入
  • 按需引入全局配置
  • 局部引入
  • 局部引入配置
  • 进阶
  • 显示优先级
• v-loading
  • VdpLoading 配置项
  • 属性配置项
• v-skeleton
  • VdpSkeleton 配置项
  • 属性配置项
  • Animation
  • VdpSkeletonAvatar 配置项
  • VdpSkeletonList 配置项
• v-error
  • VdpError 配置项
  • 属性配置项
• v-empty
  • VdpEmpty 配置项
  • 属性配置项
• 兼容移动端
• 鸣谢
• 开源协议

安装

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',
  },
});

按需引入

// 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',
});

局部引入

<!-- 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>

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

进阶

<!-- 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 配置项

属性配置项

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 配置项

属性配置项

Animation

头像或列表 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 配置项

VdpSkeletonList 配置项

v-error

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

<!-- demo.vue -->

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

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

<!-- demo.vue -->

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

VdpError 配置项

属性配置项

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 配置项

属性配置项

兼容移动端

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. 协议。