最近印象深的代码片段

消息铃抖动

<el-badge  :value="msgNum" :max="99">
            <div :class="{'shaking':shake}">
              <i class="el-icon-bell header-right-bell" @click="openApproveList" ref="msgNumBall"></i>
            </div>
          </el-badge>
          .shaking{
  display: absolute;
  animation:myfirst .4s;
  transform-origin:center center;
  animation-iteration-count:infinite;
}

@keyframes myfirst{
  0%{
    transform: rotate(20deg)}
  50%{
    transform: rotate(-20deg)
  }
  100%{
  transform: rotate(20deg)
  }
}

Axios同步请求

methods: {
    async funA(){
        var res =  await axios.post('')//这里的res就是你axios请求回来的结果了
    }
}

js utf-8解码

// 解码
    utf8Decode (inputStr) {
      var outputStr = ''
      var code1, code2, code3, code4
      for (var i = 0; i < inputStr.length; i++) {
        code1 = inputStr.charCodeAt(i)
        if (code1 < 128) {
          outputStr += String.fromCharCode(code1)
        } else if (code1 < 224) {
          code2 = inputStr.charCodeAt(++i)
          outputStr += String.fromCharCode(((code1 & 31) << 6) | (code2 & 63))
        } else if (code1 < 240) {
          code2 = inputStr.charCodeAt(++i)
          code3 = inputStr.charCodeAt(++i)
          outputStr += String.fromCharCode(((code1 & 15) << 12) | ((code2 & 63) << 6) | (code3 & 63))
        } else {
          code2 = inputStr.charCodeAt(++i)
          code3 = inputStr.charCodeAt(++i)
          code4 = inputStr.charCodeAt(++i)
          outputStr += String.fromCharCode(((code1 & 7) << 18) | ((code2 & 63) << 12) | ((code3 & 63) << 6) | (code2 & 63))
        }
      }
      return outputStr
    },

弹窗树结构

<el-dialog title="请选择核心文件"  class="coreDialog" :visible.sync= "dialogCoreVisible">
                     <el-tree check-on-click-node show-checkbox class="filter-tree coreTree" :data="zipFileArry" :props="defaultProps" :filter-node-method="filterNode" ref="tree2"></el-tree>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogCoreVisible = false">取 消</el-button>
                  <el-button type="primary" @click="choiceFile">确 定</el-button>
                </div>
             </el-dialog>
             
           defaultProps: {
        children: 'children',
        label: 'label'
      },
     // 弹窗树结构的处理
    filterNode (value, data, node) {
      if (!value) {
        return true
      }
      let _array = []// 这里使用数组存储 只是为了存储值。
      this.getNode(node, _array, value)
      let result = false
      _array.forEach((item) => {
        result = result || item
      })
      return result
    },

利用jsZip解析zip包 并将数据转换成树结构

<el-form-item label="上传SDK" style="line-height: 300px;text-align: left">
              <el-upload
                ref="uploadSdk"
                :action="''"
                :show-file-list="true"
                accept=".jar, .zip, .aar"
                :before-upload="beforeCore"
                :on-success="uploadOk"
                :file-list="sdkList"
                :multiple="false"
                :limit="1"
              >
                <el-button size="small" type="primary" show-file-list drag>点击上传</el-button>
              </el-upload>
            </el-form-item>
            // 解析核心文件
    beforeCore (f) {
      if (!this.form.publishForm) {
        this.$message.error('请先选择上传类型')
        return false
      } else {
        let self = this
        self.$refs.uploadSdk.clearFiles()
        let types = ((f.type).split('/'))[1]
        if (types == 'zip') {
          self.files = f
          let newZip = new JSZip()
          newZip.loadAsync(f).then(function (zip) {
            self.zipFileArry = []
            let i = 0
            zip.forEach(function (relativePath, zipEntry) {
              if (zipEntry.name) {
                if (zipEntry.name.endsWith('.zip') || zipEntry.name.endsWith('.jar') ||
                        zipEntry.name.endsWith('.png') || zipEntry.name.endsWith('.so') || zipEntry.name.endsWith('.aar')) {
                  self.zipFileArry.push({ 'label': zipEntry.name, 'KeyId': i })
                  i++
                }
              }
            })
            // self.zipFileArry = self.parseStrings(self.zipFileArry)
            console.log(self.zipFileArry)
          })
          this.dialogCoreVisible = true
        } else {
          self.$refs.uploadSdk.clearFiles() // 清除文件对象
          self.sdkList = [{ name: f.name, url: f.url }] // 重新手动赋值filstList， 免得自定义上传成功了, 而fileList并没有动态改变， 这样每次都是上传一个对象
          let formData = new FormData()
          formData.append('componentId', self.id)
          formData.append('coreFiles', f.name)
          formData.append('file', f)
          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          self.axios.post(self.publicPath + '/file/uploadsdk', formData, config).then(res => {
            let retData = res.data.data
            self.form.sdkPath = retData.sdkPath
            self.form.sdkCoreFiles = retData.sdkCoreFiles
            self.form.sdkFileSize = retData.sdkFileSize
            self.sdkList[0].name = self.sdkList[0].name + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0 ' + parseInt(self.form.sdkFileSize) + 'kb'
          })
        }
      }
    },
    
    // 解析数数据
    getElemStr (arr, index) {
      let c = []
      for (let i = 0; i < index; i++) {
        c.push(arr[i])
      }
      return c.join('/')
    },
    parseStrings (array) {
      let temp = []
      for (let i = 0; i < array.length; i++) {
        if (array[i].endsWith('/')) {
          continue
        }
        temp.push(array[i])
      }
      array = temp
      let mapIndex = {}
      let indexArr = []
      for (let i = 0; i < array.length; i++) {
        let arr = array[i].split('/')
        for (let n = 0; n < arr.length; n++) {
          let parent = this.getElemStr(arr, n)
          let itemIndex = this.getElemStr(arr, n + 1)
          if (!mapIndex[itemIndex]) {
            mapIndex[itemIndex] = { 'p': parent }
            indexArr.push(itemIndex)
          }
        }
      }
      let nodeMap = {}
      let rootList = []
      for (let i = 0; i < indexArr.length; i++) {
        let index = indexArr[i]
        let map = mapIndex[index]
        let node = nodeMap[index]
        if (!node) {
          node = { 'label': index, 'children': [] }
          nodeMap[index] = node
        }
        if (!map.p) {
          rootList.push(node)
        } else {
          let pIndex = ''
          let pNode = []
          pIndex = map.p
          pNode = nodeMap[pIndex]
          if (!pNode) {
            pNode = { 'label': pIndex, 'children': [] }
            nodeMap[pIndex] = pNode
          }
          pNode.children.push(node)
        }
      }
      return rootList
    },       
    
    
    uploadThird (response, file, fileList) {
      if (fileList.length == 1) {
        fileList[0].name = fileList[0].name + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0 ' + parseInt(fileList[0].size / 1024) + 'kb'
      }
      if (response.code == 1) {
        this.form.sdkPath = response.data
        this.form.publishForm = this.form.sdkPath.endsWith('.jar') ? 'jar' : this.form.sdkPath.endsWith('.zip') ? 'zip' : 'aar'
      } else {
        this.$message.error(response.msg ? response.msg : '上传失败')
        this.form.sdkPath = null
        this.$refs.uploadThird.clearFiles()
      }
    }, 

未完待续。。。