vue3-html-px-loader

描述

在使用vue3框架开发移动端的项目场景下,通常单位px需要经过响应式处理转变成rem单位.

庆幸的是post-css提供的插件能将<style></style>下的单位进行转换.

但是template中使用:style="{height:'30px'}"却无法变换,vue3-html-px-loader提供了一种快捷的方式对template中的单位变换给与支持.

安装

vue3项目下运行yarn add vue3-html-px-loader -D安装loader

配置

在项目根目录vue.config.js添加如下配置.

module.exports = {
    chainWebpack:config =>{
        config.module
        .rule('vue')
        .test(/\.vue$/)
        .use('vue3-html-px-loader')
        .loader('vue3-html-px-loader')
        .tap(options => { 
            options = {
                ...options,
                dir:'@/util.js',
                funName:'pxHanlder'
            }
            return options
        })
        .end()
    }
}

配置中需要添加两个核心参数:

• dir: 单位转换函数的路径
• funName: 单位转换函数的名称

例如案例如下,在项目目录/src/util.js中定义如下方法,用于单位换算.

export const pxHanlder = (value:string | number)=>{

  value = Number(value);
  // 将750px的设计稿的测量的长度转换成不同手机屏幕下的数值 
  return value/750 * document.documentElement.clientWidth;
  
}

页面组件@/views/Home.vue代码如下.

<template>
  <button :style="{fontSize:`${fontSize}px`}" class="color">
    hello world
  </button>
</template>
<script>
import { defineComponent } from 'vue'
 export default defineComponent({
   setup() {
     return {
       fontSize:100
     }
   }
 })
</script>
<style>...</style>

经过vue3-html-px-loader配置后:

• 将dir设置为@/util.js
• 将funName设置为pxHanlder

vue3-html-px-loader会将@/views/Home.vue代码自动转换成如下形式.

<template>
  <button :style="{fontSize:`${pxHanlder(fontSize)}px`}" class="color">
    hello world
  </button>
</template>
<script>
import { pxHanlder } from "@/views/Home.vue";
import { defineComponent } from 'vue'
 export default defineComponent({
   setup() {
       return {
           fontSize:100,
           pxHanlder
       }
   }
 })
</script>
<style>...</style>

值得注意.template中的px单位必须要被${}包裹才能被vue3-html-px-loader处理.

vue3-html-px-loader省去了人工导入和填充工具方法的环节,使开发者能更加投入到业务工作中.