@screen-fit/screen-fit-vue

screen-fit 的 Vue3 绑定。提供 <ScreenContainer> 与 composables。

安装

pnpm add @screen-fit/screen-fit-vue

Peer：vue >= 3.3

快速开始

// App.tsx（TSX）
import { defineComponent } from 'vue';
import { ScreenContainer } from '@screen-fit/screen-fit-vue';

export default defineComponent({
  setup() {
    return () => (
      <>
        <div class="screen-bg" />
        <ScreenContainer designWidth={1920} designHeight={1080}>
          <Dashboard />
        </ScreenContainer>
      </>
    );
  },
});

<!-- App.vue（SFC） -->
<script setup lang="ts">
import { ScreenContainer } from '@screen-fit/screen-fit-vue';
</script>

<template>
  <div class="screen-bg" />
  <ScreenContainer :design-width="1920" :design-height="1080">
    <Dashboard />
  </ScreenContainer>
</template>

库用 h() 实现组件，不需要为库配置 @vitejs/plugin-vue-jsx。

组件 API

| Prop | 类型 | 默认 | 说明 | |---|---|---|---| | designWidth | number | 1920 | 设计稿宽 | | designHeight | number | 1080 | 设计稿高 | | mode | AdaptMode | 'contain' | 缩放模式 | | minScale | number | 0 | 缩放下限 | | maxScale | number | Infinity | 缩放上限 | | rotateOnPortrait | boolean | false | 竖屏旋转 | | hideUntilReady | boolean | true | 首屏防闪烁 |

Slots：default

Expose：

const containerRef = ref();
containerRef.value.getAdapter();  // ScreenAdapter 实例
containerRef.value.info.value;    // AdaptInfo

Composables

useScreenInfo(): Ref<AdaptInfo | null>

const info = useScreenInfo();
return () => <div>{info.value?.viewportWidth}</div>;

useScreenAdapter(): ScreenAdapter | null

const adapter = useScreenAdapter();
adapter?.refresh();

进阶

断点布局

const info = useScreenInfo();
return () => (
  <div class={[
    'dashboard',
    info.value?.isUltraWide && 'dashboard--ultra',
    info.value?.isNarrow && 'dashboard--narrow',
  ]}>
  </div>
);

弹窗挂到 body

transform 祖先会让子元素 position: fixed 相对祖先定位。用 Vue 内置 <Teleport>：

import { Teleport } from 'vue';

<Teleport to="body">
  <div class="modal">...</div>
</Teleport>

License

MIT