前端個人筆記

• 1.vue項目安裝依賴/插件時忘記--save，再次install出問題并且沒有報錯。
• 2.margin移動元素不顯示背景色
• 3.新知識：@media 條件樣式
• 4.入坑：row和col不能分離，span=24不能不寫
• 5.聚焦實現滾動到指定元素

1.vue項目安裝依賴/插件時忘記–save，再次install出問題并且沒有報錯。

安裝新依賴/插件時忘記–save，下次install的時候有可能會報錯（XX not found），按照錯誤信息重新安裝依賴即可；如果沒有報錯就麻煩了，比如樣式問題，怎么才能知道之前安裝過什么依賴？
目前我的一個辦法是把以前的node_modules粘過去，運行時就會報錯誤信息，按照提示安裝即可。若之前的node_modules無了，就不知道了。

2.margin移動元素不顯示背景色

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

3.新知識：@media 條件樣式

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

// 注意從小到大寫@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不能不寫

一開始都是可以的，到后面重新下載依賴后就出現了這兩個問題。

5.聚焦實現滾動到指定元素

給元素添加 draggable=true 屬性 以實現可拖拽。
outline: none 除去聚焦后的框。 對于默認沒有聚焦的元素需要主動添加屬性：tabindex=“222” 需唯一。
添加父元素：

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

也可使用scrollTo 實現滾動到指定元素，效果比focus好
wrapper.scrollTo(0,document.getElementById(‘xxx’).offsetTop); （豎向）
wrapper.scrollTo(document.getElementById(‘xxx’).offsetLeft,0); （橫向）

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

總結

以上是生活随笔為你收集整理的前端个人笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。