2022.11.03

1.vue中的js中文件中,通过操作dom方式引入图片

一样的本地图片地址，通过img标签引用没问题，但是放在js里再导入引用就无效了。这是因为放在父页面的标签里会被webpack打包出来（具体的可以自己打开开发者工具f12，看看同样是img标签里的src属性），而在js里面写图片路径其实只是字符串 ，webpack不会处理。所以想在js引入本地图片的地址，可以通过import导入图片。代码如下。

import lvbuURL from '../assets/hero.png'
export default {
  lvbu: {
    name: '吕布',
    url:lvbuURL,
    info1:
      '优势：偏好性强。',
    info2:
      '劣势：因小失大。',
    info3:
      '建议：学会放手。'
  },
}

或者通过require(url)方式引入,或者window.location.orgin可以直接访问public下的static里的静态资源 通过require方式引入的时候,路径不能为纯变量,前置地址必须是静态地址，否则会报错

dom.style.backgroundImage = `url(${require('../' + url)}`

2.Sortable.js排序获取到排序后的数据

Sortable.create(pageEl, {
  onEnd(evt) {
    if (evt.newIndex !== evt.oldIndex) { // newIndex拖拽后的索引  oldIndex拖拽前的索引
      var middleId = _this.pageIdArr[evt.newIndex] // pageIDArr为数据id组成的数组
      _this.pageIdArr[evt.newIndex] = _this.pageIdArr[evt.oldIndex]
      _this.pageIdArr[evt.oldIndex] = middleId
      if (_this.pageIdArr.length) {
        sortPage(_this.pageIdArr)
      }
    }
  }
})

3.vue中全局变量可以写一个js文件,将变量导出,在main.js中导入,可以挂在到vue的原型上,在所有地方都可以访问到

4.下载流文件,可以直接使用a标签的href属性下载,也可以使用axios请求

Vue.axios({
      method: 'post',
      url: param.url,
      data: param.body,
      headers: param.headers || {responseType: 'blob'},
      responseType: 'blob'
    }).then(async res => {
      // 导出错误模板提示
      if (res.data.type === 'application/json') {
        const text = await res.data.text()
        const jsonText = await JSON.parse(text)
        resolve(jsonText)
      } else {
        const success = {
          status: 200
        }
        let fileName = ``
        const content = res.data
        if (res.headers) {
          fileName = decodeURI(decodeURI(res.headers['content-disposition'])).split('filename=')[1]
        }
        if (!fileName) {
          fileName = `${Vue.$moment().format('YYYYMMDDhhmm')}.xls`
        }
        const blob = new Blob([content], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
        })
        if ('download' in document.createElement('a')) {
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
        resolve(success)
      }

5. CSS background-attachment 属性

scroll 背景图片随着页面的滚动而滚动，这是默认的。

fixed 背景图片不会随着页面的滚动而滚动。

local 背景图片会随着元素内容的滚动而滚动。

initial 设置该属性的默认值。 阅读关于 initial 内容

inherit 指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容