实习笔记二

实用小插件 – 点击复制clipboard.js

clipboard.js 现代化的拷贝文字，不依赖flash, 不依赖其他框架，gzip压缩后只有3kb大小

我们使用js的这个超级小的脚本就可以在我们直接的制作的网页上，实现点击复制，点击剪切的这种小功能，具体的操作如下

1. 引入clipboard.js这个文件，可以使用cdn或者下载以外，cdn引入<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>,脚手架只需要在终端输入cnpm install clipboard --save
2. 因为复制这个操作是针对一个对象而言的，所以我们要在给需要被复制的文本信息的元素结点上定义一个id来标识这个唯一的元素。
3. 我们自定义做一个“按钮“，当然按钮并不是只局限于button，span等等都可以，只要是能加上点击事件的都可以，在按钮上面需要添加比较重要的三个属性，
   • 一个是类或者id，方便我们找到这个按钮
   • 需要添加一个data-clipboard-target属性，属性值就是我们所要复制文本对象的idid名，完成的操作如下：data-clipboard-target="#web"表示我要复制id为web的结点对象的文本，其中cut事件的剪切效果只有在input标签或者textarea标签中才能够被使用。
   • 需要使用data-clipboard-action属性设置我们点击之后的需要完成的操作，如复制、剪切等操作，完整代码如下：data-clipboard-target="#web",最常使用action就是copy复制和cut剪切

	<span>Jimmy</span>
    <input id="web" type="text" placeholder="请输入你要访问的域名" />
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#web">
      点击复制
    </button>
    <!-- data-clipboard-action="cut代表的是剪切" -->
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#web">
      点击剪切
    </button>

完成了以上的操作之后就可以写JS的代码了，代码如下

	let clipboard = new ClipboardJS('.btn')   //创建对象
    clipboard.on('success', e => {  成功事件
      alert('复制成功')
      e.clearSelection()
    })
    clipboard.on('err', e => { //失败事件
      alert('复制失败')
      e.clearSelection()
    })
 
    /* 注意 在每一个事件的结尾都需要使用e.clearSelection()来清楚掉这个内存进程  否则多点几次就会出现很严重的无限复制的Bug */

例：

移动端的长按事件

在PC端转到移动端需要做一个类似抖音的长按效果，按钮周围的宽度会持续的变化，最初我想的想法是通过onmousedown事件和onmousedown事件，这个如果是在PC端可能跟是可以实现这个效果，但是在移动端上这两个事件是完全失效的，很好理解，手机上我们不需要使用也不能使用鼠标，所有这两个事件不会被触发，相对应替换他们的就是ontouchstar和ontouchend事件，表示的就是当我们按下和抬起的时候。

Vue中计算属性的妙用，

• 在这里我就不得不再说一遍，Vue的事件驱动和双向数据绑定真的是太好用了，当我们需要修改一些标签节点的样式的时候，可以使用computed计算属性来绑定，计算属性可以理解成是对data中的数据进行了一番修饰只有再返回给界面使用，所以computed计算属性中的方法一定是要有返回值的。
• 内联样式是通过直接在标签上通过使用style属性来设置css样式，一个注意点是写的语法和我们外部引入css是一样的，错误写法:width = 50px;height = 40px;这个是错误的，正确的使用方法应该和我们使用style、标签一样使用逗号来隔开，如width:50px;height:60px;
• 这个再配合上计算属性就非常非常的方便我们设置标签节点的样式了，如下：