前端相关笔记（划重点）

axios 使用

//api.js
import axios from 'axios'

//拦截器
axios.interceptors.response.use((response) => {
    return response.data;
  }, (error) => {
    return Promise.reject(error);
  });

let post = (url,params) =>{
    return axios.post(url,{
            source: 'h5',
            userId: localStorage.getItem('userId'),//userId
            sid:localStorage.getItem('sid'),//sid
            data: params
        });
}
let PASSPORTURL = 

export default {
    login(data){
        return post(PASSPORTURL+'/v1/passport/login',data)
    }
}

鼠标移入显示另外一个div，渐变动画。
用visibility: hidden;visibility: visible;

//html
<div class="phone">
        <div class="phone-con">
          <div class="phone-in">
            联系电话:132****1281
          </div>
        </div>
    </div>

//css
.phone{
  position: fixed;
  width: 100px;
  height: 100px;
  background: #FFF;
  border: 1px solid #DFDFDF;
  z-index: 100;
  top: 500px;
  right: 10px;
  box-sizing: border-box;
}
.phone:hover .phone-con{
  transform: translateX(0);
  visibility: visible;
  opacity: 1;

}
.phone-con{
  position: relative;
  width: 110px;
  height: 200px;
  left: -110px;
  transition: all .3s ease;
  transform: translateX(-50px);
  visibility: hidden;
  opacity: 0;
}
.phone-in{
  width: 100px;
  height: 200px;
  background: #000;
  color: #FFF;
  position: relative;
}
.phone-in:after{
  position: absolute;
  right:-20px;
  top: 45px;
  content:"";
  width: 0;
  height: 0;
  border:10px solid transparent;
  border-color:  transparent transparent transparent #000;
}

前端js上传文件到oss
泪目先，折腾了大半年才发现原来可以做直接post上传文件，根本不需要

<script 

这玩意儿，因为这玩意儿难用难用难用。

import api from './api'
import axios from 'axios'
import uuid from 'uuid-js'
export default {
    //上传图片 callback({code:200,result}) progressCallback(progress)
    uploadFile(file,callback,progressCallback){

        //截取图片后缀
        var fileExt = file.name.split('.').pop();
        //获取ossToken临时权限
        api.getOssToken({}).then((res) => {
            if(res.errorCode ==0){
              //拼接osss上传的key
              var key = res.data.dir + uuid.create(1).toString() +'.'+ fileExt;
              
              //设置上行参数
              var request = new FormData();
              request.append('OSSAccessKeyId', res.data.accessid);
              request.append('policy', res.data.policy);
              request.append('Signature', res.data.signature);
              request.append('key', key);
              request.append('file', file);
              request.append('success_action_status',200);//设置返回200 默认204

              //设置form-data提交表单
              var config = {
                headers:{'Content-Type':'multipart/form-data'},
                onUploadProgress:function(progressEvent){
                  var progress = parseInt(progressEvent.loaded/progressEvent.total * 100);
                  progressCallback && progressCallback(progress);
                }
              };

              //拼接postUrl
              var postUrl = 'https://' + res.data.bucket +'.'+ res.data.host.split('/').pop();

              //post上传到oss
              axios.post(postUrl,request,config).then((ossres) => {
                if(ossres.status ==200){
                  
                  //拼接cdn地址
                  var result = 'http://'+res.data.cdnUrl+'/'+key;

                  //上传成功
                  callback({code:200,result:result});
                }else{
                  //上传失败
                  callback({code:101,message:'上传osss失败'});
                }
              });
            }else{
              //获取ossToken失败
              callback({code:100,message:'获取ossToken失败'});
            }
        });
    }
}

我相信肯定有很多前端的伙伴需要的。

vue-cli 2.8.2版本 npm run dev 不能用ip地址打开了。
找到/build/dev-server.js 85行(不出意外的话)

//var server = app.listen(port, 'localhost')
var server = app.listen(port)

就ok了。

官网解释是：如果不指定host，就会以默认host打开，这样不符合预期。好吧，如果你突然发现调试移动端页面的时候，打不开了，麻烦改下配置吧。

vue-cil打包css、js路径引入问题

//config/index.js

assetsPublicPath: './'

vue-cil打包关于css 中background 背景图片路径问题

添加配置

//buidl/utils.js  37行
ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'  //解决vue-cil css背景路径问题
      })

Vue路由配置
vue-router:

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

//注意注意 子路由不要加 "/" 啊  
{
      path:'/media',
      component:MediaHome,
      children:[{
        path:'',
        name:'serverList',
        component:PlanList
      },{
        path: 'newList',
        name: 'newList',
        component: IdeaList
      }]
 }

移动端视口

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

vue全家桶

post请求注意

Vue.http.options.emulateJSON = true;


this.$http.post(api.newsAdvert,{type:'1'})
      .then(function(res){
       //成功操作
       //this.isAjaxLoading = false;
       this.banners = res.data.data;
      },function(){
       //网络出错啦
       console.log('error');
      })

main.配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'


import App from './App'
import Hello from './components/Hello'
import List from './components/List'
import Detail from './components/Detail'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes:[
      { path: '/', component: Hello },
      { path: '/hello', component: Hello },
      { path: '/list', component: List },
      { path: '/detail/:id/:type', component: Detail }
    ]
})
/* eslint-disable no-new */

Vue.filter('sum',function(input){
    var output = input;
    output = input + 4;
    return output;
})


new Vue({
  router:router,
  el: '#app',
  template: '<App/>',
  components: { App }
})

App.vue文件

<template>
  <div id="app">
    <nav-bar></nav-bar>
    <router-view></router-view>
  </div>
</template>
<script>
import Nav from 'components/Nav'

export default {
  name: 'app',
  components: {
    'nav-bar': Nav
  }
}
</script>
<style scoped>
#app {}
</style>

router-link组件

<router-link to="/">首页</router-link>

//动态参数
<router-link :to="'/detail/'+item.id+'/'+item.name">{{item.name}}</router-link>

面板排版css
margin-right: -1px; margin-top: -1px;

.list ul{
            width: 1000px;
            height: auto;
 }
 .list ul li{
            width: 251px;
            height: 151px;
            border: 1px solid #CCC;
            float: left;
            box-sizing: border-box;
            margin-right: -1px;
            margin-top: -1px;
            transition: all .3s ease-in-out;
}

.5px方案

背景方案
div{
     background-image: -webkit-linear-gradient(top, #d9d9d9, #d9d9d9 50%, transparent 50%);
     background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
     background-size: 120% 1px;
     background-repeat: no-repeat;
     background-position: bottom left;
}

缩放方式
.line{
    width: 100%;
    height: 1px;
    background: #DFDFDF;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

去除横向滚动条绝招，隐藏。

<div class="scroll-warp">
    <div class="scroll">
          <div class="scroll-list">
              <div class="scroll-item">12323</div>  
          </div>
    </div>
</div>

<style>
  .scroll-warp{
    width:100%;
    height:100px;
    overflow: hidden;
  }
  .scroll{
    width:100%;
    height:100px;
    padding-bottom:40px;  //注意这里预留给滚动条
    overflow-x: scroll;  //横向滚动
   }
  
</style>

微信小程序

获取offsetTop不能是有定位属性的dom元素。