vue中progress进度条组件（自定义，可复用）

1.在page中新建一个Progress组件（Progress.vue）

<template> <div class="m-progress" :style="`width:${width}rem;`"> <div class="m-progress-outer"> <div class="m-progress-inner"> <div class="u-progress-bg" :style="`width: ${progress}%;`"></div> </div> </div> </div> </template> <script> export default { name: 'Progress', props: { width: { type: Number, default: 200 }, progress: { type: Number, default: 15 } } } </script> <style lang="less" scoped> .m-progress { color: rgba(0,0,0,.65); .m-progress-outer { display: inline-block; width: calc(100%); // background: rgb(55, 187, 40); .m-progress-inner { width: 100%; background-color: #0b0b0b; border-radius: 10rem; .u-progress-bg { background-color: #f1540b; border-radius: 10rem; height: 1.5rem; transition: all .3s cubic-bezier(.08,.82,.17,1) 0s; } } } } </style> <template> <d