这是我参与「第五届青训营」伴学笔记创作活动的第 19 天

记录一下progress组件的封装

首先是主体部分

最外层的div是进度条，第二层的div是跟进度条匹配的百分比。

基础的属性，length是用来接收进度条的长度的，单位是vw，默认长度是70，color是进度条的颜色，默认是blue蓝色，进度条的背景颜色默认是浅灰色。percent是进度条百分比，默认是0%，intext是用来百分比跟随进度条，或者不跟随进度条，hidetext是用来是否显示百分比数字。

使用计算属性,comptuted去实现style样式动态绑定，主题部分的:class是vue的新语法，用来动态绑定样式，可以和计算属性配合使用。

顺便记录一下，在vue3操作Dom元素可以用ref属性，来获取和操作Dom元素。用法如下

现在要获取的标签上用ref绑定一个名字，然后再ts中定义他，

然后再onMounted()中挂载使用他，就可以修改样式，如下：

最后是css部分

style标签，因为在写css用到了&符号，所以要引入scss，因为&是sass的语法。scoped是vue的语法，用来表示css样式的作用域不会影响到别的组件，在自己组件的范围生效。

实现进度条的原理很简单，我们先创造一个进度条的背景，先看一下最后效果图。

第一个progclass对应的效果是进度条浅灰色的背景，第二个样式就是对应进度条了。进度条的实现就是在背景的样式上使用了：：before伪类，然后进度条的长短就是：before伪类的宽度，我们使用v-bind去动态绑定:before的宽度。主要实现原理就是这样。