封装简易的进度条组件

一 简易的进度条封装（极简版的）
最近做项目时需要一个简易的进度条 ，自己动手丰衣足食 ，话不多说上代码
这里是自己偷懒 使用了element UI的对话框组件

子组件 progress.vue

<template>
<div class="com">
<el-dialog
  title="简易的进度条组件"
  :visible.sync="dialogVisible"
  width="30%"
 >
  <span>进度展示{
  {progress}}%</span>
  <div slot="footer" class="dialog-footer">
   <span class="progress" ref="progress">{
  {progress+'%'}}</span>
  </div>
</el-dialog>

</div>
</template>

<script>
export default {
   这里是监听progress变化一旦改变控制进度条的宽度
    watch:{
        progress:function (val) {
            this.$refs['progress'].style.width= val+'%';
        }
    },
    props:{

        dialogVisible :{
            type:Boolean,
            default:false
        },
        progress:{