步骤分解法--两步轻松完成弹窗文案复制

前端项目目前是elementUI+Vue开发的，遇到一个需求就是将计算结果展示在弹窗上，并进行复制到剪切板上。

我们将需求进行拆解：

第一步是，点击构建按钮，将结果计算出来，并把结果展示在弹窗的文案中

第二步是，点击复制按钮，直接将结果复制到剪切板上

需求很简单，重要的是实现步骤以及怎样以最简洁快速的方式实现它。

 

我们首先先解决第一步。第一步又可以分为两个小步骤，1️⃣计算结果，2️⃣展示弹窗。其中计算结果根据大家不同的需求而定，我们这里就以拼接字符传进行举例。展示弹窗有elementUI有两种：一个是MessageBox 弹框，一种是Dialog 对话框。如果只是展示出结果内容，那么MessageBox足以满足我们的需要。但是我们还要实现对内容的复制，这时候就需要弹出较为复制的内容了，就需要使用Dialog。

这是第一步的展示效果：

 

第二步主要就是复制功能。最常见的实现复制主要是两个：一个是使用第三方的库：clipboard.js，另一个就是使用原生的方法：document.execCommand()。我们下面主要是介绍第一种方式。网上很多关于clipboard.js的使用方法，我们这里就不一一赘述，直接介绍使用过程。

 

因为我们是直接复制已用的文本，所以直接用 data-clipboard-text即可；

 

点击复制按钮之后，即可将弹窗中的文本复制到剪切板，在需要的地方粘贴即可；

至此，我们以最简单的两步完成弹窗文案的复制需求。在完成这次需求之后，也有一些小感想。当我们拿到一个需求后，先对这个需求进行分析，将需求进行拆解。拆解后的需求就会很清晰，每一步需要做什么也很明白，也能从另一个角度去思考问题。就酱~O(∩_∩)O~~