vue/react组件库中🤚5个"作者不造的轮子"

共 2959字,需浏览 6分钟

 ·

2020-08-31 09:18


来源: 铁皮饭盒https://juejin.im/post/5d89cd156fb9a06acb3ee19e

? 这五个轮子其实是5个纯js实现的插件, 都非常优秀, 下面一一给大家揭秘.

async-validator(数据验证工具)

默认集成了urlemail验证, 支持异步验证. element-ui和iview的表单组件都是用他实现的验证功能.

  1. import schema from 'async-validator';

  2. // 监视对象'name'字段的值是否等于muji, 且必须存在

  3. var descriptor = {

  4. name: {

  5. type: "string",

  6. required: true,

  7. validator: (rule, value) => value === 'muji',

  8. }

  9. };

  10. var validator = new schema(descriptor);

  11. validator.validate({name: "muji"}, (errors, fields) => {

  12. if(errors) {

  13. return handleErrors(errors, fields);

  14. }

  15. });

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

补充: 看了作者的github, 作者应该是阿里的员工, 而且也是ant design的代码维护者.

moment | day.js(操作时间)

ant design在DatePicker组件中用了moment.

moment由于历史兼容原因体积比较大, 现在建议大家用day.js代替他, 两者语法相似.

  1. dayjs('2018-08-08') // 解析字符串


  2. dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 格式化日期


  3. dayjs().add(1, 'year') // 当前年份增加一年


  4. dayjs().isBefore(dayjs()) // 比较

popover(气泡对话框)

element-ui和iview的tooltip和popover组件都是基于vue-popover实现的, 而vue-popover只是对popper做了一层vue的封装, 所以气泡对话框的核心是popper.

  1. class="my-button">按钮

  • class="my-popper">气泡菜单

    1. var reference = document.querySelector('.my-button');

    2. var popper = document.querySelector('.my-popper');

    3. var popperInstance = new Popper(reference, popper, {

    4. // 更多设置

    5. });

    autosize(让textarea随着文字换行而变化高度)

    vux的textarea用autosize让textarea组件随着输入文字换行而变化高度.

    1. // 就一行, 就实现了"textarea随着输入文字换行而变化高度"

    2. autosize(document.querySelector('textarea'));

    resize-observer-polyfill(Resize Observer API的兼容补丁)

    基本所有的ui组件库都在用, 让低版本浏览器也支持Resize Observer API, 这样我们可以放心的监视元素的尺寸变化.

    1. import ResizeObserver from 'resize-observer-polyfill';

    2. const ro = new ResizeObserver((entries, observer) => {

    3. for (const entry of entries) {

    4. const {left, top, width, height} = entry.contentRect;

    5. console.log('Element:', entry.target);

    6. console.log(`Element's size: ${ width }px x ${ height }px`);

    7. console.log(`Element's paddings: ${ top }px ; ${ left }px`);

    8. }

    9. });

    10. ro.observe(document.body);

    最后

    学习了很多组件库的源码, 基于对写代码的热情, 我用ts写了2个小插件, 抽象了一些组件中重复的代码, 大家看下是否需要.

    any-touch

    ?一个手势库, 支持tap(点击) / press(按) / pan(拖拽) / swipe(划) / pinch(捏合) / rotate(旋转) 6大类手势, 同时支持鼠标和触屏.

    在线演示

    1. import AnyTouch from "any-touch";

    2. const el = doucument.getElementById("box");

    3. const at = new AnyTouch(el);


    4. at.on("pan", ev => {

    5. // 拖拽触发.

    6. });

    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这样的命令.

    1. // main.js

    2. Vue.use(createRoot);


    3. // xxx.vue

    4. import UCom from '../UCom.vue';

    5. {

    6. mounted(){

    7. // 默认组件被插入到尾部

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

    9. // 或者简写为:

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

    11. }

    12. }

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

    扫码关注公众号,订阅更多精彩内容。


    给个[在看],是对达达最大的支持!
    浏览 36
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    分享
    举报
    评论
    图片
    表情
    推荐
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    分享
    举报