2020-01 前端技術(shù)匯總

2020/01/30 周四

#百度統(tǒng)計網(wǎng)站測速

登錄到百度統(tǒng)計，在優(yōu)化分析 - 網(wǎng)站速度診斷位置，輸入鏈接，測速速度。現(xiàn)在靜態(tài)化后的博客比之前的jsp打開速度有了明顯的提高。可以達到99分

#seo鏈接提交到搜索引擎

最近對zuo11.com進行了改版，完成了博客的靜態(tài)化并完成了上線，nginx + 靜態(tài)文件代替了原來的 tomcat + jsp + mysql的模式。針對百度收錄與索引，google收錄，做了一些處理。

#登錄到百度站長平臺

由于url除了zuo11.com其他原來文章的url全部失效，需要讓百度重新收錄，添加索引。入口：百度站長平臺，現(xiàn)在叫資源搜索平臺(opens new window)

  1. 提交網(wǎng)站改版的規(guī)則URL對，百度搜索 site:zuo11.com，將收錄的網(wǎng)頁鏈接，以及改版后的url以規(guī)定的格式提交
# 舊URL，對應(yīng)的改版后的url，以空格隔開，一行是一條數(shù)據(jù)
http://zuo11.com/Notes.woe?action=detail&note_id=24 http://www.zuo11.com/blog/2016/10/c_vim.html
http://zuo11.com/Notes.woe?action=APUE http://www.zuo11.com/blog/category.html
  1. 提交死鏈，對于改版后404的頁面，可以提交死鏈，防止搜索引擎認為網(wǎng)站不穩(wěn)定或服務(wù)異常，導(dǎo)致權(quán)重評分降級
# 死鏈規(guī)則
http://zuo11.com/Notes.woe?
  1. 新鏈接的提交，這里推薦使用sitemap的方式提交鏈接，怎么生成sitemap呢？使用 https://www.xml-sitemaps.com/ 輸入你的站點，就可以自動生成sitemap.xml信息了，默認只有sitemap.xml，可以找更多文件的下載入口，可以下到一個sitemaps.zip的一個文件，里面還包含了txt、html等非xml格式的數(shù)據(jù)。將生成后的sitemap.xml文件放到域名根目錄下，提交對應(yīng)的鏈接到百度站長平臺

#登錄到Google search console

入口：Google search console (opens new window)，登錄后左側(cè)菜單index - Sitemaps提交sitemap鏈接

#開源協(xié)議MIT等具體含義

一般新建一個開源倉庫時，需要確定開源協(xié)議。之前習(xí)慣是MIT，就是別人拿去干什么都可以。對于一些需要控制他人使用的就需要其他協(xié)議了。阮一峰博客里有一張圖來解釋很清晰明了

開源協(xié)議.jpg
  • 他人修改源碼后是否可以閉源?
    • 可以閉源，沒一個修改過的文件是否都必須放置版權(quán)說明?
      • 需要放置版權(quán)說明 Apache許可證
      • 不需要放版權(quán)說明，衍生軟件的廣告是否可以使用你的名字促銷?
        • 可以用你的名字促銷 MIT許可證
        • 不可以用你的名字促銷 BSD許可證
    • 只能開源，那新增代碼后是否采用同樣的許可證(不能閉源)?
      • 新增代碼后也只能開源 GPL許可證
      • 新增代碼后可以閉源，需要對源碼的修改之處提供說明文檔嗎？
        • 需要對源碼的修改之處提供說明文檔 LGPL許可證
        • 不需要提供說明文檔 Mozilla許可證

結(jié)合實際情況，zuo11.com個人站點blog部分的開源可以使用 Apache許可證，如果是后面開源生成靜態(tài)頁面的程序，可以使用MIT協(xié)議

#2020/01/29 周三

#將markdown文件轉(zhuǎn)html

其實早在18年12月，我就已經(jīng)寫好了最簡的demo，使用的是marked這個工具。本來準備將博客靜態(tài)化的，但后來就沒繼續(xù)了，這里來說下方法

