feat: 同时兼容vue2.7 和 vue3

README.md

@@ -4,7 +4,7 @@ English | [简体中文](./README.zh_CN.md)
 
 Large-screen adaptive container component, which can be used for large-screen project development, realizes screen adaptation, and can be adaptive according to width, height, and width and height ratios, and full-screen adaptation
 
-> Note: Please use version 1.x for vue 2, and version 2.0 or above for vue 3
+> In version 2.2.0 +, we support both vue > = v3 or > = 2.7, if your project is vue 2.6 version below, then use 1 x version
 
 ### Demo
 
@@ -18,9 +18,10 @@ npm install v-scale-screen
 yarn add v-scale-screen
 ```
 
-> Note: Please use version 1.x for vue 2, version 1.x for vue 2, version 1.x for vue 2, and important things to say three times
 
-#### vue2
+
+#### vue2.6 version
+
 
 In vue2, we use plugin export, so we need Vue.use() to register
 
@@ -48,7 +49,7 @@ Vue.use(VScaleScreen)
 
 > Note: Please set `body` style to `overflow: hidden;` when using
 
-#### Vue3
+#### Vue3 or Vue2.7 version
 
 We export as components in vue 3
 

README.zh_CN.md

@@ -2,11 +2,8 @@
 
 大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应（会存在拉伸问题）
 
-> 注：vue2 请使用 1.x 版本，vue3 请使用 2.0 以上以上版本
+> 在 2.2.0 以上的版本中，我们同时支持 Vue>=v3或 Vue >=2.7，如果你的项目是vue2.6版本以下，那么使用1.x版本
 
-- 版本变更
-
-  > 已修复 vue2.7 不兼容功能，现阶段 [email protected] 支持 vue2.6.x 和 vue2.7.x 所有版本，vue3 请使用 [email protected] 版本
 
 - 仓库地址：[github](https://github.com/Alfred-Skyblue/v-scale-screen)
 - 国内地址：[gitee](https://gitee.com/yuan_fangY/v-scale-screen)
@@ -23,9 +20,8 @@ npm install v-scale-screen
 yarn add v-scale-screen
 ```
 
-> 注：vue2 请使用 1.x 版本、vue2 请使用 1.x 版本、vue2 请使用 1.x 版本，重要的事情说三遍
 
-#### vue2
+#### vue2.6 版本
 
 在 vue2 中我们使用插件方式导出，故而需要 Vue.use() 进行注册
 
