記錄讀element原始碼收貨=＞持續更新
阿新 • • 發佈：2020-12-29
技術標籤：javascriptvue.jses6
button
按鈕感覺沒什麼好說的，就是接受引數 加類名 改改樣式就行
css
- box-sizing : border-box / content-box
border-box： 元素的高 包括padding 和 border
content-box: 元素本身的高 - with-space:nowarp : 如何處理元素的空白 nowarp表示會合並 不會換行
- cursor:pointer / not-allowed 小手 和 禁用
- outline:none 當滑鼠點選 或者 獲取焦點的時候 這個元素會出現一個邊框 這個邊框就是outline
- .pcy-btn + .pcy-btn {margin-right：10px} 兄弟選擇符文 同級且相鄰 表示給.pcy-btn後面的所有.pcy-btn加上這個樣式
- [ class *= pcy-icon- ] + span {color:red} 表示class包含pcy-icon- 下的span新增color
- div p:not(:firsh-child){color:red} div下面的p 除了第一個p 其他的都加color
- .aaa .bbb{} 表示aaa 下面的 bbb
- .aaa.bbb{} 表示同時擁有.aaa 和 .bbb
10…aaa , .bbb{} 表示擁有.aaa 或者 .abbb
vue
$slots.default 表示出了具名插槽意外的所有內容
$slots.插槽名 也可以指定具體的插槽 元件內用來接收
//slot複習
//slot的好處:讓元件更加靈活 類似於一個介面 讓元件有更多的功能 input
vue
- $attrs : 是一個物件，包含了父元件中不作為prop被識別的attribute，可以通過v-bind="$attrs"繫結，就比如父元件中input的value，maxlength，placeholder，在子元件裡$attrs都可以獲取到
關於這些 這篇文章講的還可以，$attrs,$listerners，inheritAttrs - this.$nexttick() 接受一個回撥，該回調會延時到dom更新迴圈之後執行，這個的執行順序在updated之後的，能獲取到最新的domw
關於這些 這篇文章講的還可以，nexttick demo解釋
Vue.nextTick用於延遲執行一段程式碼，它接受2個引數（回撥函式和執行回撥函式的上下文環境），如果沒有提供回撥函式，那麼將返回promise物件。
css
- 給邊框加過度：transition：border-color .2s cubic-bezier(.645 .045 .355.1)
- 給圖示加動畫：
@keyframes rotaing{
0%{transform:routerZ(0deg)}
100%{transform:routerZ(360deg)}
}
#xxx{
animation:rotaing 2s linear infinite //動畫名 完成時間 運動曲線 迴圈次數 延時多久完成
}
- pointer.evnts：auto / none 可以禁用HTML元素的focus hover active
應用場景1.可以給tabs當前標籤+ 2.給按鈕加 防止一直點選 3.a元素擋了b元素，想出發b元素事件，但是點不到b,可以給a元素加 就可以點到b了
js
- windows.getcomputedstyle(ele元素).getpropetyvalue(“屬性”)
<style>
#elem-container{
position: absolute;
left: 100px;
top: 200px;
height: 100px;
}
</style>
<body>
<div id="elem-container">dummy</div>
<div id="output"></div>
</body>
<script>
function getTheStyle(){
let elem = document.getElementById("elem-container");
console.log(elem);
let theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
console.log(theCSSprop);//100
document.getElementById("output").innerHTML = theCSSprop;
}
getTheStyle();
</script>
- this.getInput().setSelectionRange(-1,-1); 可以從一個focus的input元素中選定特定的範圍的內容 //第一個開始位置 第二個結束位置 表示開始和結束都在最後，所以input在被選中的時候，游標會在最後
元件實現邏輯
- 清楚按鈕: 外部傳遞clearable，通過clearbale來判斷加不加pcy-input–suffix類名，通過clearshow()來控制顯示不顯示清除按鈕，clearshow必須滿足1.clearable 2.disabled不為true 3.不是隻讀 4.input的值補位空 5.focus的時候或者劃過的時候 第五點他通過@mouseenter=“hovering = true” @mouseleave=“hovering = false” 在子元件定義一個flag來控制他是否劃過input 五點都滿足才顯示
- 密碼按鈕：實現邏輯和清楚按鈕差不多，type = pass-word?（passwordvisible?‘text’:“password”）: " text" ,判斷外界傳遞過來password了嗎，傳遞了我在判斷內部屬性passwordvisible是否可見，可見text，不可見密碼，沒傳遞我text
- autosize :textarea框的高度，通過監聽value / type，每次變化都呼叫resizeTextarea，resizeTextarea這個方法，呼叫方法會返回值，將這個值賦值給元件內部的一個變數，然後將這個變數賦值給textarea元件 :style="textareaCalcStyle"的方式