按钮（图标+文字/进度）大小屏幕适配

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

在小于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