@jizirui/auto-fix-vue3

auto-fix-vue3 （大屏自适应容器）

React 项目看这边

安装

npm

npm install @jizirui/auto-fix-vue3

pnpm

pnpm add @jizirui/auto-fix-vue3

yarn

yarn add @jizirui/auto-fix-vue3

---

引入方式

ESM

import { FullScreenContainer } from '@jizirui/auto-fix-vue3'

CommonJS

const { useAutoFix, FullScreenContainer } = require('@jizirui/auto-fix-vue3/dist/cjs')

UMD

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="./node_modules/@jizirui/auto-fix-vue3/dist/umd/index.js"></script>
<script>
  const { createApp } = Vue
  const { canvasStyle, canvasWidth, canvasHeight } = window.autoFix.useAutoFix({
  width: 1920, //设计图宽度
  height: 1080 //设计图高度
})

  // 创建 Vue 实例
  createApp().component('full-screen-container', window.autoFix.FullScreenContainer).mount('#app')
</script>

---

HTML 部分

<!-- 组件形式 -->
<full-screen-container :width="1920" :height="1080">
  <div>柱状图</div>
  <div>饼图</div>
  ...
</full-screen-container>

或

<!-- Hook -->
<div
  :style="{
    width: canvasWidth + 'px',
    height: canvasHeight + 'px',
    ...canvasStyle
  }"
>
  <div>柱状图</div>
  <div>饼图</div>
  ...
</div>