如何用vs2010做网站,昆明广告网站制作,vue 做pc网站,典型网站开发的流程图背景说明
如果你的 Ant Design Vue 项目有要做适配的需求#xff0c;那首先要选择一种适配方案。笔者选择的是用 postcss-px2rem 进行适配。笔者在配置了 postcss-px2rem的相关配置后#xff0c;发现 postcss-px2rem 没有对 Ant Design Vue 进行适配。在网上看了一些文章之后…背景说明
如果你的 Ant Design Vue 项目有要做适配的需求那首先要选择一种适配方案。笔者选择的是用 postcss-px2rem 进行适配。笔者在配置了 postcss-px2rem的相关配置后发现 postcss-px2rem 没有对 Ant Design Vue 进行适配。在网上看了一些文章之后发现想对 Ant Design Vue 进行适配需要走它自己的规则给 a-style-provider 组件传入 transformers 的 props。Ant Design Vue 官方自己提供了一套 transformers 方法用这套方法可以对大于1px的单位进行转换而不凑巧的是笔者的项目有对1px进行适配的需求所以笔者必须解决这个问题。
解决方案
不直接用官方的方案而是用官方方案的修改版。
编写一个px2rem的方法然后在 a-style-provider 里引进去。
// 这应该是一个文件例如px2Rem.ts
import unitless from emotion/unitless
export interface Options {/*** The root font size.* default 16*/rootValue?: number/*** The decimal numbers to allow the REM units to grow to.* default 5*/precision?: number/*** Whether to allow px to be converted in media queries.* default false*/mediaQuery?: boolean
}const pxRegex /url\([^)]\)|var\([^)]\)|(\d*\.?\d)px/gfunction toFixed(number: number, precision: number) {const multiplier Math.pow(10, precision 1),wholeNumber Math.floor(number * multiplier)return (Math.round(wholeNumber / 10) * 10) / multiplier
}const transform (options: Options {}): Transformer {const { rootValue 16, precision 5, mediaQuery false } optionsconst pxReplace (m: string, $1: any) {if (!$1) return mconst pixels parseFloat($1)if (pixels 1) return mconst fixedVal toFixed(pixels / rootValue, precision)return ${fixedVal}rem}const visit (cssObj: any): any {const clone: any { ...cssObj }Object.entries(cssObj).forEach(([key, value]) {if (typeof value string value.includes(px)) {const newValue value.replace(pxRegex, pxReplace)clone[key] newValue}// no unitif (!unitless[key] typeof value number value ! 0) {clone[key] ${value}px.replace(pxRegex, pxReplace)}// Media queriesconst mergedKey key.trim()if (mergedKey.startsWith() mergedKey.includes(px) mediaQuery) {const newKey key.replace(pxRegex, pxReplace)clone[newKey] clone[key]delete clone[key]}})return clone}return { visit } as Transformerany, any
}export default transform
App.vue该如下
import px2rem from ./px2Rem.ts // 自行修改
templatea-config-providera-style-provider :transformers[px2rem]component //a-style-provider/a-config-provider
/template
