View UI Plus Documentation

The View UI Plus style library is organized into four main functional directories:

• animation: Contains styles related to component animations.
• common: Contains global styles and base configurations used across the library.
• components: Contains specific styles for individual UI components.
• mixins: Contains reusable style mixins (typically for Sass/Less) to assist in custom styling and theme extensions.

When using a module bundler (like Vite or Webpack), you must import the CSS file to ensure components are styled correctly.

import 'view-ui-plus/dist/styles/viewuiplus.css'

For global use without a module bundler, you can include the library via script tags in your HTML file.

<script type="text/javascript" src="viewuiplus.min.js"></script>
<link rel="stylesheet" href="dist/styles/viewuiplus.css">

You can include View UI Plus directly in your HTML using <script> and <link> tags for global reference.

<script type="text/javascript" src="viewuiplus.min.js"></script>
<link rel="stylesheet" href="dist/styles/viewuiplus.css">

To add View UI Plus to your Vue.js 3 project, install the package using npm.

npm install view-ui-plus --save

If you are using a module bundler (like Vite or Webpack), you must import the component styles in your entry file (e.g., main.js or app.js).

import 'view-ui-plus/dist/styles/viewuiplus.css'

The align object determines where the target element is positioned within the visible area of its scrollable parent after the animation completes.

• top: A value from 0 to 1. 0 aligns the target to the top of the container, 1 to the bottom, and 0.5 (default) centers it vertically.
• left: A value from 0 to 1. 0 aligns the target to the left, 1 to the right, and 0.5 (default) centers it horizontally.
• topOffset: A pixel value used to offset the top alignment.
• leftOffset: A pixel value used to offset the left alignment.

After installation, View UI Plus attaches several utility services and component references to app.config.globalProperties. You can access these within your Vue components via this (Options API) or via getCurrentInstance (Composition API).

Global Services:

• $Spin: The Spin component.
• $Loading: The LoadingBar component.
• $Message: The Message service.
• $Notice: The Notice service.
• $Modal: The Modal service.
• $ImagePreview: The ImagePreview service.
• $Copy: The Copy service.
• $ScrollIntoView: The ScrollIntoView service.
• $ScrollTop: The ScrollTop service.
• $Date: The dayjs library instance.

Global Configuration:

• $VIEWUI: An object containing the global configuration settings passed during install (e.g., size, transfer, and component-specific settings like menu.arrow or datePicker.icon).

View UI Plus components can be used within Vue components using standard Vue patterns like v-model and setup script syntax. Below is an example of using the Slider component with a range selection.

<template>
    <Slider v-model="value" range />
</template>
<script setup>
    import { ref } from 'vue'
    const value = ref([20, 50])
</script>

View UI Plus supports TypeScript. When using <script setup lang="ts">, you can import types from vue to properly type your component state used by View UI Plus components.

<template>
    <Slider v-model="value" range />
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    import type { Ref } from 'vue'
    const value: Ref<number[]> = ref([20, 50])
</script>