vue-screen-scaler/README.md

A Vue 3 utility for scaling large screen applications to fit any display

# 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
<template>
  <div ref="screenRef" class="screen-container">
    <!-- Your large screen content here -->
    <div class="your-content">
      <!-- ... -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { useScreenScaler } from 'vue-screen-scaler'

// Use with default options (1920x1080 design)
const { screenRef } = useScreenScaler()
</script>

<style>
.screen-container {
  width: 1920px;  /* Should match your design width */
  height: 1080px; /* Should match your design height */
  margin: 0 auto;
}
</style>
### Advanced Usage
<template>
  <div ref="screenRef" class="screen-container">
    <!-- Your content -->
  </div>
</template>

<script setup lang="ts">
import { useScreenScaler } from 'vue-screen-scaler'

// Custom options
const { screenRef, scale, resize } = useScreenScaler({
  designWidth: 2560,    // Custom design width
  designHeight: 1440,   // Custom design height
  fullScreen: false,    // Disable full screen stretching
  delay: 150,           // Longer debounce delay
  containerStyle: {     // Custom container styles
    position: 'absolute',
    top: '0',
    left: '0',
    transition: 'transform 0.5s ease'
  }
})

// Manually trigger resize if needed
const handleSomeEvent = () => {
  // ...
  resize()
}
</script>

<style>
.screen-container {
  width: 2560px;
  height: 1440px;
}
</style>
## 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<number>    | Current scaling ratio                                  |
| resize     | () => void     | Method to manually trigger a resize                    |

## License

zjhs