u-scale v0.0.2

UI缩放与适配解决方案

概述

<u-scale> 是一款专为数字孪生和可视化应用打造的 UI 缩放和适配插件。在数字孪生技术中，用户界面（UI）需在各种屏幕尺寸和分辨率下无缝工作，以确保一致的用户体验。

特点

• 针对性强： 明确针对数字孪生和高保真可视化应用，这意味着它在处理复杂的3D模型和大规模数据可视化方面进行了特别优化。
• 性能优化：通过节流和防抖机制， 减少了不必要的重绘，这在处理大量动态内容时尤为关键。相比之下，其他框架可能更多依赖于标准的CSS媒体查询和JavaScript事件监听。
• CSS3D支持：对于需要高性能3D渲染的应用， 的CSS3D变换支持可以带来显著的性能提升和渲染质量改善。

安装与使用

1. 安装：通过 npm 安装 <u-scale> 插件。

   npm install u-scale

2. 全局注册：在 Vue 应用中导入并注册插件。

   import { createApp } from 'vue';
   import App from './App.vue';
   import { useUscale } from 'u-scale';
   
   const app = createApp(App);
   app.use(useUscale, {
     target: '#app', // 目标元素
     size: [1920, 1080], // 设计图尺寸
     type: 'auto',  // 如何调整缩放 ('width', 'height', 或 'auto')
     css3d: true, // 是否使用 CSS 3D 变换
     ratio: 1920 / 1080, // 缩放比例阈值
     wait: 100 // 更新缩放的节流间隔
   });
   app.mount('#app');

3. 在app.vue内开启监听

      <script setup lang="ts">
      import { onMounted, onUnmounted } from 'vue'
      import { useUscale, destroyUscale } from "./index";
   
      onMounted(() => {
        useUscale()
      })
      onUnmounted(() => {
        destroyUscale()
      })
   
     </script>

4. 组件使用 使用 <u-scale> 组件实现响应式屏幕适配。

   <template>
     <u-scale :origin="'left'" :top="0" :left="0" :pointerEvents="'auto'" :unit="'%'" :wait="100">
       <!-- 子组件或内容 -->
     </u-scale>
   </template>

组件属性详述

在实际应用中，根据具体需求，可能需要根据上下文确定哪些字段是必需的。例如，在需要精确定位的场景下，top 或 bottom 和 left 或 right 至少需要一个被设置。而在不需要缩放的场景下，noScale 和相应的 width 和 height 就会成为必要的配置项。

注意事项

• 未指定 scale 属性时，将使用全局配置的值。
• 内容应使用百分比或相对单位，以确保正确响应。
• 复杂布局可能需要额外的 CSS 规则以保证元素正确缩放。

最佳实践

• 使用相对单位：为了确保元素能够响应缩放，推荐使用百分比单位 (%) 或者视窗单位 (vw, vh)。
• 考虑性能：虽然 CSS3D 变换提供了更好的渲染效果，但在某些设备上可能会导致性能问题。因此，建议在性能测试后根据实际需要开启或关闭 css3d 属性。
• 测试不同设备：由于 <u-scale> 被设计为跨平台兼容，确保在多种设备和浏览器上进行充分测试，以验证其响应式表现。