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

时间：2024-01-08 10:30:44

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

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

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

用到Blob() 和 window.URL的api

 var blob = new Blob([res.data], {type: "application/vnd.ms-excel"});

 var a = document.createElement('a');

 a.download = 'pickcenter_log.xlsx';

 a.href = window.URL.createObjectURL(blob);

 document.body.appendChild(a);

 a.click();

 window.URL.revokeObjectURL(a.href);

 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控制，会请求最新值

相关文章