我的Vue组件库之对话框(dialog)组件

在之前写的一篇文章《我的Vue组件库之进度条(progressbar)组件》中，讲解了如何通过自己的方式写出一个进度条组件。之前看到有的人说，我们可以直接用已经存在的Vue组件，为什么还要自己写呢？其实，自己造轮子的过程会让你对Vue的理解更加透彻，还是鼓励大家自己造轮子。

运行效果图

首先我们看下运行效果图

dialog运行结果

实现过程

• 项目搭建

dialog组件是一个可以独立运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具，生成的工作目录如下，其中各个文件夹的内容如之前文章中描述的一样

项目目录结构

• dialog组件之template

dialog组件以.vue的文件形式存在，其中的template部分内容如下

dialog组件之template

我们来分析一下，dialog组件的几个属性

1. 类型，利用type参数去控制，表示的对话框的类型，取值为alert或者confirm

2. 消息头，利用title参数去控制

3. 消息体，利用message参数去控制

4. 确认按钮提示信息，利用confirmButtonText参数控制

5. 取消按钮提示信息，利用cancelButtonText参数控制

• dialog组件之script

dialog组件内部的初始化方法

初始化方法

组件的alert与confirm方法

alert与confirm方法

• dialog组件之style

由于style部分的内容比较多，这里选取比较重要的部分，首先是基本的dialog样式

基本的dialog样式

然后是dialog的消息体和消息底部以及button的样式

消息体和消息底的样式

然后看下dialog结合css3样式的部分

dialog结合css3样式

• 示例

在完成上述步骤后，便可完成一个dialog组件，接下来看dialog组件的使用，如果能运行出来，就会看到文章开始的效果

例子中的template部分

例子的script部分

总结

本文详细的介绍了编写dialog组件的过程，希望能对大家有帮助

如果喜欢的话，记得关注小编噢，小编后续会坚持出更多技术性的文章，如果有任何问题，也欢迎提问，小编都会尽力解答的。

另外小编开通了微博账号，以后的文章都会同步到微博上，感兴趣的可以关注下我的微博账号噢，账号是：CodingShare