# v-scale-screen

> vue3大屏自适应组件

Latest version **2.3.0** (published 2024-11-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-scale-screen
pnpm add v-scale-screen
yarn add v-scale-screen
bun add v-scale-screen
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2024-11-12 |
| First published | 2022-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 28.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1285 |
| Author | ypt |
| Maintainers | yuanfang03 |
| Keywords | vue3, echarts, 大屏自适应, 自适应, 大屏 |

## Links

- npm: https://www.npmjs.com/package/v-scale-screen
- Repository: https://github.com/Alfred-Skyblue/v-scale-screen
- Issues: https://github.com/Alfred-Skyblue/v-scale-screen/issues
- npm.io page: https://npm.io/package/v-scale-screen

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.37

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 2.3.0 (latest) — 2024-11-12
- 1.0.3 — 2024-07-05
- 2.2.0 — 2023-03-15
- 2.1.0 — 2023-03-08
- 2.0.12 — 2022-09-07
- 1.0.2 — 2022-09-07
- 0.1.3 — 2022-09-07
- 0.1.2 — 2022-09-07
- 1.0.1 — 2022-09-07
- 2.0.11 — 2022-08-23
- 2.0.1 — 2022-08-21
- 1.0.0 — 2022-08-21
- 2.0.0 — 2022-08-19
- 0.1.1 — 2022-03-16
- 0.1.0 — 2022-03-14

## README

## v-scale-screen

If you are using React, move to [r-scale-screen](https://github.com/Alfred-Skyblue/r-scale-screen)

English | [简体中文](./README.zh_CN.md)

Large-screen adaptive container component, which can be used for large-screen project development, realizes screen adaptation, and can be adaptive according to width, height, and width and height ratios, and full-screen adaptation

> In version 2.2.0 +, we support both vue > = v3 or > = 2.7, if your project is vue 2.6 version below, then use 1 x version

### Demo

![图例](./src/assets/scale_screen.gif)

### Install

```bash
npm install v-scale-screen
# or
yarn add v-scale-screen
```



#### vue2.6 version


In vue2, we use plugin export, so we need Vue.use() to register

```js
// main.js
import Vue from 'vue'
import VScaleScreen from 'v-scale-screen'

Vue.use(VScaleScreen)
```

```vue
<template>
  <v-scale-screen width="1920" height="1080">
    <div>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
    </div>
  </v-scale-screen>
</template>
```

> Note: Please set `body` style to `overflow: hidden;` when using

#### Vue3 or Vue2.7 version

We export as components in vue 3

```vue
<template>
  <v-scale-screen width="1920" height="1080">
    <div>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
    </div>
  </v-scale-screen>
</template>

<script>
import { defineComponent } from 'vue'
import VScaleScreen from 'v-scale-screen'

export default defineComponent({
  name: 'Demo',
  components: {
    VScaleScreen
  }
})
</script>
```

### API

| Property           | Description                                                                                                                                                                                                                                                                                                    | Type                             | Default |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
| width              | Large screen width                                                                                                                                                                                                                                                                                             | `Number` or `String`             | 1920    |
| height             | Large screen height                                                                                                                                                                                                                                                                                            | `Number` or `String`             | 1080    |
| autoScale          | Adaptive configuration, when configured as a boolean type, it is to enable or disable the adaptive configuration. When configured as an object, if x is true, the x-axis generates a margin; when y is true, the y-axis generates a margin. This configuration is enabled when the full screen is enabled fail | Boolean or {x:boolean,y:boolean} | true    |
| delay              | Window resize delay time                                                                                                                                                                                                                                                                                       | Number                           | 500     |
| fullScreen         | Full-screen self-adaptive, there will be a stretching effect when this configuration item is enabled, and auto Scale will be invalid. It is not recommended to enable it if it is not necessary                                                                                                                | Boolean                          | false   |
| boxStyle           | Modify the container style, such as the side background color when displaying in the center, conforming to the Vue two-way binding style standard format                                                                                                                                                       | Object                           | null    |
| wrapperStyle       | Modify the adaptive area style to conform to the Vue two-way binding style standard format                                                                                                                                                                                                                     | Object                           | null    |
| bodyOverflowHidden | After enabling, the body style will be automatically set to `overflow: hidden`                                                                                                                                                                                                                                 | Boolean                          | true    |

---
_Source: https://npm.io/package/v-scale-screen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._