前端個人筆記
- 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指令(橫向拖拽滾動)