资讯专栏INFORMATION COLUMN

最近印象深的代码片段

李义 / 3042人阅读

摘要:消息铃抖动同步请求这里的就是你请求回来的结果了解码解码弹窗树结构请选择核心文件取消确定弹窗树结构的处理这里使用数组存储只是为了存储值。

消息铃抖动

</>复制代码

  1. .shaking{
  2. display: absolute;
  3. animation:myfirst .4s;
  4. transform-origin:center center;
  5. animation-iteration-count:infinite;
  6. }
  7. @keyframes myfirst{
  8. 0%{
  9. transform: rotate(20deg)}
  10. 50%{
  11. transform: rotate(-20deg)
  12. }
  13. 100%{
  14. transform: rotate(20deg)
  15. }
  16. }
Axios同步请求

</>复制代码

  1. methods: {
  2. async funA(){
  3. var res = await axios.post("")//这里的res就是你axios请求回来的结果了
  4. }
  5. }
js utf-8解码

</>复制代码

  1. // 解码
  2. utf8Decode (inputStr) {
  3. var outputStr = ""
  4. var code1, code2, code3, code4
  5. for (var i = 0; i < inputStr.length; i++) {
  6. code1 = inputStr.charCodeAt(i)
  7. if (code1 < 128) {
  8. outputStr += String.fromCharCode(code1)
  9. } else if (code1 < 224) {
  10. code2 = inputStr.charCodeAt(++i)
  11. outputStr += String.fromCharCode(((code1 & 31) << 6) | (code2 & 63))
  12. } else if (code1 < 240) {
  13. code2 = inputStr.charCodeAt(++i)
  14. code3 = inputStr.charCodeAt(++i)
  15. outputStr += String.fromCharCode(((code1 & 15) << 12) | ((code2 & 63) << 6) | (code3 & 63))
  16. } else {
  17. code2 = inputStr.charCodeAt(++i)
  18. code3 = inputStr.charCodeAt(++i)
  19. code4 = inputStr.charCodeAt(++i)
  20. outputStr += String.fromCharCode(((code1 & 7) << 18) | ((code2 & 63) << 12) | ((code3 & 63) << 6) | (code2 & 63))
  21. }
  22. }
  23. return outputStr
  24. },
弹窗树结构

</>复制代码

  1. 取 消
  2. 确 定
  3. defaultProps: {
  4. children: "children",
  5. label: "label"
  6. },
  7. // 弹窗树结构的处理
  8. filterNode (value, data, node) {
  9. if (!value) {
  10. return true
  11. }
  12. let _array = []// 这里使用数组存储 只是为了存储值。
  13. this.getNode(node, _array, value)
  14. let result = false
  15. _array.forEach((item) => {
  16. result = result || item
  17. })
  18. return result
  19. },
利用jsZip解析zip包 并将数据转换成树结构

