(Electron-vue)进度条及反馈展示

(Electron-vue)进度条及反馈展示

效果：

父组件：

  //1.子组件区
  <Loading :persent="progress" :details="arr"></Loading> 
  //2.引入
  import Loading from "@/components/Loading";
  //3.注册
  components: {
    Loading,
  },
  data() {
   return { 
     progress: 0,
     arr: ["设备初始化中..."], 
   };
  },
//某些操作后改变progress和arr的值，例如：
start() {
	...
	this.progress += 3;  //最终值为100
    this.arr.unshift("当前任务执行细节" + Date.now());
}
...
...

子组件：

<template>
  <div>
    <div class="loading">
      <div class="tip" v-show="persent>5" :style="{ left: `${persent-5}%` }">{{ persent }}%</div>
      <div class="bar" :style="{ width: `${persent}%` }"></div>
    </div>
    <div class="content">
      <div class="details">
        <p v-for="(item, index) in details" :key="index">{{ item }}</p>
      </div>
      <div class="params">
        <div class="title">执行参数明细</div>
        <p v-for="(item, index) in 10" :key="index"><b>参数{{index+1}}：</b>参数值, 参数值, 参数值...</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    persent: {
      type: Number,
      required: true,
      default: 0,
    },
    details: {
      type: Array,
      required: true,
      default: [],
    },
  },
};
</script>