Blob下载文件 & 模拟滚动条实现

1.vue切换路由视图时，事件钩子顺序是当前模块create-->上一个模块beforeDestroy-->当前模块mounted

因此注册全局事件（比如给window注册事件）应放在mounted里，不然有可能被上一个模块的beforeDestroy移去

2.Ajax请求后端直接返回二进制流数据（可能是excel、word文件等）在前端让用户下载

用到Blob() 和 window.URL的api

1 var blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
2 var a = document.createElement('a');
3 a.download = 'pickcenter_log.xlsx';
4 a.href = window.URL.createObjectURL(blob);
5 document.body.appendChild(a);
6 a.click();
7 window.URL.revokeObjectURL(a.href);
8 document.body.removeChild(a);

3. 模拟一个滚动条，可以让滚动条出现在任意位置、相对窗口固定

视口设置为overflow:hidden; 内容盒子设置为position:relative，通过定位来实现滚动效果

如果原生设置了overflow:scroll ，有滚动条时滚动了一定长度，再把overflow设为hidden，虽然滚动条消失了，但是scrollLeft(scrollTop)的影响还存在，会看到之前滚动到的区域，scrollTop置零之后可以归位

mousedown和mousemove事件里preventDefault可以防止拖拽时选中了文字

具名函数表达式（注意：非函数声明）只能在该回调函数内部被访问到，如fnmove，在slideStart里访问会报错未定义

参考：

FunctionDeclaration :
function Identifier ( FormalParameterList opt ){ FunctionBody }

FunctionExpression :
function Identifier opt ( FormalParameterList opt ){ FunctionBody }

opt表示可有可无，所以函数表达式分为匿名函数和具名函数，所谓的"具名函数表达式"(Named function expressions，NFE)，这个函数的识别名，它的作用域是只能在函数的主体(FunctionBody)内部。
原因当然它只是个原本就可有可无的"代理"函数名，真正的这函数识别名称是被赋值的那个变量识别名。

<template>
    <div class="scroll-bar" :name="name" v-show="show">
        <div class="scroll-track" @click.self="moveThumb">
            <div class="scroll-thumb" @mousedown.prevent="slideStart"></div>
        </div>
    </div>
</template>

<script>
export default {
    // visibleWidth可视区域宽 scrollWidth内容总宽度 barWidth滚动条轨道长度 elementId视口容器 scrollElementId内容盒子  
  props:['name','visibleWidth','scrollWidth','barWidth','elementId', 'scrollElementId', 'show'],
  data () {
      return {
         scrollLeft:0,
         pos:null
      }
  },
  mounted(){
      var $scrollBar = $('.scroll-bar[name="'+ this.name +'"]');
      var $track = $scrollBar.find('.scroll-track');
      $track.width(this.barWidth || this.visibleWidth);
  },
  watch:{
      show(val){
          val && ($('#' + this.elementId).get(0).scrollLeft = 0);
      },
      // 内容宽度变化
      scrollWidth(val){
          this.reComputeAll({resetLeft:true});
      },
      //可视区域宽度会随窗口缩小放大而变化
      visibleWidth(val){
          this.reComputeAll({resetLeft:false});
      }
  },
  methods:{
     reComputeAll(params){
         var $scrollBar = $('.scroll-bar[name="'+ this.name +'"]');
         var $track = $scrollBar.find('.scroll-track');
         var $thumb = $scrollBar.find('.scroll-thumb');
         var barWidth = this.barWidth || this.visibleWidth;
         var thumbWidth = parseInt(this.visibleWidth * barWidth / this.scrollWidth);
         var thumbLeft = parseInt(this.scrollLeft * barWidth / this.scrollWidth);
         if (params.resetLeft) {
             thumbLeft = 0;
             this.scrollLeft = 0;
             $('#' + this.scrollElementId).css('left', '0px');
         }
         !this.barWidth && $track.width(barWidth);
         $thumb.width(thumbWidth);
         $thumb.css('left', thumbLeft + 'px');
     },
     reComputeRelative(thumbLeft){
         var $scrollBar = $('.scroll-bar[name="'+ this.name +'"]');
         var $thumb = $scrollBar.find('.scroll-thumb');
         var $element = $('#' + this.scrollElementId);
         var barWidth = this.barWidth || this.visibleWidth;
         var thumbWidth = parseInt(this.visibleWidth * barWidth / this.scrollWidth);
         (thumbLeft < 0) && (thumbLeft = 0);
         (thumbLeft > barWidth - thumbWidth) && (thumbLeft = barWidth - thumbWidth);
         $thumb.css('left', thumbLeft + 'px');
         this.scrollLeft = parseInt(thumbLeft * this.scrollWidth / barWidth);
         $element.css('left', -this.scrollLeft + 'px');
     },
     slideStart(event){
         var self = this;
         var $scrollBar = $('.scroll-bar[name="'+ this.name +'"]');
         var $thumb = $scrollBar.find('.scroll-thumb');
         var disX = event.clientX;
         !this.pos && (this.pos = event.clientX);
         var othumbLeft = parseInt($thumb.css('left'));
         function fnmove (e){
             var thumbScroll = e.clientX - disX;
             var thumbLeft = othumbLeft + thumbScroll;
             self.reComputeRelative(thumbLeft);
         }
         $(document).on('mousemove', fnmove);
         $(document).on('mouseup', function fnup(e){
             $(document).off('mousemove', fnmove);
             $(document).off('mouseup', fnup);
         });
     },
     moveThumb(e){
         if (this.pos === null) return;
         var thumbLeft = e.clientX - this.pos;
         this.reComputeRelative(thumbLeft);
     }
  }
}
</script>

<style lang='less'>
@import '../../assets/css/config.less';
.scroll-bar{
    position:fixed;
    bottom:0px;
    left:220px;
    .scroll-track{
        position:relative;
        height:20px;
        background-color: #f5f5f5;
        border-radius:10px;
    }
    .scroll-thumb{
        position:absolute;
        height: 20px;
        border-radius: 10px;
        box-shadow: 0 0 6px rgba(0,0,0,.4);
        background-color: #e7e7e7;
    }
}
</style>

4.字符串中含有<script></script>标签时，</script>要对/转译，或者分开"</scri" + "pt>" 因为编译时会优先读取</script>然后当做脚本已结束

5.getBoundingClientRect() 获取可是区域的位置和几何属性

6.vue在子组件添加ref属性，通过父组件的$ref可以收集子组件的引用

7.html5中，想让html页面被缓存需要加入manifest属性，没有该属性的html页面不参与缓存协商，不受cache-control控制，会请求最新值