Commit c4b4134

committed

feat: convert px to vw in inline styles

1 parent 80d9c65 commit c4b4134Copy full SHA for c4b4134

File tree

+18

-1

lines changed

+18

-1

lines changed

Lines changed: 3 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
`1`	`1`	`<script setup lang="ts">`
	`2`	`+import vw from '@/utils/inline-px-to-vw'`
	`3`	`+`
`2`	`4`	`defineProps({`
`3`	`5`	`paddingT: {`
`4`	`6`	`type: Number,`
`@@ -14,7 +16,7 @@ defineProps({`
`14`	`16`	`<template>`
`15`	`17`	`<main`
`16`	`18`	`class="absolute left-0 h-full w-full overflow-y-auto"`
`17`		- :style="`padding-top: ${paddingT}px; padding-left: ${paddingX}px; padding-right: ${paddingX}px`"
	`19`	+ :style="`padding-top: ${vw(paddingT)}; padding-left: ${vw(paddingX)}; padding-right: ${vw(paddingX)}`"
`18`	`20`	`>`
`19`	`21`	`<slot />`
`20`	`22`	`</main>`

Lines changed: 15 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,15 @@`
	`1`	`+import { round } from 'lodash-es'`
	`2`	`+`
	`3`	`+// 设计稿的宽度`
	`4`	`+const width = 375`
	`5`	`+`
	`6`	`+/**`
	`7`	`+ * vw 转换`
	`8`	`+ * @param {number} n`
	`9`	`+ */`
	`10`	`+export default function vw(n: number) {`
	`11`	`+ if (n === 0)`
	`12`	`+ return n`
	`13`	`+ const vwN = round(n * 100 / width, 3)`
	`14`	+ return `${vwN}vw`
	`15`	`+}`

Comments

(0)