From b264e46bdb27784d28fc1e7c7d723e0ba543a749 Mon Sep 17 00:00:00 2001
From: jlzhou <12020042@qq.com>
Date: Fri, 28 Feb 2025 09:59:59 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=8D=95=E4=BD=8D=E6=8D=A2=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bi-ui/src/pages/test/components.vue | 79 ++++++++++++++++++++++++-----
 bi-ui/src/util/index.js             |  4 +-
 bi-ui/src/util/modules/unit.js      | 24 +++++++++
 3 files changed, 93 insertions(+), 14 deletions(-)
 create mode 100644 bi-ui/src/util/modules/unit.js

diff --git a/bi-ui/src/pages/test/components.vue b/bi-ui/src/pages/test/components.vue
index b2f3adc..431b32a 100644
--- a/bi-ui/src/pages/test/components.vue
+++ b/bi-ui/src/pages/test/components.vue
@@ -284,8 +284,8 @@ codeRef.setCode('new code');//设置代码
           <div class="w-part-hide" style="background-color: red;--top:2em;--bottom:2em;"></div>
         </div>
 
-        
-        <w-code language="html">{{ `          <div class="w-part-hide" style="background-color: red;"></div>
+
+        <w-code language="html">{{ ` <div class="w-part-hide" style="background-color: red;"></div>
           <div class="w-part-hide" style="background-color: red;--top:0;--bottom:2em;"></div>
           <div class="w-part-hide" style="background-color: red;--top:2em;--bottom:0em;"></div>
           <div class="w-part-hide" style="background-color: red;--top:2em;--bottom:2em;"></div>` }}
@@ -296,26 +296,73 @@ codeRef.setCode('new code');//设置代码
           <div class="w-seal" style="color: red;">
             <div>印章效果</div>
           </div>
-          <div class="w-seal" style="color: var(--w-main); font-size: 1.5em; top:0; left:10em; transform: rotate(45deg) scale(.6); ">
+          <div class="w-seal"
+            style="color: var(--w-main); font-size: 1.5em; top:0; left:10em; transform: rotate(45deg) scale(.6); ">
             <div>PASS</div>
           </div>
         </div>
-        
-        
-        <w-code language="html">{{ `        <div style="position: relative; height: 10em;">
-          <div class="w-seal" style="color: red;">
-            <div>印章效果</div>
+
+
+        <w-code language="html">{{ ` <div style="position: relative; height: 10em;">
+            <div class="w-seal" style="color: red;">
+              <div>印章效果</div>
+            </div>
+            <div class="w-seal"
+              style="color: var(--w-main); font-size: 1.5em; top:0; left:10em; transform: rotate(45deg) scale(.6); ">
+              <div>PASS</div>
+            </div>
+          </div>` }}
+        </w-code>
+      </el-tab-pane>
+
+      <el-tab-pane label="单位换算">
+        <h2>尺寸转换</h2>
+        <div style="display: grid; gap: 1em; grid-template-columns: repeat(3, 30vw);grid-template-rows: 15em;">
+          <div ref="emRef1" style="font-size: 10px;">
+            <div>1em: <b v-if="emRef1" v-text="unit.get1em(emRef1)"></b>px;</div>
+            <div>1rem: <b v-text="unit.get1rem()"></b>px;</div>
+            <div>10px = <b v-if="emRef1" v-text="unit.px2em(emRef1, 10)"></b>em</div>
+            <div>10px = <b v-text="unit.px2rem('10px')"></b>rem</div>
+            <div>10rem = <b v-text="unit.rem2px(10)"></b>px</div>
+            <div>10em = <b v-if="emRef1" v-text="unit.em2px(emRef1, '10em')"></b>px</div>
           </div>
-          <div class="w-seal" style="color: var(--w-main); font-size: 1.5em; top:0; left:10em; transform: rotate(45deg) scale(.6); ">
-            <div>PASS</div>
+          <div ref="emRef2" style="font-size: 20px;">
+            <div>1em: <b v-if="emRef2" v-text="unit.get1em(emRef2)"></b>px;</div>
+            <div>1rem: <b v-text="unit.get1rem()"></b>px;</div>
+            <div>10px = <b v-if="emRef2" v-text="unit.px2em(emRef2, 10)"></b>em</div>
+            <div>10px = <b v-text="unit.px2rem('10px')"></b>rem</div>
+            <div>10rem = <b v-text="unit.rem2px(10)"></b>px</div>
+            <div>10em = <b v-if="emRef2" v-text="unit.em2px(emRef2, '10em')"></b>px</div>
           </div>
-        </div>` }}
+          <div ref="emRef3" style="font-size: 30px;">
+            <div>1em: <b v-if="emRef3" v-text="unit.get1em(emRef3)"></b>px;</div>
+            <div>1rem: <b v-text="unit.get1rem()"></b>px;</div>
+            <div>10px = <b v-if="emRef3" v-text="unit.px2em(emRef3, 10)"></b>em</div>
+            <div>10px = <b v-text="unit.px2rem('10px')"></b>rem</div>
+            <div>10rem = <b v-text="unit.rem2px(10)"></b>px</div>
+            <div>10em = <b v-if="emRef3" v-text="unit.em2px(emRef3, '10em')"></b>px</div>
+          </div>
+        </div>
+        <w-code language="html">{{ ` <div ref="emRef1" style="font-size: 10px;">
+            <div>1em: <b v-if="emRef1" v-text="unit.get1em(emRef1)"></b>px;</div>
+            <div>1rem: <b v-text="unit.get1rem()"></b>px;</div>
+            <div>10px = <b v-if="emRef1" v-text="unit.px2em(emRef1,10)"></b>em</div>
+            <div>10px = <b v-text="unit.px2rem('10px')"></b>rem</div>
+            <div>10rem = <b v-text="unit.rem2px(10)"></b>px</div>
+            <div>10em = <b v-if="emRef1" v-text="unit.em2px(emRef1,'10em')"></b>px</div>
+          </div>
+<script>
+import { ref,useTemplateRef } from 'vue';
+const emRef1 = ref(undefined);
+const emRef2 = useTemplateRef("emRef2");
+const emRef3 = proxy.$refs.emRef3;
+</script>`
+        }}
         </w-code>
       </el-tab-pane>
 
 
 
-
     </el-tabs>
     <div style="height: 20vh;"></div>
   </div>
@@ -323,7 +370,8 @@ codeRef.setCode('new code');//设置代码
 <script setup>
 
 import { ElMessage } from 'element-plus';
-import { ref } from 'vue';
+import { ref, useTemplateRef } from 'vue';
+import { unit } from '@/util'
 
 const tabIndex = ref(localStorage.getItem('componentsTabIndex') || 'code');
 
@@ -333,6 +381,11 @@ watch(tabIndex, (newValue) => {
 
 const { proxy } = getCurrentInstance();
 
+const emRef1 = ref(undefined);
+const emRef2 = useTemplateRef("emRef2");
+const emRef3 = proxy.$refs.emRef3;
+
+
 const to = ref(100)
 
 const switchValue = ref(true);
diff --git a/bi-ui/src/util/index.js b/bi-ui/src/util/index.js
index cbf0389..0d8951c 100644
--- a/bi-ui/src/util/index.js
+++ b/bi-ui/src/util/index.js
@@ -12,6 +12,8 @@ export const util = {
 import * as jsencrypt from './modules/jsencrypt'
 export { jsencrypt }
 
+export * as unit from  './modules/unit'
+
 export { IdGenerator} from './modules/IdGenerator'
 
 export { timerBind, timerUnBind } from "./modules/timer";
@@ -48,4 +50,4 @@ export function deepClone(source) {
     }
   })
   return targetObj
-}
\ No newline at end of file
+}
diff --git a/bi-ui/src/util/modules/unit.js b/bi-ui/src/util/modules/unit.js
new file mode 100644
index 0000000..e335dd5
--- /dev/null
+++ b/bi-ui/src/util/modules/unit.js
@@ -0,0 +1,24 @@
+import { unref } from 'vue';
+export const px2rem = (a) => {
+  return parseFloat(a) / parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+}
+
+export const rem2px = (a) => {
+  return parseFloat(a) * parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+}
+
+export const px2em = (el,a) => {
+  return parseFloat(a) / parseFloat(window.getComputedStyle(unref(el)).fontSize);
+}
+
+export const em2px = (el,a) => {
+  return parseFloat(a) * parseFloat(window.getComputedStyle(unref(el)).fontSize);
+}
+
+export const get1rem = ()=>{
+  return parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+}
+
+export const get1em = (el)=>{
+  return parseFloat(window.getComputedStyle(unref(el)).fontSize);
+}
\ No newline at end of file