需求:在大屏幕下按钮上展示图标和文字,
在小于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>