// github: https://github.com/markedjs/marked
// marked.js 是下載好的
let marked = require('./lib/marked') // import marked.js
let fs = require('fs')
// 讀取md文件
fs.readFile('./notes/2016/10/iOS程序啟動過程，從main函數(shù)開始UIApplication與AppDelegate.md', (err, data) => {
  if (err) {
    console.log(err);
    return;
  }

  // 這里加入了基本的html框架，加入了代碼高亮prismjs
  let htmlStr = `<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <link href="../lib/prismjs/prism_default.css" rel="stylesheet" />
    </head>
    <body>
      ${marked(data.toString())}
      <script src="../lib/prismjs/prism_default.js"></script>
    </body>
  </html>
  `
  // 生成新的文件
  fs.writeFile('./dist/test.html', htmlStr, (err) => {
    console.log(err)
    console.log('寫入文件成功');
  })
})

注意：marked將md文件轉(zhuǎn)html時，如果在ol或ul后面加了代碼塊，必須換行，如果不換行就會準換異常

// - 這是一個ul
// ul后面這里不能直接用```寫代碼，需要換行，如果不換行在Typora可以正常渲染，但marked轉(zhuǎn)換時會出問題

#nginx開啟gzip

首先復(fù)習(xí)下windows下，nginx怎么使用：

  1. 在nginx官網(wǎng) (opens new window)下載nginx，穩(wěn)定版，現(xiàn)在是nginx/Windows-1.16.1，下載后是一個zip文件
  2. 解壓后放到桌面，進入解壓后的目錄 nginx-1.16.1，先修改nginx的root文件夾，也就是80端口指向的目錄。修改 conf 目錄下的 nginx.conf文件，如下圖，將靜態(tài)項目路徑設(shè)置到root后
nginx配置.png
  1. 運行nginx
# 進入到nginx目錄，shift + 鼠標右鍵，在此處打開命令窗口，將nginx.exe拖到窗口，再打一個空格 -c 配置文件，類似下面的命令
nginx.exe -c conf/nginx.conf
# 關(guān)閉nginx服務(wù)，注意 nginx.exe 是將nginx.exe文件拖到terminal時產(chǎn)生的
nginx.exe -s stop

在上面的圖中，已經(jīng)有開啟gzip的代碼了。默認情況下 gzip on 是注釋掉的，我們打開這個注釋再添加幾個屬性即可。對于額外增加的幾個屬性這里說明下:

  • gzip_types是指定需要開啟gzip壓縮的文件類型
  • gzip_comp_level 指定壓縮等級
  • gzip_min_length 當超過多少字節(jié)時就壓縮，我上面設(shè)置的是1K
  • gzip_vary 增加響應(yīng)頭”Vary: Accept-Encoding”

#怎么判斷nginx是否成功開啟gzip

打開chrome訪問對應(yīng)的站點，F(xiàn)12，點擊network. 在Name，Priority 那一欄的最右側(cè)空白位置，右鍵，勾選 Content-Encoding，如下圖，設(shè)置好后刷新頁面就可以看到Content-Encoding那一列了，如果有g(shù)zip就說明開啟了gzip，需要結(jié)合Size這個屬性看，如果沒有超過設(shè)定大小的文件，是不會開啟gzip壓縮的。

chrome_gzip.png

#2020/01/21 周二

#使用set去重時的問題

如果add的值是數(shù)組，那么是無法自動去重的。下面來看一個例子：

var mySet = new Set()
mySet.add([-1,0,1])
mySet.add([-1,0,1])
mySet.size // 2
console.log(Array.from(mySet)) // [[-1, 0, 1], [-1, 0, 1]]

// 這種情況想去重，可以將值[-1, 0, 1].join('|') 處理下，添加進去，到時統(tǒng)一再split出來

#數(shù)組排序sort值有負數(shù)時排序異常

正常情況使用 sort 是好用的，但如果有負數(shù)時，會有問題

// 
var arr = [5, -11, -10] 
arr.sort() // [-10, -11, 5]

// 明顯上面的結(jié)果是有問題的，默認的排序遇到負數(shù)就不正確了
// 這就需要自定義排序了
arr.sort((a, b) => a - b) // [-11, -10, 5]

再來個復(fù)雜的例子 [[-15, -10, 3], [-14, -9, 5]] 對于這種數(shù)組，怎么寫自定義排序？

arr.sort((a, b) => {
  if (a[0] === b[0] && a[1] === b[1]) {
    return a[2] - b[2]
  }
  if (a[0] === b[0]) {
    return a[1] - b[1]
  }
  return a[0] - b[0] 
})

#2020/01/19 周日

#零編碼或少編碼生成通用封裝的axios函數(shù)

