原创 JS實現數組扁平化的方法

一、緣由 在github上看到一道題,《將數組扁平化並去除其中重複數據,最終得到一個升序且不重複的數組》,要求如下: 已知如下數組: var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [

原创 前端開發常用工具函數——(一)文件下載功能

前端下載有兩種常用方式,一種是打開新頁籤觸發下載,另一種是在本頁面先下載文件轉換爲二進制再下載。 一、新建標籤頁的方式 function downLoad (downLoadUrl) { let a = document.cre

原创 點擊遮罩層非內容區域關閉遮罩層的三種思路四種方案

開發過程中經常使用遮罩層展示重要信息,同時屏蔽對下層頁面的操作,其中一個可以提升用戶體驗感的地方就是點擊非內容區域關閉遮罩層,本文就提供三種思路,四種實現方案。 其中遮罩層樣式如下: <style lang="less" scoped>

原创 Vue理解插槽及其slot、slot-scope、v-slot指令的使用

什麼是插槽 Vue本身實現了一套完善的內容分發的機制,使用<slot>元素作爲內容分發的出口,也就是插槽。插槽內的模板<template>、HTML代碼以及組件會被渲染。 <!-- Example組件的定義 --> <h1>

原创 兼容IE和Chrome的富文本框圖片粘貼、拖拽上傳功能的實現

項目中有一個需求是希望富文本框可以直接粘貼圖片,不通過如下圖點擊文件上傳->選擇文件的方式。 解決思路 本着不自己造輪子的想法,遂查閱kindeditor的官方文檔,發現並沒有輪子可以直接用,不過從編輯器初始化參數中看到有aft

原创 一文讀懂TCP握手協議與揮手協議

TCP建立連接和斷開連接很重要,但是自己又經常忘記一些具體細節,回顧的時候要麼到收藏夾裏找文章,要麼是百度/谷歌一波,偶爾一兩次還好,次數多了略顯麻煩,遂趁這次溫故的機會,記錄下來,方便自己也方便他人~ TCP報文格式 TCP報文

原创 一文讀懂JS運行機制(略長)

一、前言 var a = 'heihei', b = 'xixi' function foo () { console.log(a) } function bar () { var a = 'houhou' foo(

原创 基於Vue+ElementUI的省市區地址選擇通用組件

一、緣由 在項目開發過程中,有一個需求是省市區地址選擇的功能,一開始想的是直接使用靜態地址資源庫本地打包,但這種方式不方便維護,於是放棄。後來又想直接讓後臺返回全部地址數據,然後使用級聯選擇器進行選擇,但發現數據傳輸量有點大且處理過程耗時

原创 new Date()?沒那麼簡單!!

相信不少人都覺得Date對象很簡單,不就是new一下,然後調用下原型方法嘛,so easy啦。恰巧我也是其中一員,平時上手即用,沒怎麼關注過這一塊,直到最近一個小需求點把自己坑了,才醒悟過來,new Date()沒那麼簡單。哎,血

原创 深入瞭解Element Form表單動態驗證問題

在上一篇《vue elementUI組件表單動態驗證失效的問題與解決辦法》中,講到直接修改prop屬性,未觸發form-item的重新渲染,所以雖然有校驗*的標誌,實際上並不會校驗。這是表面現象,最近有了空餘時間,去看看了elem

原创 深入瞭解el-dialog組件中插槽的生命週期

問題表現 在項目中使用el-dialog彈框組件時,有個開發任務需要根據生命週期向插槽內的子組件傳遞數據。但是詭異的發現el-dialog這個組件中插槽父子組件的聲明週期不是按照: 父組件beforeCreate→父組件crea

原创 預檢請求OPTIONS

最近在項目偶然發現使用第三方文件管理系統上傳文件時,上傳請求會發送兩次。發現第一個是預檢請求OPTIONS。 老早就知道HTTP請求方法有OPTIONS,但從來沒使用過,一時引起了興趣,遂查閱了相關資料。 什麼是OPTIONS請

原创 vue+elementUI打包後在IE10以下出現語法錯誤的原因與解決辦法

原因 IE10以下報下面的錯誤: 查看詳情就會發現是elementUI的ES6語法並未被編譯轉換成ES5 解決辦法 安裝了babel、babel-loader的前提下,在webpack.base.conf.js中相應位置添加如下配置即

原创 學會這些CSS,休想讓我切圖!!!

標題開個玩笑,實際上CSS3有許多亮眼的特性,比如陰影shadow、動畫animation、形變transform、漸變gradient、濾鏡filter等,合理運用這些特性,可以實現許多高大上的效果。如果覺得有用請點個贊或者收藏

原创 el-upload控制檯錯誤Cannot set property 'status' of undefined的原因和解決辦法

今天在測試的時候發現上傳空文件時,控制檯會報錯,之後上傳文件會失敗。 定位問題 查看控制檯報錯 可以知道是elementUI組件出了問題 斷點調試 調試發現是getFile返回undefined,查看getFile