Vue Screen Scaler

A Vue 3 utility for scaling large screen applications to fit any display, maintaining proper proportions and layout.

Features

• Automatically scales your large screen application to fit the browser window
• Maintains aspect ratio to prevent distortion
• Supports full screen stretching if needed
• Debounced resize events for better performance
• Easy to integrate with any Vue 3 project

Installation

npm install vue-screen-scaler --save

or

yarn add vue-screen-scaler

Usage

Basic Usage

Advanced Usage

API

useScreenScaler(options)

Options

| Option | Type | Default | Description | |-----------------|-----------------------|--------------------------|-----------------------------------------------------------------------------| | designWidth | number | 1920 | The width of your design draft | | designHeight | number | 1080 | The height of your design draft | | fullScreen | boolean | false | Whether to stretch to full screen (may cause distortion) | | delay | number | 100 | Debounce delay for resize events (in milliseconds) | | containerStyle | Record<string, string>| { position: 'relative', transition: 'transform 0.3s ease' } | Custom styles for the container element |

Returns

| Property | Type | Description | |------------|----------------|--------------------------------------------------------| | screenRef | Ref<HTMLElement|null> | Ref to bind to your container element | | scale | Ref | Current scaling ratio | | resize | () => void | Method to manually trigger a resize |

License

zjhs