現(xiàn)在項目中，每個模塊都會單獨弄一個對應(yīng)service.js，把所有接口請求放到里面，其實就是將axios請求封裝為一個個函數(shù)。每個函數(shù)的函數(shù)名、url、請求方法會有所差別。重復(fù)代碼比較多。最近在看mongodb教程時，了解到零編碼編程的思想，于是想把這里優(yōu)化下，最好以后寫新模塊時，只要寫簡單的配置文件就可以自動生成函數(shù)，不用再單獨手寫函數(shù)。先來看看原來的方式：

// someService.js
// 這里的service是對axios的封裝，增加了一些請求攔截，用響應(yīng)攔截等
import { service, downloadService } from '../service.js'
let someService = {
  urls: {
    funcA: '/api/url1',
    funcB: '/api/url2',
    funcC: '/api/url3',
  },
  funcA() {
    return service.post(someService.urls.funcA, payload)
  },
  funcB() {
    return service.get(someService.urls.funcB, {params: payload})
  },
  funcC() {
    return downloadService.post(someService.urls.funcC, payload)
  }
}
export default someService

// 在vue組件里，使用方法
import someService from 'someService.js'
someService.funcA(payload).then(() => {
  // 接收結(jié)果
})

當接口比較多時，比如20+，那就需要寫20個類似的函數(shù)，冗余性太高，這里使用零編碼編程的思想來優(yōu)化一下，先來看看優(yōu)化后的代碼

// 優(yōu)化后的 someService.js 和舊的寫法實現(xiàn)的功能一樣，且更加強大
import generateCommonApi from './utils/generateCommonApi'
import { downloadService } from '../service.js'

// 之前使用對象結(jié)構(gòu)，發(fā)現(xiàn)還是有大量重復(fù)的屬性字段，不是很方便，用數(shù)組的方式，寫法更精簡，更高效
// 但同時犧牲了擴展性，類似于大的框架總會遇到的問題：各種實現(xiàn)都各有優(yōu)缺點，關(guān)鍵是要去找一種平衡，做一些取舍。
const someApiList = [
  ['funcA', '/api/url1', 'post'],
  ['funcB', '/api/url2'],
  ['funcC', '/api/url3', 'post', downloadService]
]
export default generateCommonApi(someApiList)

這里通過寫一個generateCommonApi.js來實現(xiàn)自動生成通用api對象，以后就不用再寫大量重復(fù)的代碼了。來看看具體實現(xiàn):

// generateCommonApi.js
// 參考文檔：https://github.com/axios/axios
import { services } from './service.js'

function generateCommonApi(apiList, isAddTimestamp2Url) {
  let obj = {}
  let methodsList = ['request', 'get', 'delete', 'head', 'options', 'post', 'put' 'patch']

  // 遍歷JSON配置，生成對應(yīng)的請求函數(shù)并掛載到obj對象
  apiList.forEach(item => {
    let [apiName, url, method = 'get', servicesFunc = services] = item
    let isMethodOk = typeof method === 'string' && methodsList.includes(method.toLowerCase())
    method = isMethodOk ? method : 'get'

    // 如果需要加時間戳
    url += isAddTimestamp2Url ? '' : `${url.includes('?') ? '&' : '?'}t=${+new Date()}`

    obj[apiName] = async (payload = {}, config = {}) => {
      let paramsMap = {
        '1': [payload],
        '2': [url, {params: payload, ...config}],
        '3': [url, payload, config]
      }
      let is3Args = ['post', 'put', 'patch'].includes(method)
      let methodType = method === 'request' ? '1' : is3Args ? '3' : '2'

      return servicesFunc[method](...paramsMap[methodType])
    }
  })
  return obj
}

export default generateCommonApi

#測試loading時寫的等待函數(shù)最簡代碼

一般想模擬延時，測試loading效果時，會寫一個等待函數(shù)，怎么最簡單方便呢？

// 一般寫法
const delay = function (msec){
  return new Promise(resolve => {
    setTimeout(() => {
      resolve()
    }, msec)
  }) 
}
await delay(2000)
console.log('test')

// 使用箭頭函數(shù)簡寫
const delay = (msec) => new Promise(resolve => setTimeout(() => resolve(), msec))
await delay(2000)
console.log('test')

// 舍棄函數(shù)封裝與自定義時長，最精簡寫法
(async () => {
  await new Promise(r => setTimeout(() => r(), 2000)) // 一行代碼
  console.log('test')
})()

在vue中的實際應(yīng)用

vue.prototype.$mydelay = (t) => new Promise(r => setTimeout(() => r(), t))
// 在vue中間中調(diào)用
await this.$mydelay(2000)

#2020/01/16 周四

#node遍歷文件夾下的文件名再require對應(yīng)的文件出錯

在使用koa mock接口時，一個模塊有很多接口，就寫了十幾個js，每個js對應(yīng)一個接口數(shù)據(jù)。如果每增加一個接口，再添加一個require就很麻煩，于是寫了個index.js來遍歷文件夾，進行動態(tài)引入。以后寫好js，就不用再手動require了。之前都運行正常的，最近再運行時發(fā)現(xiàn)一直報錯，require異常。后來打印遍歷的fileName，發(fā)現(xiàn)居然有 .DS_Store 文件，require這個文件時錯誤。這個文件屬于mac系統(tǒng)自動生成的文件，之前都沒有的。在程序中過濾調(diào)這個文件即可。

mock目錄結(jié)構(gòu)如下:

# 目錄結(jié)構(gòu)
mock
├── pm
│   ├── index.js # 入口
│   ├── 接口1.js
│   ├── 接口2.js
│   └── 接口n.js
├── user 
├── product
└── sever.js # 入口文件，require('./pm/index.js')(router) 將接口添加到路由

pm/index.js 代碼如下：

const fs = require('fs')

module.exports = router => {
  fs.readdirSync(__dirname).forEach(fileName => {
    if (fileName === 'index.js' || fileName.startsWith('.')) return
    require('./' + item)(router)
  })
}

#2020/01/14 周二

#export PATH 后關(guān)閉termial就失效了

mac 修改環(huán)境變量，以便能在任何地方使用 mongod 命令

# 運行該命令后，當前terminal生效了，但關(guān)閉后，打開其他terminal就無效
export PATH=/usr/local/mongodb/bin:$PATH

這種情況需要在 .bash_profile 文件里，加入 export PATH=/usr/local/mongodb/bin:$PATH 才行

vi ~/.bash_profile

修改后的 .bash_profile 文件，之前還修改過mysql的環(huán)境變量

export PATH=${PATH}:/usr/local/mysql/bin
export PATH="$HOME/.rbenv/bin:$PATH"
export PATH=/usr/local/mongodb/bin:$PATH
if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi

修改好后，關(guān)閉該終端，再打開，運行 mongod 命令即可

#npm簡寫與項目名稱注意事項

最近在安裝 npm install 時喜歡簡寫 npm i mysql2 -s 但發(fā)現(xiàn)執(zhí)行后，并沒有安裝成功，在package.json里也沒有任何記錄。還沒有報任何錯誤。

# 把簡寫的命令換成 非簡寫 再執(zhí)行
npm install mysql --save

# kevindeMacBook-Air:mysql2 kevin$ npm i mysql2 -s    # 簡寫執(zhí)行后，沒有任何信息
# kevindeMacBook-Air:mysql2 kevin$ npm install mysql2 -save # 這次就報錯了，提示項目名稱與包名稱相同
# npm ERR! code ENOSELF
# npm ERR! Refusing to install package with name "mysql2" under a package
# npm ERR! also called "mysql2". Did you name your project the same
# npm ERR! as the dependency you're installing?
# npm ERR! 
# npm ERR! For more information, see:
# npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

# 由于在初始化生成package.json時為了方便，直接使用了下面的命令
npm init -y  # 所有默認yes，生成的package.json里面，項目名稱字段為當前文件夾名。

# 由于文件夾名就是 mysql2，與安裝的包名重復(fù)了。將package.json里的name屬性改一個名字即可

總結(jié): 項目名稱不要與依賴的包名相同，當npm安裝簡寫執(zhí)行異常時，使用非簡寫方法再試試。

#2020/01/11 周六

#markdown里怎么為文字添加顏色，怎么畫復(fù)雜表格

之前看markdown語法時，并沒有添加顏色和復(fù)雜表格的方法，但最近了解到markdown里面可以直接使用html，那就方便了。復(fù)雜表格直接使用table標簽畫，如果想給文字加顏色

<span style="color: red">這是一段有顏色的字體</span>

<!-- 下劃線 -->
<u>這是一段有下劃線的文字</u>

