vue + element 顶部二级菜单_揭秘vue/react组件库中5个quot;作者不造的轮子quot;
来源: 铁皮饭盒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;相关推荐
- vue鼠标右键自定义菜单_使用Vue自定义指令实现右键菜单
前言 浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就想着能不能像vue的内置指 ...
- element ui 二级菜单_基于avue和element-ui集成解决方案avue-cli
avue-cli是一款基于avue和element-ui完全开源.免费的企业后端产品前端集成解决方案,采用最新的前端技术栈,已经准备好了大部分的项目准备工作,你可以快速进行二次开发 功能 全局错误日志 ...
- 三星二级菜单_你知道三星 Galaxy 手机中的这个隐藏菜单吗?
几十年来,隐藏的代码段一直是计算机软件系统的一部分,也被称为复活节彩蛋,当一组特定的命令(一般是未公开的)被执行之后就会出现.例如,在安卓系统中如果多次点击设备的固件版本号就会出现一个隐藏的界面.今天 ...
- vue中在当前组件中定义的全局变量怎么在methods中使用_Vue原理解析(十):搞懂事件API原理及在组件库中的妙用...
在vue内部初始化时会为每个组件实例挂载一个this._events私有的空对象属性: vm._events = Object.create(null) // 没有__proto__属性 这个里面存放 ...
- 标题Ant Design of Vue 组件库中Modal“确认“按钮和“取消“按钮成英文状态
标题Ant Design of Vue 组件库中Modal"确认"按钮和"取消"按钮成英文状态 因为是国际化的原因,造成确定按钮和取消按钮变成英文,需要设置 o ...
- mathcal 对应于什么库_如何快速构建React组件库
前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...
- 【学习日记2023.4.25】之 前后端分离_前端工程化_Vue组件库Element_Vue路由_打包部署
文章目录 1. 前后台分离开发 1.1 前后台分离开发介绍 1.2 YAPI 1.2.1 YAPI介绍 1.2.2 接口文档管理 2. 前端工程化 2.1 前端工程化介绍 2.2 前端工程化入门 2. ...
- react打包后图片丢失_如何快速构建React组件库
俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险〜 目前团队内已经有较为成熟的 Vue 技术栈的 ...
- ionic 修改组件默认样式_开源Magpie:组件库详解
开源项目专题系列(八)1.开源项目名称:magpie_fly2.github地址: https://github.com/wuba/magpie_fly 3.简介:magpie_fly 是58集体出品 ...
最新文章
- 7-7 宇宙无敌大招呼 (C语言)
- java flexpaper_java web word文件 pdf文件在线预览源码(flexpaper)
- mysql查询为0的值_MySql查询整型字段空字符时出现为0的数据
- 【持续..】WEB前端面试知识梳理 - CSS部分
- 御术:比能力更重要的是你的底层操作系统
- 东北电力大学计算机网络复试题,2020年东北电力大学计算机学院复试(20200901201159).pdf...
- 字节跳动确认入局车联网:满足车载场景的用户体验
- python数据包发送给云平台_用python发送短消息(基于阿里云平台)
- js获取窗口宽度高度
- 来了!Python 官方发布整套中文PDF文档(共27本)
- Kvaser—灵活多变的CAN总线接口方案
- python攻击局域网电脑_局域网攻击
- 【POJ 3580】 SuperMemo
- Java poi ppt图片置于底层_POI之PPT图片插入简单实例
- 应用型人才的培养之随笔
- 涨知识了,原来微信可以一键找到对方位置
- 【已解决】机械革命s1-01触控手势失效解决方案
- 阿里巴巴矢量图库批量下载的方法
- 清华计算机系19级研究生状元,2019年各省市高考状元去向统计,清华姚班受青睐,多达五人考入...
- 终于有人把区块链讲明白了