useScalePage

页面缩放

基础用法

<template>
  <div class="bg-gray-100">
    <div class="bg-green-100" ref="mainRef">
      我是内容
    </div>
  </div>
</template>

<script setup lang="tsx">
import { onMounted, ref, useTemplateRef } from "vue";
import { useScalePage } from "gao-components-plus";


const mainRef = useTemplateRef<HTMLElement>('mainRef')
const { init } = useScalePage({width: 500, height: 300, type: 'widthFit'})

onMounted(() => {
  init(mainRef.value!)
})

</script>

参数

名称	描述	类型	默认值
width	容器宽度	Function	-
height	容器高度	number	-
type	缩放类型	contain | 'widthFix'	widthFix

返回参数

名称	描述	类型	默认值
init	开始执行	(el: htmlElement) => void	-
scale	缩放比例	Number	-
resize	手动resize	Function	-