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

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

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

 

 

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

  

上一篇:Android接入支付宝实现支付功能


下一篇:rospack: error while loading shared libraries: librospack.so: cannot open shared object file: