點擊上方“前端公蝦米”關注最新前端資訊

來源: 鐵皮飯盒https://juejin.im/post/5d89cd156fb9a06acb3ee19e

? 這五個輪子其實是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);

}

});

https://github.com/yiminghe/async-validator

補充: 看了作者的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.

class="my-button">按鈕

class="my-popper">氣泡菜單

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(){

// 默認組件被插入到尾部

this.$createRoot(UCom, {props: {value:'hello vue!'}});

// 或者簡寫為:

this.$createRoot(UCom, {value:'hello vue!'});

}

}

? 更多說明: https://github.com/any86/vue-create-root

總結

以上是生活随笔為你收集整理的vue + element 顶部二级菜单_揭秘vue/react组件库中5个quot;作者不造的轮子quot;的全部內容，希望文章能夠幫你解決所遇到的問題。

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