进度条优化

src/util/Fileslicing.js

@@ -39,11 +39,51 @@ async function Fileslicing(vueInstance, file, done, loading, column) {
       // 计算并显示上传进度
       const progressPercentage = ((uploadedChunks / totalChunks) * 100).toFixed(2);
       // 显示上传进度的通知
-      vueInstance.$notify.info({
-        title: "进度",
-        message: `当前上传进度: ${progressPercentage}%`,
-      });
+      // vueInstance.$notify.info({
+      //   title: "进度",
+      //   message: `当前上传进度: ${progressPercentage}%`,
+      // });
+      const percentage = 50; // 这里可以替换成你传入的百分比
+      const progressBar = document.createElement('div');
+      progressBar.classList.add('progress-bar');
+      progressBar.style.borderRadius = '20px'; // 设置进度条的圆角为 20px
+      progressBar.style.overflow = 'hidden'; // 设置进度条超出部分隐藏
+      progressBar.style.position = 'fixed';
+      progressBar.style.top = '0';
+      progressBar.style.right = '0';
+      progressBar.style.width = '320px';
+      progressBar.style.height = '30px';
+      progressBar.style.zIndex = '9999'; // 设置层级最高
+      progressBar.style.backgroundColor = '#e0e0e0'; // 设置背景色
+      progressBar.style.border = '1px solid #aaa'; // 设置边框
+      
+      const progressFill = document.createElement('div');
+      progressFill.classList.add('progress-fill');
+      progressFill.style.height = '100%';
+      progressFill.style.width = progressPercentage + '%'; // 根据传入的百分比设置进度条的宽度
+      progressFill.style.backgroundColor = '#4caf50'; // 设置进度条填充色
+      
+      // 创建显示百分比的文本元素
+      const percentageText = document.createElement('div');
+      percentageText.classList.add('percentage-text');
+      percentageText.style.position = 'absolute';
+      percentageText.style.top = '50%';
+      percentageText.style.left = '50%';
+      percentageText.style.transform = 'translate(-50%,-50%)';
+      percentageText.textContent = progressPercentage + '%'; // 设置文本内容
+      percentageText.style.color = '#fff'; // 设置字体颜色为白色
+      progressBar.appendChild(progressFill);
+      progressBar.appendChild(percentageText); // 添加文本元素
+      document.body.appendChild(progressBar);
+ // 设置类名
       if(progressPercentage == 100){
+        const divs = document.querySelectorAll('.progress-bar');
+        setTimeout(() => {
+          divs.forEach(div => {
+            div.remove();
+          });
+        }, 50); // 2秒后删除，你可以根据需要修改这个时间
+ 
           // 如果上传进度达到100%，显示文件上传完成的通知
           vueInstance.$notify({
             type: 'success',

src/views/edutraining/courseinfo.vue

@@ -69,6 +69,7 @@ export default {
     return {
       awarDrawer: false, //是否显示课件管理窗口
       form: {},
+      a:123,
       query: {},
       loading: true,
       percentage: 0,
@@ -248,6 +249,7 @@ export default {
     },
 
      uploadBefore(file, done, loading, column) {
+
       this.$fileslicing(this,file,done,loading,column);//文件切换全局函数(初始)
       },
 
@@ -380,4 +382,12 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+.custom-class{
+  width: 320px;
+  height: 40px;
+  z-index: 9999;
+  border: 1px solid #ccc;
+  background-color: red;
+}
+</style>