update 单位换算

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;">
+        <w-code language="html">{{ ` <div style="position: relative; height: 10em;">
-          <div class="w-seal" style="color: red;">
+            <div class="w-seal" style="color: red;">
-            <div>印章效果</div>
+              <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 ref="emRef2" style="font-size: 20px;">
-            <div>PASS</div>
+            <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);

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
-}
+}

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);
+}