在做移动端开发，我们希望px自动转成rem，有三种方法1JS计算 就是自己手动去算，在app.vue中，通过JavaScript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size。const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏
如果是做 PC 端的网页，无需做 rem 适配，但是做 H5 开发，rem 是需要做一下的 方案一： Vant 官方也为我们提供了方案，如下图所示： 咱们就按照官方为我们提供的方案进行适配，安装它们： yarn add lib-flexible -S yarn add postcss-pxtorem ...
转载
2021-10-12 16:01:00
729阅读
点赞
#box { height: 44px //用postcss-px2rem插件配置后相当于0.44rem width: 100% font-size: 24px;/*no*/ //如果不想用插件转换可以用/*no*/标识符} ...
转载
2021-08-30 11:43:00
800阅读
2评论
我们都知道echarts图标数据是写在option = {}对象里，但是数据不可能是固定值，而是通过后端接口返回来的，本以为只需要在 data里设置一个变量去接收返回的数据，然后再将变量赋值给echarts就可以了，结果踩坑了！发现这样并不能生效。 经过一段时间分析，原因就是 vue axios属于异步加载数据，数据改变了，但是没有告诉echarts，导致echarts并不知道数据变化了，所以得在
一个认真生活的人，都值得被认
转载
2022-04-21 13:49:39
365阅读
一、父传子//父组件
<template>
<div id="app">
<Subassembly :Properties="Properties"/>//绑定一个属性挂载要传输的变量
</div>
</template>
<script>
import Subassembly from '组件路径';
expor
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。技术栈vue-cli：使用脚手架工具创建项目。postcss-pxtorem：转换px为rem的插件。自动设置根节点html
在我们现在的无纸化办公环境下，大家可以方便的制作出各种电子表格excel，使用公式和函数对数据进行复杂的运算。例如：财务报表、订货单、验收单、成绩单等，现在都是走向无纸化办公，采用excel表格文件进行统计。因此一些对于我们重要的excel文件中的数据属于重要资源，都不是以excel表格文件形式存在的，大多编辑会进行用PDF封存防止他人使用，对自己文化创造成损失，同时很多的公司内部网站也会将上传的
转载
2024-10-16 07:32:05
26阅读
本文总结日常开发中26个CSS实现方法，如有遗漏或补充，还请指正！解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移.wrap {
display: inline-block;
overflow: hidden
vertical-align: bottom
} 超出部分显示省略号// 单行文本
.wrap {
overf
安装flexiblenpm install lib-flexible --save引入flexible在项目入口文件main.js中添加如下代码，引入flexibleimport 'lib-flexible'px 转 rem使用 webpack 的 px2rem-loader,自动将px转换为rem安装px2rem-loadernpm install px2rem-loader --save-de
转载
2024-07-11 19:42:08
819阅读
最近为移动端使用rem雪碧图小图标自适应困扰，想了半天终于找到解决方案！难点在于雪碧图要跟随屏幕缩小，下面我们进入正题！ 大家先要明白rem是什么，我给大家个新的理解，rem的本质就是百分比转换，不明白的童鞋可以具体去恶补下rem相关知识！既然rem的本质是百分比转换，那么我们也可以通过同样的方法转换雪碧图，下面上案例！  
Vue读取网络路径Excel文件转换为Html预览，打印前言一、预览EXCEL文件1.获取网络路径Excel文件2.转换格式后的数据3.最终结果二、打印文件 前言我们需要对一些Excel文件进行预览，那么可以调用第三方的接口转到别的页面进行预览，可是这样比较花费时间，而且还受到网络网速的影响。因此我们可以将Exce文件转为html的table格式或者是json格式来达到我们获取信息的目的一、预览
转载
2024-04-09 13:20:41
62阅读
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。技术栈vue-cli：使用脚手架工具创建项目。postcss-pxtorem：转换px为rem的插件。自动设置根节点html
转载
2024-02-26 12:46:39
280阅读
安装npm install px2rem-loader lib-flexible --save 入口文件main.js加上import 'lib-flexible/flexible.js'在index.html加上 <meta name="viewport" content="width=device-width,initial-scale=1.0"> <met...
原创
2021-08-26 11:21:26
512阅读
px2rem-loader 需要与 flexible 配合使用，不然px2rem仅仅只是转成rem却不会设置rem的信息安装 flexiblenpm i lib-flexible -S然后在main.js中引入import ‘lib-flexible/flexible’直接引入的文件需要有优先与引用的组件安装px2rem-loadernpm i px2rem-loader -D在b...
原创
2022-03-29 10:16:34
275阅读
安装npm install px2rem-loader lib-flexible --save 入口文件main.js加上import 'lib-flexible
原创
2022-03-08 14:40:36
435阅读
vue项目与nuxt.js实在有着太多的不同，例如项目结构变化很大，router.js没了，vuex store写法有变化，router钩子没了等等。老项目毕竟也有一些体量，这么折腾我可接受不了，不过经过一番调查，我发现这些问题不是不可以解决。因此虽然迁移是要迁移的，但是要尽量保持vue-cli 3项目的风味，以最小的改动完成迁移。为此我做了很多调查，本文的目的就在于此。1、重建项目没啥可说的，直
插件安装npm install postcss-px2rem -Snpm install px2rem-loader -Snpm install lib-flexible -S使用build目录下vue
转载
2022-05-26 12:23:20
341阅读
目录一，进入/离开过渡效果二，过渡效果的钩子函数三，过渡效果+Animate.css四，列表过渡 一，进入/离开过渡效果进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果；如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式；过渡的类名：过渡效果的样式是类样式
第一步 ： npm install lib-flexible postcss-pxtorem -S 第二步： 运行指令展示出 webapck.config.js 文件 npm run ejectAre you sure you want to eject? This action is perman ...
转载
2021-04-23 16:29:00
1448阅读
2评论
