@fit-screen/vue
Scale-based large-screen adaptive solution for Vue Everything is based on the design draft's px size, and the adaptation is done by scale, everything is so simple
🦄 Useage
npm install @fit-screen/vue
# or
yarn add @fit-screen/vue
# or
pnpm install @fit-screen/vueFor Vue 2.6 or below, @vue/composition-api is required separately.
npm install @fit-screen/vue @vue/composition-api
# or
yarn add @fit-screen/vue @vue/composition-api
# or
pnpm install @fit-screen/vue @vue/composition-apiGlobal component
// In main.[jt]s
import { createApp } from 'vue'
import FitScreen from '@fit-screen/vue'
import App from './App.vue'
const app = createApp(App)
app.use(FitScreen)
app.mount('#app')Use in any component
<template>
<FitScreen :width="1920" :height="1080" mode="fit">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo">
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</FitScreen>
</template>SFC
<script setup>
import FitScreen from '@fit-screen/vue'
</script>
<template>
<FitScreen :width="1920" :height="1080" mode="fit">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo">
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</FitScreen>
</template>Props
| Props | Type | Information |
|---|---|---|
| width | number | The design draft width |
| height | number | The design draft height |
| mode | 'fit' | 'scroolX' | 'scroolY' | 'full' | Calculation mode |
| scaleClass | string | object | array | Adaptive container class, The official Vue class usage scheme is fully adopted, with the addition of the prefix |
| scaleStyle | string | object | array | Adaptive container style, The official Vue style usage scheme is fully adopted, with the addition of the prefix |
Vue Interface
interface FitScreenProps {
/**
* The design draft width
* @default 1920
*/
width?: number
/**
* The design draft height
* @default 1080
*/
height?: number
/**
* Function execution mode for calculating scaling ratio
* @default 'throttle'
*/
executeMode: 'throttle' | 'debounce' | 'none'
/**
* Represents the execution rate for debounce and throttle (unit: ms).
* @default 200
*/
waitTime: number
/**
* Calculation mode
* @tips
* 'fit': Adaptive
* 'scrollX': When the actual width exceeds the width of the design, the x-axis appears to scroll and the y-axis adapts
* 'scrollY': Contrary to the above
* 'full': Stretch the page to fill the screen
*/
mode?: 'fit' | 'scrollX' | 'scrollY' | 'full'
/**
* Adaptive container class
*/
scaleClass?: string | object | Array<string | object>
/**
* Adaptive container style
*/
scaleStyle?: string | object | Array<object>
}Events
| event name | description | params |
|---|---|---|
| scaleChange | Callback for change in page calculation ratio | scale: { widthRatio: number, heightRatio: number } |