注意：markdown解析器很多。在Typora嵌入html的復(fù)雜表格沒什么問題，但在github上顯示時，table被放到了文檔的最下面。語雀里導(dǎo)入時，也會有一點問題。所以為了保證最大程度的兼容，寫md時，盡量避免使用內(nèi)嵌html，對于復(fù)雜表格可以使用圖片代替

#2020/01/10 周五

#css var() 與變量 --

<style>
  /* 最大高度為三行，將line-height定義為變量lh */
  .module {
    --lh: 1.2rem;
    line-height: var(--lh);
    max-height: calc(var(--lh) * 3);
    overflow: hidden;
  } 
</style>

#多行文本截斷

參考：Line Clampin' (Truncating Multiple Line Text) | CSS-Tricks(opens new window)

line_clamp.png
/* 方法1：使用 ::after 偽元素選擇器，覆蓋*/
 .method-a {
  line-height: 1.2rem;
  max-height: 3.6rem;
  overflow: hidden;
  position: relative;
}
.method-a::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  max-width: 100px;
  content: '';
  height: 1.2rem;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1) 90%);
}

/* 方法2：使用 -webkit-line-clamp 不過不支持IE */
.method-b {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

#position:relative

之前想把內(nèi)容區(qū)域的title，有一半放到頂部背景，當時只想著使用position:absolute來做，現(xiàn)在發(fā)現(xiàn)將title的position設(shè)置為relative，top為負數(shù)就可以了，且不影響標題下面元素顯示的布局。position默認為static，不能使用top,right,left,bottom屬性。

.title {
  position: relative;
  top: -10px;
}

#node path.resolve()

koa靜態(tài)文件服務(wù)中間件的實現(xiàn)里，需要將當前路徑 __dirname 與用戶傳入的路徑合并為一個絕對路徑，就可以使用path.resolve函數(shù)

The path.resolve() method resolves a sequence of paths or path segments into an absolute path.

const path = require('path')

path.resolve('/foo/bar', './baz');
// Returns: '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');
// Returns: '/tmp/file'

let dirPath = './public'
path.resolve(__dirname, dirPath)

參考：node path.resolve(opens new window)

#2020/01/09 周四

#asycn/await 執(zhí)行順序問題

注意：await 后面的內(nèi)容如果值為promise，則等待promise執(zhí)行完再向下執(zhí)行，如果非promise，await不會等待(await下面的代碼和await等待的函數(shù)會同步執(zhí)行)

(async () => {
  await test() // await fn()
  console.log('異步執(zhí)行完成')
})()

async function test() {
  fn() // return fn() 或 await fn()
}

async function fn(next) {
  console.log('start fn')
  await delay()
  console.log('end fn')
}

function delay() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, 2000)
  })
}

// return fn()  或 await fn() 結(jié)果
// start fn
// end fn
// 異步執(zhí)行完成

// fn() 結(jié)果
// start fn
// 異步執(zhí)行完成
// end fn

參考：async/await函數(shù)的執(zhí)行順序的理解 - csdn(opens new window)

#forEach的缺點

// 真實場景: 匹配路由數(shù)組里的路徑，匹配到就結(jié)束遍歷，發(fā)現(xiàn)無法結(jié)束遍歷
// 遍歷路由進行匹配，如果匹配到了則執(zhí)行，停止往下執(zhí)行下一個中間件，否則向下執(zhí)行
stock.forEach((item) => {
  if (ctx.url === item.path && item.methods.includes(ctx.method)) {
    return
  }
  await next()
})

總結(jié)：forEach遍歷開始后，無法停止后面的遍歷，無法終止執(zhí)行函數(shù)。for里面可以通過break來結(jié)束循環(huán)，return結(jié)束函數(shù)。對于需要遍歷到匹配的數(shù)據(jù)就退出的情況，就需要使用for了

很清奇的操作：使用拋異常的方式，來結(jié)束forEach循環(huán)

// 參考：https://www.cnblogs.com/Marydon20170307/p/8920775.html
try {
  var array = ["first","second","third","fourth"];

  // 執(zhí)行到第3次，結(jié)束循環(huán)
  array.forEach(function(item,index){
      if (item == "third") {
          throw new Error("EndIterative");
      }
      alert(item);// first,sencond
  });
} catch(e) {
    if(e.message!="EndIterative") throw e;
};

#2020/01/08 周三

#IE下dialog彈窗全屏后列表橫向滾動卡頓的問題

