零碎知识8

请求获取二进制图片文件后的展示/下载/二维码解析

// api
export function inviteDownload(data) {
  return request({
    url: 'invite/download',
    method: 'get',
    responseType: 'blob',
    data
  })
}
--------------------
    getUrl() {
      return new Promise((resolve, reject) => {
        inviteDownload({
          codeUrl: this.imgUrl,
        })
          .then((data) => {
            const blob = new Blob([data], {
              type: 'image/png',
            })
            //tempUrl可以放在img标签里展示
            this.tempUrl = window.URL.createObjectURL(blob)
            resolve(true)
          })
          .catch(() => {
            reject(false)
          })
      })
    },
    async download() {
      this.tempUrl = ''
      let flag = await this.getUrl()
      if (flag) {
        let dom = document.createElement('a')
        dom.href = this.tempUrl
        dom.download = 'invite' + this.id
        dom.style.display = 'none'
        document.body.appendChild(dom)
        dom.click()
        // dom.parentNode.removeChild(dom)
        dom.remove()
        window.URL.revokeObjectURL(this.tempUrl)
        this.$message({
          type: 'success',
          message: '下载成功',
        })
      }
    },
    async copyLink() {
      this.tempUrl = ''
      let flag = await this.getUrl()
      if (flag) {
        var qr = new QrCode()
        qr.decodeFromImage(this.tempUrl).then((res) => {
          var cInput = document.createElement('input')
          cInput.value = res.data
          document.body.appendChild(cInput)
          cInput.select() // 选取文本框内容
          document.execCommand('copy')
          this.$message({
            type: 'success',
            message: '复制成功',
          })
          // 复制成功后再将构造的标签 移除
          document.body.removeChild(cInput)
          window.URL.revokeObjectURL(this.tempUrl)
        })
      }
    },
  },

canvas

• ctx.beginPath() 清空子路径列表开始一个新路径
• ctx.closePath() 从当前点到起始点绘制一条直线 来封闭图形//注意它的意义

input输入时禁止前面是空格

• 注： 若input有 @change="inputFinal"，则若按下按钮提交时，先发生change事件 再发生 click事件

--以vue3为例
<el-input :model-value="input"
           @input="inputEnv"
           placeholder="Please input" />
              
import { ref } from 'vue'
const input = ref('')
function inputEnv(e) {
  // 使input的字符串不能以空开头
  input.value = e.replace(/^\s+/, '')
}

//--点击提交按钮时，再删除字符串尾部空格
function confirm(){
 //input没值时发送不加该参数
  input.value && (sendParams.text= input.value.trim())
 //接口完成后再统一复原参数初值
}

if替代

• 对于只需要判断一次的

 this.checked && this.addToStore(); //推荐
 条件A && 条件B && 满足条件后要执行的语句
 
 替换下面这个
 if(this.checked){
   this.addToStore()
 }

• 对于接力式判断

a>0?func1():a<-10?func2():''

替换下面这个
      if(a>0){
        func1()
      }else if(a<-10){
        func2()
      }

concat

• 拼接数组时，数组/参数列表 无所谓 全都能合到一块

[1,2,35,4].concat([5])
(5) [1, 2, 35, 4, 5]
[1,2,35,4].concat(5)
(5) [1, 2, 35, 4, 5]
[1,2,35,4].concat(5,6,7)
(7) [1, 2, 35, 4, 5, 6, 7]
[1,2,35,4].concat([5,6,7])
(7) [1, 2, 35, 4, 5, 6, 7]
[1,2,35,4].concat([5,6,7],[8,9,10])
(10) [1, 2, 35, 4, 5, 6, 7, 8, 9, 10]

判断类型

• Object.prototype.toString.call(arr)得到的类型准确 但是个返回的字符串是 [object 类型]，可封装个方法

function testType(target) {
  let str = Object.prototype.toString.call(target)
  return str.replace(/\[object (\w+)\]/, '$1') //注意$1是个字符串才能分组替换
}

testType([])
'Array'

testType(12)
'Number'

阴影和模糊

• box-shadow: 10px 11px 20px 4px #000;

• filter: drop-shadow(17px 11px 4px #000);
  

• backdrop-filter: blur(9px); //backdrop-filter: saturate(60%) blur(4px);//调整饱和度

• background-image: radial-gradient(transparent 1px,#c29e9e 1px);//filter的基础上 以圆心透明渐变构筑网阵（白色时更和谐）

filter 作用于元素本身，backdrop-filter 作用于元素遮盖住的部分