9.29Vue常用的自定义指令

Vue项目，使用响应式布局插件 postcss-px-to-viewport，达成自适应宽高比

安装

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

在项目的根目录下创建 postcss.config.js

module.exports = {
    plugins:{
        autoprefixer:{},
        "postcss-px-to-viewport":{
            viewportWidth:375,//视窗的宽度，对应的是我们设计稿的宽度
            viewportHeight:667,//视窗的高度，对应的是我们设计稿的高度
            unitPrecision:5,//制定‘px’转换为视窗单位的小数位数（很多时候无法整除）
            viewportUnit:'vw',//指定需要转换成的视窗单位，建议使用vw
            selectorBlackList:['ignore','tab-bar','tab-bar-item'],//指定不需要转换的类，
            minPixelValue:1,//小于或等于‘1px’不转换为视窗单位
            mediaQuery:false//允许在媒体查询中转换为‘px’
        },

    }
}

vue修辞符-注没用过！！！

.native 将一个vue组件变成一个普通的html，使其可以监听click等原生事件

<Tag @click.native="handleClick">ok</Tag>

Vue常用工具函数总结

1.识别ie浏览器

export const IsIE = ()=>{
    let explorer = window.navigator.userAgent;
    //判断是否为IE浏览器
    if(explorer.indexOf('MSIE') >= 0){
        return true ;
    }else{
        return false
    }
}

如何基于axios二次封装一个具有 请求/响应拦截的http请求

index.js

import axios from 'axios'
import qs from 'qs'

//请求拦截
axios.interceptors.request.use(config => {
    //此处可以封装一些加载状态
    return config
},error => {
    return Promise.reject(error)
})

//响应拦截
axios.interceptors.response.use(response => {
    return response
},error => {
    return Promise.resolve(error.response)
})

function checkStatus (response) {  
  // 此处可以封装一些加载状态  
  // 如果http状态码正常，则直接返回数据  
  if(response) {  
    if (response.status === 200 || response.status === 304) {  
      return response.data  
      // 如果不需要除了data之外的数据，可以直接 return response.data  
    } else if (response.status === 401) { //401代表用户没有访问权限，需要进行身份认证  
      location.href = '/login';  
    } else {  
      throw response.data  
    }  
  } else {  
    throw {data:'网络错误'}  
  }  
} 
//axios 默认参数配置
axios.default.baseURL = '/api/v0';
axios.default.timeout = 10000;

export function post (url,data) {
    return axios({
        method:'post',
        url,
        data:qs.stringify(data),
        headers:{
            'X-request-With':'XMLHTTPRequest',
        	'Content-Type':'application/x-www-form-urlencoded;charest=UTF-8'
        }
    }).then((res)=>{
        return checkStatus(res)
    })
}
export function get (url, params) {  
    return axios({  
      method: 'get',  
      url,  
      params, // get 请求时带的参数  
      headers: {  
        'X-Requested-With': 'XMLHttpRequest'  
      }  
    }).then(  
      (res) => {  
        return checkStatus(res)  
      }  
    )  
  },  
export function del (url, params) { 
    return axios({  
      method: 'delete',  
      url,  
      params, // get 请求时带的参数  
      headers: {  
        'X-Requested-With': 'XMLHttpRequest'  
      }  
    }).then(  
      (res) => {  
        return checkStatus(res)  
      }  
    )  
  }  
}  
export default axios;

配置完 main.js 上

这个是挂原型链上的

import Axios from “./tools/axios”;

Vue.prototype.$http = Axios;

serve.js 封装API

//导入axios配置... 
 import request from '@/tools/axios'

//导出封装的api请求方法

export async function loginApi (data) {
    const res = await request({
         url:`${API_ROUTER.BASE_URL}/Indentity/ChangePasswordAsync`,
         method:'post',
         data,
    });
    return res         
}

//调用后
import { UserInfoAsync} from "./servers";
const  UserInfoAsync(parama)

vue项目中实用的自定义指令

例子注册一个全局自定义指令 ‘v-focus’

Vue.directive('focus',{
    //单绑定的元素插入dom时
    inserted:function(el){
        el.focus()
    }
});
<input v-focus />

V-clipboard ( 点击复制内容到粘贴板功能)

安装

npm install -save v-clipboard

引用

import Vue from 'vue'
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)

 <div @click="handleCopy(scope.row.name)">{{ scope.row.name }}</div>
 methods: {
    handleCopy(value) {
      this.$clipboard(value)
      this.$message.success('已复制到粘贴板')
    }
  }

Vue-Lazyload (图片懒加载)

安装

npm install --save vue-lazyload

import loading from './assets/common/loading.gif'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preload: .8,
  loading,
  // error,
})

3、使用

<img v-lazy="https://www.domain.com/image.jpg">