全屏后添加了一個名為 is-fullscreen 的class，發(fā)現(xiàn)把對應(yīng)的overflow:auto去掉后，就不會卡頓。去掉其實就是將overflow設(shè)置為默認值visible，如果子組件高度超出范圍，將is-fullscreen設(shè)置的height 100% 改為 auto。另一種方法是將table的z-index改為3000(相對dialog比較高的一個層級)，這樣IE下就不會卡頓了。

overflow相關(guān)值描述

值 描述
visible 默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。
hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。
scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

參考：CSS overflow 屬性(opens new window)

#if else較多時可使用策略模式

// if else 
if () {
  a
} else if () {
  b
} else if () {
  c
}

// 更優(yōu)雅的寫法，策略模式
// 更多策略模式，策略模式表單驗證可參考：JS設(shè)計模式與開發(fā)實戰(zhàn) 第五章p82
let rules = [
  'a': () => { a },
  'b': () => { b },
  'c': () => { c },
]
rules[name]()

#2020/01/07 周二

#判斷當前鼠標是否在某個div內(nèi)部

let eventType = document.mozHidden ? 'DOMMouseScroll' : 'mousewheel'
let ele = '某個dom'
ele.addEventListener(eventType, (e) => {
  if ('容器范圍內(nèi)dom'.contains(e.target)) {
    // 當前鼠標在容器內(nèi)
  }
})

參考： Node.contains - Web API 接口參考 | MDN(opens new window)

#IE下dialog彈窗的滾動條滾動到底部時，觸發(fā)了瀏覽器滾動條

同樣都是有遮罩層，chrome都是OK的，但IE下會有問題。經(jīng)過定位后發(fā)現(xiàn)，對于dialog使用了append-to-body屬性的，都沒問題。發(fā)現(xiàn)dialog顯示時body上添加了一個 el-popup-parent--hidden的class, 設(shè)置了overflow為hidden，關(guān)了滾動條。對于沒有append-to-body屬性的dialog如果想修復(fù)有兩種辦法：

  1. 添加append-to-body，將dialog插入到body上
  2. 不插入到body，根據(jù)el-popup-parent--hidden將有滾動條的子div設(shè)置overflow:hidden。

對于不是dialog，普通的彈窗，可以使用另一種思路： 監(jiān)聽鼠標滾動事件，使用Node.contains函數(shù)，判斷鼠標是否在dialog范圍內(nèi)滾動，如果是，且到了底部，禁止其默認行為

append-to-body屬性： Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必須指定該屬性并賦值為 true

參考：element dialog(opens new window)

#Element表格IE下由于滾動條原因?qū)е洛e位問題

Element 表頭固定，表內(nèi)容可滑動，在IE下滾動條會顯示，有一定的寬度占位，導(dǎo)致表頭與表內(nèi)容由點錯位，解決方法是：由于表單內(nèi)容是從接口加載的，從接口加載完數(shù)據(jù)后，對el-talbe進行從新布局dolayout

// Table Methods: doLayout
// 對 Table 進行重新布局。當 Table 或其祖先元素由隱藏切換為顯示時，可能需要調(diào)用此方法
// <el-table ref="table"></el-table>

// 從接口獲取數(shù)據(jù)成功后
this.$nextTick(() => {
  this.$refs['table'].doLayout()
})

參考：Table 表格組件 | Element(opens new window)

#如果組件的隱藏顯示切換導(dǎo)致布局異常，可以將透明度設(shè)置為0來隱藏

注意：將元素的透明度設(shè)置為0，如果元素內(nèi)部可點擊或者遮擋了下面層級的點擊按鈕，可以根據(jù)布局進行調(diào)整，比如調(diào)整z-index或使用margin等將元素移動到其他位置。

element {
  opacity: 0; /* 設(shè)置透明度為0 */
}

#2020/01/03 周五

#初始化一個ts項目

# 初始化一個yarn
yarn init

# 新增 ts-node 與 typescript模塊
yarn add ts-node --dev
yarn add typescript --dev

# 運行index.ts
yarn ts-node index.ts  # 控制臺打印 hello ts-weather

# index.ts 內(nèi)容 console.log('hello ts-weather')

#2020/01/02 周四

#TypeScript基礎(chǔ)

最近把TypeScript基礎(chǔ)初略的過了一遍，筆記：https://www.yuque.com/guoqzuo/tepur0/zb0x9b

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容