GitHub - ZeroOneJs/vue-default-page: A Vue 3.0 custom directives plugin (original) (raw)

English | 中文

Vue-Default-Page

A Vue 3.0 custom directives plugin package, built-in with v-loading, v-skeleton, v-skeleton-avatar, v-skeleton-list, v-error, and v-empty default page directives, focusing on solving scenarios such as waiting, feedback, and error during network requests.

Table of Contents

• Installation
• Quickstart
  • Full Import
  • Global Configuration
  • On-demand Import
  • On-demand Import Global Configuration
  • Partial Import
  • Partial Import Configuration
  • Advanced
  • Show Priority
• v-loading
  • VdpLoading
  • Attribute Configurations
• v-skeleton
  • VdpSkeleton
  • Attribute Configurations
  • Animation
  • VdpSkeletonAvatar
  • VdpSkeletonList
• v-error
  • VdpError
  • Attribute Configurations
• v-empty
  • VdpEmpty
  • Attribute Configurations
• Adapt to Mobile
• Thanks
• LICENSE

Installation

Quickstart

Full Import

// main.js

// Import the directives import vueDefaultPage from 'vue-default-page';

import { createApp } from 'vue';

const app = createApp();

// Register the directives app.use(vueDefaultPage);

Global Configuration

// main.js

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

On-demand Import

// main.js

// Import the directive import { vdpLoading } from 'vue-default-page';

import { createApp } from 'vue';

const app = createApp();

// Register the directive app.use(vdpLoading);

On-demand Import Global Configuration

// main.js

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

Partial Import

Partial Import Configuration

Method 1: Configure in the directives creation function, the detailed configurations is consistent with On-demand Import Global Configuration.

Method 2: Add attribute configurations to the element.

Common attribute configurations, for specific directive attribute configurations, please refer to the detailed sections below.

Advanced

Show Priority

When all directives are true, it will be shown according to the following priority.

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

v-loading

Custom icon, same configuration as v-error and v-empty.

VdpLoading

Attribute Configurations

v-skeleton

Default show avatar and list skeleton, can also be used independently.

VdpSkeleton

Attribute Configurations

Animation

Avatar or list skeleton can also be used individually by registering directives, but unlike other directives, these two are false by default and need to be manually enabled.

// main.js

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

VdpSkeletonAvatar

VdpSkeletonList

v-error

Like other directives, it can be controlled to show or hide using a Boolean.

You can also pass a refresh function in an Array. For detailed usage, refer to Advanced.

VdpError

Attribute Configurations

v-empty

All directives will automatically adjust their height according to the container's size, and they have different display states.

The maximum icon size can be adjusted using the iconMaxSize or the vdp-empty-icon-max-size (v-skeleton series directives allow only the avatarMaxSize to change the maximum avatar size).

VdpEmpty

Attribute Configurations

Adapt to Mobile

Vue-Default-Page uses px by default and design width is 375. You can use plugins such as postcss-px-to-viewport to convert to viewport units.

// vite.config.js

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

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

Thanks

Thank element-plus for providing inspiration.

LICENSE

MIT.