文章目录

前言 一、功能需求 二、组件设计

1、数据显示框 2、选择面板 3、选择项设计

三、代码开发

1、创建项目 2、选择项代码 3、选择项表格设计

3.1、选择项的 情形 3.2、选择项的change事件 3.3、响应翻页事件

4、面板容器设计 5、数据显示框 6、还有两个 难题

6.1、 怎样触发显示选择面板 6.2、单选点击或者鼠标点击面板以外时，关闭选择面板

7、 最后收尾

四、组件发布

1、首先需要在NPM官网注册一个账号，特别要记住账号名、密码、邮箱地址 2、在vscode终端将当前目录定位到plugins，输入命令：npm init -y，如下图： 3、发布组件到仓库

五、测试使用

1、首先来安装，新建一个Vue项目，在vscode终端中输入 npm install < 无论兄弟们的组件包名> –save 2、引入组件，在项目的 in.js中引入组件，如图： 3、在页面中放入组件，并定义好参数 4、运行 结局

写在 小编觉得

前言

  在使用Vue框架开发前端项目时，虽然很多大厂都提供了相应的组件库，着实给小的们的“饭碗”填了把星星之火，咱们瞬间也就燎原了。 然而林子大了，终究还是会有像咱这样的“刺头”，没事就想着搞个自己的组件库。于是。。。

  文章以开发一个年度选择器控件为例，尝试分析Vue组件库的设计、开发、发布和使用测试的整个 经过。

一、功能需求

年度选择器需求分析：

1、单选模式：最常见的使用场景，实际应用中很多人直接使用Combobox代替，但使用Combobox有一缺点就是年度选择项可能固定，到点只能通过更新 体系来升级年度选择项，而这里设计的选择器年度选择项目是通过特定算法计算得出的，因此不存在这类 难题。

2、连续多选：即年度范围选择，在统计同比或者环比数据时，我们可能需要选择连续的 几许年度进行比较，这时我们就可以使用连续多选模式。

3、任意多选：任意年度 选择，在统计同比或者环比数据时，我们可能需要选择指定的 几许不连续的年度进行比较，这时任意多选即派上用场。

二、组件设计

  通常选择器都由两部分组成：数据显示框和选择面板。因此需要根据需求中的几种模式分别设计这两部分的 情形，如下图：   上面原型图中我们设计了年度选择器的不同使用场景下的不同呈现 情形，接下来我们要将整个选择器各个部分拆解成相应子组件，以此来实现选择器的基本架构:

1、数据显示框

  上图分析得知，数据显示框可 拓展资料为两种不同的形态。

2、选择面板

  选择面板可由面板容器和年度选项表格组成，而年度选项表格又包含N个年度选项，因此我们设计开发的最小粒度就从年度选项开始。

3、选择项设计

三、代码开发

1、创建项目

  新创建一个目录，目录名随意，用来放置我们的项目。在CMD命令提示符当前路径切换到新创建的目录下，输入命令：vue create <你的项目名>，如下图：

  几番回车之后就可以创建vue项目，当然前提是 无论兄弟们已经安装好了Node.js及Vue-Cli等工具。在vscode中打开新创建的Vue项目，在src目录下面创建plugins目录，用来存放我们开发的组件。

  创建好的plugins目录结构成这样：

resource：存放静态资源文件，包含字体，样式，图像的文件； utils：存放通用工具 技巧； yearpicker：存放年度选择器源代码； index.js：组件包导出安装主入口

2、选择项代码

  创建好了项目，接下来我们从最小粒度“选择项”开始设计，在yearpicker目录中添加year-item.vue或者创建year-item目录，并在目录下创建index.vue，根据上面设计给组件添加布局如下：

  根据设计我们知道选择项有几种 情形：未选 情形、选中 情形、包含 情形(连续选择时，只有开始年度和结束年度被选中，其它年度都属于包含 情形)，因此样式中需要预置这几种 情形，限于篇幅，这块大家可自行发挥。

  图中mouseenter和mouseleave两个事件用来控制鼠标移入选择项和移出选择项时的样式，这里主要讲一下click事件，click事件实际上也很简单，主要做了两件事：1、更新选中 情形；2、将选择项的数据通过change事件向上冒泡，如下：

