化石原创文章,转载请注明来源并保留原文链接


做一个随浏览器大小始终居中的进度条,使用了下面的代码:

<div id="loadingContainer" style="position: absolute; width: 100%; height: 90%;" >
	<div class="row h-100 align-items-center justify-content-center">
		<div class="row">
			<div class="col">
				<p id="loadingProgress" style="color: red; font-size: 2rem;">0%</p>
			</div>
		</div>
	</div>
</div>

第3行开始的是进度条本身,第1行和第2行是关键。第1行的height百分比,可以用来调节在高度上的居中感觉。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


在mouted方法中,如果用了DOM的回调方法,而这个方法需要用到methods里定义的方法,那么this不能直接被使用。我们需要在mouted中,先把this赋值给一个变量,而后在这个回调中就能使用到方法。

比如下面的例子:

  methods : {
    
    changeFontSize () {
        var initBannerTitleFontSize = 80, initBannerTitleMarginTop = 70, initBannerTitleMarginBottom = 20;
        var initBannerDescFontSize = 30, initBannerDescLineHeight = 45;

        var height = document.getElementById('bannerbg').clientHeight;
        var percent = height / 300;

        var bannerTitle = document.getElementById('bannertitle');
        var bannerDesc = document.getElementById('bannerdesc');

        bannerTitle.style.fontSize = percent * initBannerTitleFontSize + "px";
        bannerTitle.style.marginTop = percent * initBannerTitleMarginTop + "px";
        bannerTitle.style.marginBottom = percent * initBannerTitleMarginBottom + "px";
        
        bannerDesc.style.fontSize = percent * initBannerDescFontSize + "px";
        bannerDesc.style.lineHeight  = percent * initBannerDescLineHeight + "px";
    },
  },
  mounted() {
    var that = this;
    
    if(document.body.clientWidth<800){
      this.isPC = false;
    }

    document.getElementById('bannerbg').addEventListener('load', function() {
      that.changeFontSize();
    });

    window.onresize = () => {
        return (() => {
          this.changeFontSize();
        })();
    };
  }

这里的that本地变量,就执行this对象,在回调中使用完全没有问题。在javascript中,这个是很常见的手法。


化石原创文章,转载请注明来源并保留原文链接