1.1.0 • Published 11 months ago

vue-default-page v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

Vue-Default-Page

NPM Version Open in StackBlitz

一个 Vue 3.0 自定义指令包插件,内置 v-loadingv-skeletonv-skeleton-avatarv-skeleton-listv-errorv-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 / string100
background背景遮罩的颜色string#fff
loadingv-loading 指令配置boolean / VdpLoadingtrue
skeletonv-skeleton 指令配置boolean / VdpSkeletontrue
skeletonAvatarv-skeleton-avatar 指令配置boolean / VdpSkeletonAvatarfalse
skeletonListv-skeleton-list 指令配置boolean / VdpSkeletonListfalse
errorv-error 指令配置boolean / VdpErrortrue
emptyv-empty 指令配置boolean / VdpEmptytrue

按需引入

// 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',
});
名称说明配置项类型
vdpLoadingv-loading 指令VdpLoading
vdpSkeletonv-skeleton 指令VdpSkeleton
vdpSkeletonAvatarv-skeleton-avatar 指令VdpSkeletonAvatar
vdpSkeletonListv-skeleton-list 指令VdpSkeletonList
vdpErrorv-error 指令VdpError
vdpEmptyv-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指令的层叠顺序string100
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-errorv-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是否使用指令(仅在全局配置时生效)booleantrue
text文案stringLoading…
textColor文案颜色string#999
iconColor图标颜色(自定义图标时失效)string#bbb
miniIconColor小图标颜色(自定义小图标时失效)string#bbb
icon自定义图标string
miniIcon自定义小图标boolean / stringtrue
iconMaxSize图标最大尺寸number / string24
iconShowText大图标时是否显示文案booleantrue
zIndex指令的层叠顺序number / string100
background背景遮罩的颜色string#fff

属性配置项

名称说明类型默认值
vdp-loading-text文案stringLoading…
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图标最大尺寸string24

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是否使用指令(仅在全局配置时生效)booleantrue
animation动画boolean / ('avatar' | 'list')[] / Animationtrue
avatarMaxSize头像最大尺寸number / string54
zIndex指令的层叠顺序number / string100
background背景遮罩的颜色string#fff

属性配置项

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

Animation

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

头像或列表 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是否使用指令(仅在全局配置时生效)booleanfalse
animation动画booleantrue
avatarMaxSize头像最大尺寸number / string54
zIndex指令的层叠顺序number / string100
background背景遮罩的颜色string#fff

VdpSkeletonList 配置项

名称说明类型默认值
enable是否使用指令(仅在全局配置时生效)booleanfalse
animation动画booleantrue
zIndex指令的层叠顺序number / string100
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是否使用指令(仅在全局配置时生效)booleantrue
text文案stringNetwork Error
refreshText刷新文案(传入刷新函数时生效)boolean / string, Click to Refresh
textColor文案颜色string#999
icon自定义图标string
miniIcon自定义小图标boolean / stringtrue
iconMaxSize图标最大尺寸number / string180
iconShowText大图标时是否显示文案booleantrue
zIndex指令的层叠顺序number / string100
background背景遮罩的颜色string#fff

属性配置项

名称说明类型默认值
vdp-error-text文案stringNetwork 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图标最大尺寸string180

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是否使用指令(仅在全局配置时生效)booleantrue
text文案stringNo Data
textColor文案颜色string#999
icon自定义图标string
miniIcon自定义小图标boolean / stringfalse
iconMaxSize图标最大尺寸number / string180
iconShowText大图标时是否显示文案booleantrue
zIndex指令的层叠顺序number / string100
background背景遮罩的颜色string#fff

属性配置项

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

兼容移动端

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

1.0.2

1 year ago

1.1.0

11 months ago

1.0.1

1 year ago

0.1.0

1 year ago

1.0.0

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.0.1-beta.1

1 year ago