标签：loading 适配 进度 按钮 progress 屏幕 screenWidth 图标

需求：在大屏幕下按钮上展示图标和文字，

在小于1680屏幕下展示图标，

在点击下载文件后，显示进度，在大屏下显示图标+进度 ，

在小屏幕下只展示进度

 代码实现案例：

<template>
  <div>
    <div class="buttonBox">
      <a-button type="primary" @click="download" :disabled="loading"
        ><a-icon type="download" v-show="!loading || this.screenWidth > 1680 " /> <span  v-show="!loading">下载文件</span
        ><span class="progress"  v-show="loading">{{ progress }}%</span>
      </a-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,   //是否是下载中
      progress: 0,      //进度
      timer: null,      //定时器
      screenWidth: null,   //屏幕宽度
    };
  },
  created() { 
    this.windowWidth(document.documentElement.clientWidth);    //得到屏幕宽度
  },
  mounted() {
    window.onresize = () => {      
      //屏幕尺寸变化就重新赋值
      return (() => {
        this.screenWidth = document.documentElement.clientWidth;
      })();
    };
  },
  methods: {
    windowWidth(value) { 
      this.screenWidth = value;
    },
    download() {     
      this.loading = true
      this.timer = this.setIntervalImmediately(this.getProgress, 1000);
    },
    getProgress() {
      console.log("获取进度方法", this.progress);
      if (this.progress == 100) {
        this.loading = false
        clearInterval(this.timer);
        this.progress = 0
      } else {
        this.progress += 10;
      }
    },
    setIntervalImmediately(func, interval) {
      func();
      return setInterval(func, interval);
    },
  },
};
</script>
<style lang="less" scoped>
.buttonBox {
  text-align: right;
  margin: 100px 200px 0 0;
}
@media screen and (max-width: 1680px) {
  .buttonBox {
    span {
      display: none;
    }
    .progress {
        display: block;
    }
  }
}
</style>

标签：loading,适配,进度,按钮,progress,屏幕,screenWidth,图标
来源： https://www.cnblogs.com/z8g1z7/p/15908132.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。