Vue(五)【技巧】

川长思鸟来 2021-06-26 16:06 363阅读 0赞

## 路由方案 ##

<transition :name="transitionName">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive" ></router-view>
        </keep-alive>
      </transition>
      <transition :name="transitionName">
          <router-view v-if="!$route.meta.keepAlive" :key="key"></router-view>
      </transition>
      data () { 
        return { 
          transitionName: '',
          isSlide: false
        }
      },
      computed: { 
        key () { 
          // 再次进入时刷新数据
          return this.$route.fullPath + Math.random()
        }
      },
      watch: { 
        $route (to, from) { 
          // 屏蔽ios原生滑动
          var isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
          if (isiOS) { 
            document.body.addEventListener('touchmove', () => { 
    	      this.isSlide = true
    	      }, false)
          }
          if (!this.isSlide ) { 
            if (to.meta.index < from.meta.index) { 
              // 设置动画名称
              this.transitionName = 'slide-left'
    	        this.isSlide = false
            } else { 
              this.transitionName = 'slide-right'
    	        this.isSlide = false
            }
          } else { 
            this.transitionName = ''
    	      this.isSlide = false
          }
        }
      },

// 页面过渡动画 .slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active { 
      will-change: transform;
      transition: all 0.5s;
      position: absolute;
      width: 100%;
      left: 0;
    }
    .slide-right-enter { 
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    .slide-right-leave-active { 
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    .slide-left-enter { 
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    .slide-left-leave-active { 
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

## 前进页面缓存，后退页面销毁 ##

beforeRouteLeave (to, from, next) { 
      if (to.name === 'peopleList') { 
        if (!from.meta.keepAlive) { 
          from.meta.keepAlive = true
        }
        next()
      } else { 
        from.meta.keepAlive = false
        this.$destroy() // 销毁实例
        next()
      }
    },

## 适配方案 ##

### 移动端适配方案之`postcss-px-to-viewport` ###

不兼容PC端

npm install postcss-px-to-viewport --save-dev

module.exports = { 
      "plugins": { 
        "postcss-import": { },
        "postcss-url": { },
        // to edit target browsers: use "browserslist" field in package.json
        "autoprefixer": { },
        'postcss-px-to-viewport': { 
          viewportWidth: 750,   // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
          // viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
          unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数
          viewportUnit: "vw",   //指定需要转换成的视窗单位，建议使用vw
          selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
          minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
          mediaQuery: false     // 允许在媒体查询中转换`px`
       }
      }
    }

## `Axios`请求封装 ##

import axios from 'axios';
    // 创建axios实例
    const service = axios.create({ 
        baseURL: process.env.BASE_API,
    })
    // request拦截器,在请求之前做一些处理
    service.interceptors.request.use(
        config => { 
            config.headers['Content-Type'] = 'application/json'
            return config
        },
        error => { 
            console.log(error) 
            Promise.reject(error)
        }
    )
    // response 拦截器,数据返回后进行一些处理
    service.interceptors.response.use(
        response => { 
            const res = response.data
            if (res.code == 666) { 
                return res;
            } else { 
                Promise.reject(res.msg);
            }
        },
        error => { 
            Promise.reject('网络异常');
        }
    )
    export default service

## HTTP请求封装 ##

import request from './request'
    const http ={ 
        /** * methods: 请求 * @param url 请求地址 * @param params 请求参数 */
        get(url,params){ 
            const config = { 
                method: 'get',
                url:url
            }
            if(params) config.params = params
            return request(config)
        },
        post(url,params){ 
            const config = { 
                method: 'post',
                url:url
            }
            if(params) config.data = params
            return request(config)
        },
        put(url,params){ 
            const config = { 
                method: 'put',
                url:url
            }
            if(params) config.params = params
            return request(config)
        },
        delete(url,params){ 
            const config = { 
                method: 'delete',
                url:url
            }
            if(params) config.params = params
            return request(config)
        }
    }
    //导出
    export default http

## 调用接口 ##

import http from './http.js'
    export const getDetail = params => { 
      return http.get('/detail', params).then(res => { 
        if (res.code === 20000) { 
          return Promise.resolve(res)
        }
        return Promise.reject(res)
      })
    }
    getDetail () { 
      return new Promise((resolve, reject) => { 
        getDetail({ 
          data: this.data
        })
          .then((res) => { 
            if (res.code === 20000) { 
              resolve(2)
            }
          })
          .catch((err) => { 
            console.log(err)
          })
      })
    }