</>复制代码

  1. 点击上传
  2. // 解析核心文件
  3. beforeCore (f) {
  4. if (!this.form.publishForm) {
  5. this.$message.error("请先选择上传类型")
  6. return false
  7. } else {
  8. let self = this
  9. self.$refs.uploadSdk.clearFiles()
  10. let types = ((f.type).split("/"))[1]
  11. if (types == "zip") {
  12. self.files = f
  13. let newZip = new JSZip()
  14. newZip.loadAsync(f).then(function (zip) {
  15. self.zipFileArry = []
  16. let i = 0
  17. zip.forEach(function (relativePath, zipEntry) {
  18. if (zipEntry.name) {
  19. if (zipEntry.name.endsWith(".zip") || zipEntry.name.endsWith(".jar") ||
  20. zipEntry.name.endsWith(".png") || zipEntry.name.endsWith(".so") || zipEntry.name.endsWith(".aar")) {
  21. self.zipFileArry.push({ "label": zipEntry.name, "KeyId": i })
  22. i++
  23. }
  24. }
  25. })
  26. // self.zipFileArry = self.parseStrings(self.zipFileArry)
  27. console.log(self.zipFileArry)
  28. })
  29. this.dialogCoreVisible = true
  30. } else {
  31. self.$refs.uploadSdk.clearFiles() // 清除文件对象
  32. self.sdkList = [{ name: f.name, url: f.url }] // 重新手动赋值filstList, 免得自定义上传成功了, 而fileList并没有动态改变, 这样每次都是上传一个对象
  33. let formData = new FormData()
  34. formData.append("componentId", self.id)
  35. formData.append("coreFiles", f.name)
  36. formData.append("file", f)
  37. let config = {
  38. headers: {
  39. "Content-Type": "multipart/form-data"
  40. }
  41. }
  42. self.axios.post(self.publicPath + "/file/uploadsdk", formData, config).then(res => {
  43. let retData = res.data.data
  44. self.form.sdkPath = retData.sdkPath
  45. self.form.sdkCoreFiles = retData.sdkCoreFiles
  46. self.form.sdkFileSize = retData.sdkFileSize
  47. self.sdkList[0].name = self.sdkList[0].name + "xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0 " + parseInt(self.form.sdkFileSize) + "kb"
  48. })
  49. }
  50. }
  51. },
  52. // 解析数数据
  53. getElemStr (arr, index) {
  54. let c = []
  55. for (let i = 0; i < index; i++) {
  56. c.push(arr[i])
  57. }
  58. return c.join("/")
  59. },
  60. parseStrings (array) {
  61. let temp = []
  62. for (let i = 0; i < array.length; i++) {
  63. if (array[i].endsWith("/")) {
  64. continue
  65. }
  66. temp.push(array[i])
  67. }
  68. array = temp
  69. let mapIndex = {}
  70. let indexArr = []
  71. for (let i = 0; i < array.length; i++) {
  72. let arr = array[i].split("/")
  73. for (let n = 0; n < arr.length; n++) {
  74. let parent = this.getElemStr(arr, n)
  75. let itemIndex = this.getElemStr(arr, n + 1)
  76. if (!mapIndex[itemIndex]) {
  77. mapIndex[itemIndex] = { "p": parent }
  78. indexArr.push(itemIndex)
  79. }
  80. }
  81. }
  82. let nodeMap = {}
  83. let rootList = []
  84. for (let i = 0; i < indexArr.length; i++) {
  85. let index = indexArr[i]
  86. let map = mapIndex[index]
  87. let node = nodeMap[index]
  88. if (!node) {
  89. node = { "label": index, "children": [] }
  90. nodeMap[index] = node
  91. }
  92. if (!map.p) {
  93. rootList.push(node)
  94. } else {
  95. let pIndex = ""
  96. let pNode = []
  97. pIndex = map.p
  98. pNode = nodeMap[pIndex]
  99. if (!pNode) {
  100. pNode = { "label": pIndex, "children": [] }
  101. nodeMap[pIndex] = pNode
  102. }
  103. pNode.children.push(node)
  104. }
  105. }
  106. return rootList
  107. },
  108. uploadThird (response, file, fileList) {
  109. if (fileList.length == 1) {
  110. fileList[0].name = fileList[0].name + "xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0xa0 " + parseInt(fileList[0].size / 1024) + "kb"
  111. }
  112. if (response.code == 1) {
  113. this.form.sdkPath = response.data
  114. this.form.publishForm = this.form.sdkPath.endsWith(".jar") ? "jar" : this.form.sdkPath.endsWith(".zip") ? "zip" : "aar"
  115. } else {
  116. this.$message.error(response.msg ? response.msg : "上传失败")
  117. this.form.sdkPath = null
  118. this.$refs.uploadThird.clearFiles()
  119. }
  120. },

未完待续。。。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106952.html

相关文章

  • 前端面试题总结

    摘要:最近一直在找前端工作,前前后后面了几家公司,虽然不太顺利,但是收获还是有的,就过程中遇到的面试题总结一下标准盒模型盒模型自适应三栏布局移动端自适应方案布局有没有用做过入场动画闭包的作用笔试题作用域指向笔试题原型原型链笔试题数组对象中常用的方 最近一直在找前端工作,前前后后面了几家公司,虽然不太顺利,但是收获还是有的,就过程中遇到的面试题总结一下 CSS1:标准盒模型/IE盒模型2:自适...

    Mr_houzi 评论0 收藏0
  • 2018.11.19秋招末第二波前端实习/校招小结

    摘要:背景个人背景就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习前端方向,自学,技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多,投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗,待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习 前端方向,自学,vue技术栈 时间背景 大概是在11月9日准备...

    suxier 评论0 收藏0
  • 2018.11.19秋招末第二波前端实习/校招小结

    摘要:背景个人背景就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习前端方向,自学,技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多,投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗,待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习 前端方向,自学,vue技术栈 时间背景 大概是在11月9日准备...

    canger 评论0 收藏0
  • 一篇字节跳动前端面经

    摘要:为了避免它,只需分配将要使用的必要构造函数。示例对于此示例,就需要保持父构造函数继续正常工作。结论手动设置或更新构造函数可能会导致不同且有时令人困惑的后果。为了防止它,只需在每个特定情况下定义构造函数的角色。 hr小姐姐说一共有1轮笔试 + 3轮技术面 + 1轮hr面,面试地点在中关村天使大厦,岗位是1-3年前端 笔试 笔试分为多选 简答 判断 手写代码四部分,下面只写了印象比较深的几...

    caige 评论0 收藏0

发表评论

0条评论

李义

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<