其中itemData的定义如下：

value：选择项的年度值； selected：选择 情形； passed：包含或者说经过 情形；

3、选择项表格设计

  这里把选择项表格拿出来单独设计主要是为了简化接下来面板的设计，因此选择项表格组件的主要 职业就是把选择项按要求排列起来就好了。布局如下：

  选择项要管理 情形仅仅是自己一个点的 情形，那么表格要管理的 情形 天然就成了面了。选择项表格需要管理当前呈现在用户面前的这一板年度项的 情形。梳理 下面内容选择项表格需要完成的 职业，如下：

3.1、选择项的 情形

初始化表格为当前年度开始的4X4矩阵的排列

3.2、选择项的change事件

  检查他们的 情形并继续向上冒泡当前选择的 结局信息

  在change事件中首先检查了选择项的选中 情形，如果选中，就把它Push到选择 结局列表中，否则要到 结局列表中删除已存在，标识取消选择。

3.3、响应翻页事件

  更新表格面板的选择项

next = 0 时，向前翻页 next = 1 时，向后翻页

4、面板容器设计

  面板容器组件上面主要有，前后翻页按钮、当前面板年度区间显示、选择项表格组成。布局代码过多，这里就不上代码了，照着设计原型图设计，实际上也很简单。这里主要讲这句：

  面板容器里面放置了选择项表格，主要负责设置选择模式、设置输入值、返回面板年度选择项区间变化和选择 结局集变化。

  选择项区间变化直接反映到面板显示

  选择 结局变化事件获得 结局后先排序，之后将年度值提炼出来，通过change事件冒泡出去

5、数据显示框

  依照原型设计，我们知道数据显示框实际上由两种不同情况：单编辑框模式和双编辑框模式，因此我们在布局时要分别做这两种模式的排版，视图中使用v-if、v-else判断选择模式来确定显示哪种模式的编辑框。

6、还有两个 难题

6.1、 怎样触发显示选择面板

  面板的装载使用Popper.js定位引擎将我们的面板组件加载或者析构释放。Popper.js的使用可另行百度，这里就不再赘述。

6.2、单选点击或者鼠标点击面板以外时，关闭选择面板

  触发面板关闭可扩展Vue自定义指令实现，这里参考使用了ElementUI的clickoutside指令，关于自定义指令的使用可以在百度，网上这类文章太多，这里亦不赘述。

7、 最后收尾

  在PluginsYearpickerIndex.Js（无则新建）文件中添加如下代码：

四、组件发布

  接下来就要将我们的组件库或者组件发布到NPM仓库供同学们使用了，发布的步骤如下：

1、首先需要在NPM官网注册一个账号，特别要记住账号名、密码、邮箱地址

  地址：https:// .npmjs.com/

2、在vscode终端将当前目录定位到plugins，输入命令：npm init -y，如下图：

回车后会在plugins目录生成pagkage.json文件，内容如上图，name为插件的名称，这个名称不能与npm仓库中现有的组件库重名，因此使用之前需先到npm仓库查询一下，看名称有没有被使用。

查询地址：https:// .npmjs.com/search?q=<name> 其它参数如版本号、作者等信息看着办就好。

3、发布组件到仓库

  发布组件之前需要先登录，因此继续在终端中输入命令：npm login，提示输入用户名、密码、邮箱信息，登录成功之后，继续输入命令：npm publish 即可将组件发布了。不出意外的话命令结束后 无论兄弟们应该可以在 无论兄弟们的Npm仓库中找到你的组件包。

五、测试使用

  接下来 如何安装使用呢？

1、首先来安装，新建一个Vue项目，在vscode终端中输入 npm install < 无论兄弟们的组件包名> –save

  如：npm install sanmi-ui –save   安装完成后，可以在项目的package.json文件中看到我们安装的组件，如图：

2、引入组件，在项目的 in.js中引入组件，如图：

3、在页面中放入组件，并定义好参数

4、运行 结局

写在 小编觉得

以上通过开发一款简单的组件讲述了Vue组件开发的全 经过。 项目源代码地址：sanmi-ui- ster