一起学Vue自定义组件之进度条

在日常开发中，随着需求的个性化，逻辑的复杂化，自定义组件也变得越来越常见，而且组件具有扩展性强，易复用，封装复杂的代码逻辑等优点，可以用小组件来构建大型应用系统。本文以一个简单的小例子，简述Vue进行组件开发的常见步骤，如有不足之处，还请指正。

涉及知识点

本文案例，不仅用到了之前的基础知识，如：v-if, 样式绑定，属性传值等，还用到了组件的特有知识，如下所示：

• 组件：可复用的Vue实例，具有封装，复用等特点。
• Vue项目构建：一个vue后缀的文件，就表示一个组件。但是浏览器并不认识vue文件，所有需要进行编译才能运行，Vue提供了一个脚手架（CLI）来编译运行项目。
• 组件构成：由props(属性)，computed(计算属性),method(方法)等构成，来支持组件的不同需求。
• 开发工具：Visual Studio Code
• 运行工具：Vue CLI 运行命令：vue serve

设计思路

1. 进度条分类：线性进度条（采用DIV嵌套实现），环形进度条（采用SVG实现）。
2. 提取共性特征：颜色，高度，显示内容，图标样式等属性值的提取，根据属性来区分展示的，采用计算属性实现。
3. 图标样式：本例中的图标样式采用Wingdings字体实现，可通过windows-->附件-->字符映射表 去查询。

示例效果图

线性进度条：分为进度显示在右侧，还是内侧且跟随进度条移动。如下所示：

 环形进度条：大小可以设置，显示内容和线性进度条一致。如下所示：

核心代码

本例所有代码进行封装【Progress.vue】主要包含三部分：模板（template）脚本（script）样式（style）。

一个template下只能包含一个div，但是div下可以包含多个子节点。如下所示：

script部分，本例主要用到props，和computed，如下所示：

style部分，本例使用了伪元素（::before）显示图标，如下所示：

组件调用源码

首先引入组件，并注册组件，如下所示：

然后进行调用即可，如下所示：

如需本例完整代码，可以点击代码链接进行下载

代码链接

备注

【曲玉管】

作者：柳永[宋]

陇首云飞，江边日晚，烟波满目凭阑久。

一望关河萧索，千里清秋，忍凝眸？

杳杳神京，盈盈仙子，别来锦字终难偶。

断雁无凭，冉冉飞下汀洲，思悠悠。

暗想当初，有多少、幽欢佳会，

岂知聚散难期，翻成雨恨云愁？

阻追游。每登山临水，惹起平生心事，

一场消黯，永日无言，却下层楼。