Commit b5a596f

committed

feat: Add px to responsive min/max vw in inline styles

1 parent 88f2d33 commit b5a596fCopy full SHA for b5a596f

File tree

+19

-6

lines changed

+19

-6

lines changed

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`"name": "vue3-vant-mobile",`
`3`	`3`	`"type": "module",`
`4`	`4`	`"version": "2.3.7",`
`5`		`- "packageManager": "pnpm@9.4.0",`
	`5`	`+ "packageManager": "pnpm@9.6.0",`
`6`	`6`	`"description": "Vue + Vite H5 Starter Template",`
`7`	`7`	`"license": "MIT",`
`8`	`8`	`"scripts": {`

Lines changed: 18 additions & 5 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,28 @@`
	`1`	`+/**`
	`2`	`+ * 支持行内样式 px 转 vw`
	`3`	`+ * 本文件代码来自于 scale-view 开源项目`
	`4`	`+ * 源代码链接:https://github.com/wswmsword/scale-view`
	`5`	`+ * 非常感谢作者 @wswmsword 的支持`
	`6`	`+ */`
	`7`	`+`
`1`	`8`	`import { round } from 'lodash-es'`
`2`	`9`
`3`		`-// 设计稿的宽度`
`4`		`-const width = 375`
	`10`	`+// 理想宽度,设计稿的宽度`
	`11`	`+const idealWidth = 375`
	`12`	`+`
	`13`	`+// 表示伸缩视图的最大宽度`
	`14`	`+const maxWidth = 600`
`5`	`15`
`6`	`16`	`/**`
`7`		`- * vw 转换`
	`17`	`+ * 限制大小的 vw 转换`
`8`	`18`	`* @param {number} n`
`9`	`19`	`*/`
`10`	`20`	`export default function vw(n: number) {`
`11`	`21`	`if (n === 0)`
`12`	`22`	`return n`
`13`		`- const vwN = round(n * 100 / width, 3)`
`14`		- return `${vwN}vw`
	`23`	`+`
	`24`	`+ const vwN = round(n * 100 / idealWidth, 3)`
	`25`	`+ const maxN = round(n * maxWidth / idealWidth, 3)`
	`26`	`+ const cssF = n > 0 ? 'min' : 'max'`
	`27`	+ return `${cssF}(${vwN}vw, ${maxN}px)`
`15`	`28`	`}`

Comments

(0)