前端個(gè)人筆記

• 1.vue項(xiàng)目安裝依賴(lài)/插件時(shí)忘記--save，再次install出問(wèn)題并且沒(méi)有報(bào)錯(cuò)。
• 2.margin移動(dòng)元素不顯示背景色
• 3.新知識(shí)：@media 條件樣式
• 4.入坑：row和col不能分離，span=24不能不寫(xiě)
• 5.聚焦實(shí)現(xiàn)滾動(dòng)到指定元素

1.vue項(xiàng)目安裝依賴(lài)/插件時(shí)忘記–save，再次install出問(wèn)題并且沒(méi)有報(bào)錯(cuò)。

安裝新依賴(lài)/插件時(shí)忘記–save，下次install的時(shí)候有可能會(huì)報(bào)錯(cuò)（XX not found），按照錯(cuò)誤信息重新安裝依賴(lài)即可；如果沒(méi)有報(bào)錯(cuò)就麻煩了，比如樣式問(wèn)題，怎么才能知道之前安裝過(guò)什么依賴(lài)？
目前我的一個(gè)辦法是把以前的node_modules粘過(guò)去，運(yùn)行時(shí)就會(huì)報(bào)錯(cuò)誤信息，按照提示安裝即可。若之前的node_modules無(wú)了，就不知道了。

2.margin移動(dòng)元素不顯示背景色

由于被relative元素遮擋，需要把被遮擋元素設(shè)置position:relative;

3.新知識(shí)：@media 條件樣式

按照不同條件使用不同css樣式。

// 注意從小到大寫(xiě)@media (min-width: 1200px) {.integration-body {width: @integration-1200px-body-width;}}@media (min-width: 1600px) {.integration-body {width: @integration-1600px-body-width;}}

4.入坑：row和col不能分離，span=24不能不寫(xiě)

一開(kāi)始都是可以的，到后面重新下載依賴(lài)后就出現(xiàn)了這兩個(gè)問(wèn)題。

5.聚焦實(shí)現(xiàn)滾動(dòng)到指定元素

給元素添加 draggable=true 屬性 以實(shí)現(xiàn)可拖拽。
outline: none 除去聚焦后的框。 對(duì)于默認(rèn)沒(méi)有聚焦的元素需要主動(dòng)添加屬性：tabindex=“222” 需唯一。
添加父元素：

var child = document.getElementById("child");// 獲取子元素 var parent = document.createElement('parent');// 新建父元素 parent.className = 'parent'; child.parentNode.replaceChild(parent,child);// 獲取子元素原來(lái)的父元素并將新父元素代替子元素 parent.appendChild(child);// 在新父元素下添加原來(lái)的子元素

也可使用scrollTo 實(shí)現(xiàn)滾動(dòng)到指定元素，效果比f(wàn)ocus好
wrapper.scrollTo(0,document.getElementById(‘xxx’).offsetTop); （豎向）
wrapper.scrollTo(document.getElementById(‘xxx’).offsetLeft,0); （橫向）

以下是封裝的v-frag指令供參考
自定義v-drag指令（橫向拖拽滾動(dòng)）

總結(jié)

以上是生活随笔為你收集整理的前端个人笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。