{"id":15029611,"url":"https://github.com/alfred-skyblue/v-scale-screen","last_synced_at":"2025-05-14T06:05:05.999Z","repository":{"id":37712143,"uuid":"469788410","full_name":"Alfred-Skyblue/v-scale-screen","owner":"Alfred-Skyblue","description":"Vue large screen adaptive component vue大屏自适应组件","archived":false,"fork":false,"pushed_at":"2024-11-12T12:50:17.000Z","size":125510,"stargazers_count":1149,"open_issues_count":19,"forks_count":123,"subscribers_count":6,"default_branch":"v3.0","last_synced_at":"2025-04-03T22:33:00.003Z","etag":null,"topics":["css3","echarts","scale","screen","typescript","vue","vue3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alfred-Skyblue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-14T15:16:02.000Z","updated_at":"2025-03-31T03:31:12.000Z","dependencies_parsed_at":"2024-12-12T07:01:22.388Z","dependency_job_id":"f22e9ae7-b7be-4104-88d0-d9b18f9d6ab8","html_url":"https://github.com/Alfred-Skyblue/v-scale-screen","commit_stats":{"total_commits":19,"total_committers":3,"mean_commits":6.333333333333333,"dds":"0.10526315789473684","last_synced_commit":"24e26eb9814cb9308f0be669c4f1a9dd1a88d2f3"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fv-scale-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fv-scale-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fv-scale-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alfred-Skyblue%2Fv-scale-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alfred-Skyblue","download_url":"https://codeload.github.com/Alfred-Skyblue/v-scale-screen/tar.gz/refs/heads/v3.0","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248324745,"owners_count":21084788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","echarts","scale","screen","typescript","vue","vue3"],"created_at":"2024-09-24T20:11:11.797Z","updated_at":"2025-04-11T01:29:17.004Z","avatar_url":"https://github.com/Alfred-Skyblue.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## v-scale-screen\n\nIf you are using React, move to [r-scale-screen](https://github.com/Alfred-Skyblue/r-scale-screen)\n\nEnglish | [简体中文](./README.zh_CN.md)\n\nLarge-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\n\n\u003e In version 2.2.0 +, we support both vue \u003e = v3 or \u003e = 2.7, if your project is vue 2.6 version below, then use 1 x version\n\n### Demo\n\n![图例](./src/assets/scale_screen.gif)\n\n### Install\n\n```bash\nnpm install v-scale-screen\n# or\nyarn add v-scale-screen\n```\n\n\n\n#### vue2.6 version\n\n\nIn vue2, we use plugin export, so we need Vue.use() to register\n\n```js\n// main.js\nimport Vue from 'vue'\nimport VScaleScreen from 'v-scale-screen'\n\nVue.use(VScaleScreen)\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cv-scale-screen width=\"1920\" height=\"1080\"\u003e\n    \u003cdiv\u003e\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\n    \u003c/div\u003e\n  \u003c/v-scale-screen\u003e\n\u003c/template\u003e\n```\n\n\u003e Note: Please set `body` style to `overflow: hidden;` when using\n\n#### Vue3 or Vue2.7 version\n\nWe export as components in vue 3\n\n```vue\n\u003ctemplate\u003e\n  \u003cv-scale-screen width=\"1920\" height=\"1080\"\u003e\n    \u003cdiv\u003e\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\n      \u003cv-chart\u003e....\u003c/v-chart\u003e\n    \u003c/div\u003e\n  \u003c/v-scale-screen\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { defineComponent } from 'vue'\nimport VScaleScreen from 'v-scale-screen'\n\nexport default defineComponent({\n  name: 'Demo',\n  components: {\n    VScaleScreen\n  }\n})\n\u003c/script\u003e\n```\n\n### API\n\n| Property           | Description                                                                                                                                                                                                                                                                                                    | Type                             | Default |\n| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |\n| width              | Large screen width                                                                                                                                                                                                                                                                                             | `Number` or `String`             | 1920    |\n| height             | Large screen height                                                                                                                                                                                                                                                                                            | `Number` or `String`             | 1080    |\n| 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    |\n| delay              | Window resize delay time                                                                                                                                                                                                                                                                                       | Number                           | 500     |\n| 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   |\n| 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    |\n| wrapperStyle       | Modify the adaptive area style to conform to the Vue two-way binding style standard format                                                                                                                                                                                                                     | Object                           | null    |\n| bodyOverflowHidden | After enabling, the body style will be automatically set to `overflow: hidden`                                                                                                                                                                                                                                 | Boolean                          | true    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfred-skyblue%2Fv-scale-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falfred-skyblue%2Fv-scale-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfred-skyblue%2Fv-scale-screen/lists"}