https://github.com/alfred-skyblue/v-scale-screen
Vue large screen adaptive component vue大屏自适应组件
https://github.com/alfred-skyblue/v-scale-screen
css3 echarts scale screen typescript vue vue3
Last synced: 19 days ago
JSON representation
Vue large screen adaptive component vue大屏自适应组件
- Host: GitHub
- URL: https://github.com/alfred-skyblue/v-scale-screen
- Owner: Alfred-Skyblue
- License: mit
- Created: 2022-03-14T15:16:02.000Z (about 3 years ago)
- Default Branch: v3.0
- Last Pushed: 2024-11-12T12:50:17.000Z (7 months ago)
- Last Synced: 2025-04-03T22:33:00.003Z (about 2 months ago)
- Topics: css3, echarts, scale, screen, typescript, vue, vue3
- Language: TypeScript
- Homepage:
- Size: 120 MB
- Stars: 1,149
- Watchers: 6
- Forks: 123
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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
### 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
....
....
....
....
....
```
> Note: Please set `body` style to `overflow: hidden;` when using
#### Vue3 or Vue2.7 version
We export as components in vue 3
```vue
....
....
....
....
....
import { defineComponent } from 'vue'
import VScaleScreen from 'v-scale-screen'
export default defineComponent({
name: 'Demo',
components: {
VScaleScreen
}
})
```
### 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 |