202008 第三周学习

fate1994
180 阅读3分钟

typora学习

  1. Ctrl + 1 2 3 4 5 6表示添加几阶标题

  2. 先输入>然后输入空格就可以引用文字

  3. 使用 * + - 都可以创建一个无序列表

  4. dfd两个`反引号代表插入行内代码

  5. 表头1表头2
    使用|表头|表头|加上回车就可以创建列表通过左上角按钮调整表格大小

  6. 输入***或者—表示绘制一条水平线

  7. 空格加空格加enter实现换行

  8. // 三个反引号加上回车就可以表示插入多行代码

Blob,FileReader,URL学习

1.Blob对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关的API，用来操作文件,后面方法调用传入的都是blob对象或者file对象

2.new Blob([‘字符串’, { ‘type’: ’随便设置’ }])

3.blob.slice(0, 2) 截取一部分。用这个方法分割上传大文件

4.File对象，提供了name，size，type等属性

5.FileReader API用于读取文件，即把文件内容读入内存。它的参数是File对象或Blob对象

6.FileReader提供了readAsDataURL等方法，将数据进行base64编码，通过e.target.result获取

7.URL对象，用于生成指向File或者Blob对象。是一段当前文件的内存URL。可以用于img的src属性

0821learn

1.fastClick解决ios300ms延迟问题

​ 原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

2. 用vue实现移动拖拽

touchstart(e) {
			// 获取当前鼠标距离左边的位置
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
			// 当前元素的left属性的值
      this.startLeft = Number(this.$refs.wrapper.style.left.split('px')[0])
      this.startTop = Number(this.$refs.wrapper.style.top.split('px')[0])
    },
    touchmove(e) {
      const touch = event.targetTouches[0]
			// 当前元素的left属性根据鼠标移动的距离重新赋值
      this.left = this.startLeft + touch.clientX - this.startX
      this.top = this.startTop + touch.clientY - this.startY
      if (this.left < 0) this.left = 0
      if (this.left > this.clientWidth - 108) this.left = this.clientWidth - 108
      this.$refs.wrapper.style.left = `${this.left}px`
      this.$refs.wrapper.style.top = `${this.top}px`
    },

3. vue中的冒泡捕获处理

​ 1.@click.capture在父元素上添加表示先执行此捕获事件，如果要组织冒泡事件就在方法中添加e.stopPropagation() @click.stop 表示自元素不冒泡不向父元素传递事件

0819learn

1.js主动触发点击事件的两种方式

  1. const test = this.$refs.test
test.click()

    const test = this.$refs.test
const DownloadEvt = document.createEvent('MouseEvents')
DownloadEvt.initEvent('click', true, false)
test.dispatchEvent(DownloadEvt)

2.object-fit

​ object-position表示图片在容器中的位置。类似transform中的移动

​ 首先要限定图片的宽和高 然后设置该属性

​ fill是默认值，表示拉伸填充整个容器

​ contain（保持纵横比缩放图片，使图片的长边能完全显示出来）

​ cover（保持纵横比缩放图片，只保证图片的短边能完全显示出来）

​ none（保持图片宽高不变）

​ scale-down（当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致）

3.transition animation

​ transition: property duration timing-function delay;

​ animation: name duration timing-function delay iteration-count direction;

​ @keyframe 不会出发重新布局的属性有：transform(其中的translate, rotate, scale), color, background等。应该尽量用这些去取代。

​ js可以通过添加class触发animation

avatar
文章
阅读
粉丝