@@ -51,11 +47,8 @@ Vue.use(VScaleScreen)
 </template>
 ```
 
-> 注：使用时请将 `body` 样式设置为 `overflow: hidden;`
-> 注：使用时请将 `body` 样式设置为 `overflow: hidden;`
-> 注：使用时请将 `body` 样式设置为 `overflow: hidden;`
 
-#### Vue3
+#### Vue3 or Vue2.7 版本
 
 // body 默认样式 overflow: hidden;
 我们在 vue3 中以组件方式导出

package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-scale-screen",
   "private": false,
-  "version": "2.1.0",
+  "version": "2.2.0",
   "author": {
     "name": "ypt",
     "email": "[email protected]"

package/VScaleScreen.vue → package/component.ts

@@ -1,23 +1,7 @@
-<!--
- * @Author: ypt
- * @Date: 2022-08-19 20:43:13
- * @Description: 大屏自适应容器组件
--->
-<template>
-  <section :style="{ ...styles.box, ...boxStyle }" class="v-screen-box">
-    <div
-      :style="{ ...styles.wrapper, ...wrapperStyle }"
-      class="screen-wrapper"
-      ref="screenWrapper"
-    >
-      <slot></slot>
-    </div>
-  </section>
-</template>
-<script lang="ts">
 import {
   CSSProperties,
   defineComponent,
+  h,
   nextTick,
   onMounted,
   onUnmounted,
@@ -96,7 +80,7 @@ export default defineComponent({
       default: true
     }
   },
-  setup(props) {
+  setup(props, { slots }) {
     let bodyOverflowHidden: string
     const state = reactive<IState>({
       width: 0,
@@ -125,7 +109,7 @@ export default defineComponent({
       }
     }
 
-    const screenWrapper = ref<HTMLElement>()
+    const el = ref<HTMLElement>()
     /**
      * 初始化大屏容器宽高
      */
@@ -137,8 +121,8 @@ export default defineComponent({
             state.width = props.width
             state.height = props.height
           } else {
-            state.width = screenWrapper.value?.clientWidth
-            state.height = screenWrapper.value?.clientHeight
+            state.width = el.value?.clientWidth
+            state.height = el.value?.clientHeight
           }
           // endregion
 
@@ -164,28 +148,28 @@ export default defineComponent({
      */
     const updateSize = () => {
       if (state.width && state.height) {
-        screenWrapper.value!.style.width = `${state.width}px`
-        screenWrapper.value!.style.height = `${state.height}px`
+        el.value!.style.width = `${state.width}px`
+        el.value!.style.height = `${state.height}px`
       } else {
-        screenWrapper.value!.style.width = `${state.originalWidth}px`
-        screenWrapper.value!.style.height = `${state.originalHeight}px`
+        el.value!.style.width = `${state.originalWidth}px`
+        el.value!.style.height = `${state.originalHeight}px`
       }
     }
 
     const autoScale = (scale: number) => {
       if (!props.autoScale) return
-      const domWidth = screenWrapper.value!.clientWidth
-      const domHeight = screenWrapper.value!.clientHeight
+      const domWidth = el.value!.clientWidth
+      const domHeight = el.value!.clientHeight
       const currentWidth = document.body.clientWidth
       const currentHeight = document.body.clientHeight
-      screenWrapper.value!.style.transform = `scale(${scale},${scale})`
+      el.value!.style.transform = `scale(${scale},${scale})`
       let mx = Math.max((currentWidth - domWidth * scale) / 2, 0)
       let my = Math.max((currentHeight - domHeight * scale) / 2, 0)
       if (typeof props.autoScale === 'object') {
         !props.autoScale.x && (mx = 0)
         !props.autoScale.y && (my = 0)
       }
-      screenWrapper.value!.style.margin = `${my}px ${mx}px`
+      el.value!.style.margin = `${my}px ${mx}px`
     }
     const updateScale = () => {
       // 获取真实视口尺寸
@@ -199,7 +183,7 @@ export default defineComponent({
       const heightScale = currentHeight / +realHeight
       // 若要铺满全屏，则按照各自比例缩放
       if (props.fullScreen) {
-        screenWrapper.value!.style.transform = `scale(${widthScale},${heightScale})`
+        el.value!.style.transform = `scale(${widthScale},${heightScale})`
         return false
       }
       // 按照宽高最小比例进行缩放
@@ -216,7 +200,7 @@ export default defineComponent({
       const observer = (state.observer = new MutationObserver(() => {
         onResize()
       }))
-      observer.observe(screenWrapper.value!, {
+      observer.observe(el.value!, {
         attributes: true,
         attributeFilter: ['style'],
         attributeOldValue: true
@@ -240,7 +224,25 @@ export default defineComponent({
       }
     })
 
-    return { screenWrapper, styles }
+    return () => {
+      return h(
+        'div',
+        {
+          className: 'v-screen-box',
+          style: { ...styles.box, ...props.boxStyle }
+        },
+        [
+          h(
+            'div',
+            {
+              className: 'screen-wrapper',
+              style: { ...styles.wrapper, ...props.wrapperStyle },
+              ref: el
+            },
+            slots.default?.()
+          )
+        ]
+      )
+    }
   }
 })
-</script>

package/index.ts

@@ -1,3 +1,3 @@
-import VScaleScreen from './VScaleScreen.vue'
+import VScaleScreen from './component'
 
 export default VScaleScreen

src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import VScaleScreen from '../package/VScaleScreen.vue'
+import VScaleScreen from '../package/component'
 </script>
 
 <template>
-  <VScaleScreen full-screen>
+  <VScaleScreen>
     <img src="./assets/img.png" alt="" />
   </VScaleScreen>
 </template>