一、rem之px2rem适配
前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便、实用、高效的适配方案是件很纠结的事情。 深有体会...
经过多个移动端项目从最初的 viewport --> 百分比 --> rem --> rem的升级版px2rem可谓是一把鼻涕一把泪啊 ,在px2rem之前总觉得之前的不够完美或者麻烦;
进入正题: 首先 px2rem 也是基于 rem 适配的,但是他的好用之处在于灵活、简便、高效不用我们自己去换算、px2rem-loader 会帮我们换算转换成rem适配各种机型;
1、安装 px2rem-loader (webpack构建的项目)
npm i px2rem-loader --save-dev
2、(build/utils.js文件)配置 px2rem-loader
// utils.js const cssLoader = { loader: ‘css-loader‘, options: { sourceMap: options.sourceMap } } /* px2rem */ const px2remLoader = { loader: ‘px2rem-loader‘, options: { remUnit: 75 // 设计稿宽度/10 remUnit的值自定义多少都无所谓,最终都会转换成相应的rem 设计稿参照iphone的话推荐75 或者100 } }; /* 添加到loaders数组中 */ function generateLoaders(loader, loaderOptions) { const loaders = [cssLoader, px2remLoader] }
用法: 标注图即量即所得;设计稿量多少就可以写多少了;最终显示时 px2remLoader会转换成相应的 rem
代码: font-size: 40px; 浏览器控制台: font-size: 0.533333rem; 即 40/75 因为上面写的是75复制代码
完全不用自己去转换了!爽多了
小坑:当 border 或者 height 为1px时 你会发现最终转换下页面看不到了 ;解决如下
border: 1px solid #e6e6e6; /*no*/ 后面加个注释 /*no*/ 目的是告诉 px2remLoader 这个用做转换复制代码
二、结合Vuex自定义loading组件
这里只说如何实现,具体的vuex怎么使用注册请看以往博文 www.cnblogs.com/ljx20180807…
loading.vue
<template> <!--loading--> <div class="comp-loading"> <div class="comp-loading-box"> <img src="@/assets/img/loading.png"/> <p>Loading...</p> </div> </div> </template> <style lang="stylus" rel="stylesheet/stylus" scoped> .comp-loading { &-box { z-index: 10000; position: fixed; top: 40%; left: 50%; width: 160px; margin-left: -80px; padding: 30px 0; border-radius: 10px; background-color: rgba(0,0,0,.7); img { display: block; width: 60px; height: 60px; margin: 0 auto; animation: comp-loading-spin 1200ms infinite linear; } p { font-size: 26px; color: #fff; text-align: center; line-height: 26px; padding-top: 14px; } } } @keyframes comp-loading-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>
App.vue
<template> <!-- App.vue --> <div id="app"> <!--loading--> <Loading v-show="showHttpLoading"></Loading> <router-view v-wechat-title="$route.meta.title"></router-view> </div> </template> <script> import Loading from ‘./components/loading‘ import error from ‘./services/error‘ export default { name: ‘App‘, data () { return { showHttpLoading: false } }, components: { Loading }, watch: { // 监听 showHttpLoading 触发loading效果 ‘$store.state.showHttpLoading‘ (val) { // set loading this.showHttpLoading = val } } } </script>
在哪里调用呢;我项目是在所有请求的时候和路由跳转的时候调用;请求成功则关闭loading;具体效果可根据你公司需求确认
// config.js import Vue from ‘vue‘ import axios from ‘axios‘ import store from ‘../store‘ import router from ‘../router/index‘ import { Toast } from ‘cube-ui‘ Vue.use(Toast) const init = function () { // 请求拦截器 axios.interceptors.request.use(function (config) { // 触发loading store.commit(‘UPDATE_SHOW_HTTP_LOADING‘, true) ....... }, function (err) { // 抛出错误 store.commit(‘UPDATE_SHOW_HTTP_LOADING‘, false) ..... }) // 响应拦截器 Add a response interceptor axios.interceptors.response.use(function (response) { // 请求成功关闭loading store.commit(‘UPDATE_SHOW_HTTP_LOADING‘, false) ......... }, function (error) { store.commit(‘UPDATE_SHOW_HTTP_LOADING‘, false) ....... }) // 前置守卫 只为触发loading效果觉得不需要则去掉 router.beforeEach((to, from, next) => { if (to.matched && to.matched.length && to.matched[0].path) { // 已授权情况 触发loading store.commit(‘UPDATE_SHOW_HTTP_LOADING‘, true) next() } }) // 后置守卫 只为关闭loading 不用loading则去掉 router.afterEach((to, from) => { // 关闭loading store.commit(‘UPDATE_SHOW_HTTP_LOADING‘, false) })
注意的是需要在main.js 里引入config.js 并初始化去 config.init()
结语: 以上就是今天要分享的内容了,有问题欢迎留言