? 這五個輪子其實是5個純js實現的外掛, 都非常優秀, 下面一一給大家揭祕.
async-validator(資料驗證工具)
預設整合了url和email驗證, 支援非同步驗證. element-ui和iview的表單元件都是用他實現的驗證功能.
import schema from 'async-validator';
// 監視物件'name'欄位的值是否等於muji, 且必須存在
var descriptor = {
name: {
type: "string",
required: true,
validator: (rule, value) => value === 'muji',
}
};
var validator = new schema(descriptor);
validator.validate({name: "muji"}, (errors, fields) => {
if(errors) {
return handleErrors(errors, fields);
}
});
複製程式碼
補充: 看了作者的github, 作者應該是阿里的員工, 而且也是ant design的程式碼維護者.
moment | day.js(操作時間)
ant design在DatePicker元件中用了moment.
moment由於歷史相容原因體積比較大, 現在建議大家用day.js代替他, 兩者語法相似.
dayjs('2018-08-08') // 解析字串
dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 格式化日期
dayjs().add(1, 'year') // 當前年份增加一年
dayjs().isBefore(dayjs()) // 比較
複製程式碼
popover(氣泡對話方塊)
element-ui和iview的tooltip和popover元件都是基於vue-popover實現的, 而vue-popover只是對popper做了一層vue的封裝, 所以氣泡對話方塊的核心是popper.
<div class="my-button">按鈕</div>
<div class="my-popper">氣泡選單</div>
複製程式碼
var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var popperInstance = new Popper(reference, popper, {
// 更多設定
});
複製程式碼
autosize(讓textarea隨著文字換行而變化高度)
vux的textarea用autosize讓textarea元件隨著輸入文字換行而變化高度.
// 就一行, 就實現了"textarea隨著輸入文字換行而變化高度"
autosize(document.querySelector('textarea'));
複製程式碼
resize-observer-polyfill(Resize Observer API的相容補丁)
基本所有的ui元件庫都在用, 讓低版本瀏覽器也支援Resize Observer API, 這樣我們可以放心的監視元素的尺寸變化.
import ResizeObserver from 'resize-observer-polyfill';
const ro = new ResizeObserver((entries, observer) => {
for (const entry of entries) {
const {left, top, width, height} = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element's size: ${ width }px x ${ height }px`);
console.log(`Element's paddings: ${ top }px ; ${ left }px`);
}
});
ro.observe(document.body);
複製程式碼
最後
學習了很多元件庫的原始碼, 基於對寫程式碼的熱情, 我用ts寫了2個小外掛, 抽象了一些元件中重複的程式碼, 大家看下是否需要.
any-touch
?一個手勢庫, 支援tap(點選) / press(按) / pan(拖拽) / swipe(劃) / pinch(捏合) / rotate(旋轉) 6大類手勢, 同時支援滑鼠和觸屏.
import AnyTouch from "any-touch";
const el = doucument.getElementById("box");
const at = new AnyTouch(el);
at.on("pan", ev => {
// 拖拽觸發.
});
複製程式碼
tap(點選)
用來解決移動端"click的300ms延遲問題", 同時通過設定支援"雙擊"事件.
press(按)
用來觸發自定義選單.
pan(拖拽)
這應該是元件庫中最常用的手勢, carousel(輪播) / drawer(抽屜) / scroll(滑動) / tabs(標籤頁)等都需要"拖拽識別"
swipe(滑)
carousel/tabs的切換下一幅, scroll的快速滑動等.
pinch(捏合) / rotate(旋轉)
pinch用來縮放商品圖片, rotate一般用在高階定製化功能呢, 比如對圖片(商品)刻字後旋轉文字.
? 更多說明: https://github.com/any86/any-touch
vue-create-root
? 不到1kb的小工具, 把vue元件變成this.$xxx這樣的命令.
// main.js
Vue.use(createRoot);
// xxx.vue
import UCom from '../UCom.vue';
{
mounted(){
// 預設元件被插入到<body>尾部
this.$createRoot(UCom, {props: {value:'hello vue!'}});
// 或者簡寫為:
this.$createRoot(UCom, {value:'hello vue!'});
}
}
複製程式碼
? 更多說明: https://github.com/any86/vue-create-root
微信群
感謝大家的閱讀, 如有疑問可以加我微信, 我拉你進入微信群(由於騰訊對微信群的100人限制, 超過100人後必須由我拉進去)