![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js常用组件
文章平均质量分 75
使用js/css创建的常用组件,不依赖第三方库,复制粘贴即可使用
a小monkey
一枚前后端小白~向各位大佬学习
展开
-
js分页组件Pagination
js分页组件Pagination文章目录js分页组件Pagination1. 使用配置2. 使用实例3. js源码4. css样式仿造element-ui使用纯js制作的分页组件,不依赖其他库,可复制粘贴使用,源码仓库地址1. 使用配置interface PaginationConfig { // 父容器元素或者选择器 pNode: String | HTMLElement, // 页数 pageSize: Number, // 当前页 pageNum: Number,原创 2021-06-15 15:10:53 · 2250 阅读 · 1 评论 -
js导航组件Navigation
js导航组件Navigation文章目录js导航组件Navigation1. 使用配置2. 使用实例3. js源码4. css源码使用纯js+css写的导航组件,不依赖其他第三方插件,可直接复制粘贴使用1. 使用配置pNode: 'body'// 数据源navList: []// 目前只支持horizonmode: 'horizon'// 高度height: 60// 背景bgColor: 'rgb(84, 92, 100)'textColor: '#FFF'activeTe原创 2021-06-11 23:45:40 · 1293 阅读 · 0 评论 -
js 轮播图(使用class实现)
js 轮播图(使用class实现)纯属无聊,还花了一晚上时间o(╥﹏╥)o1. js部分的代码/** * 判断对象是否为DOM元素 * @param {Object} obj * @returns */const isDOM = (obj) => (typeof HTMLElement === 'object') ? obj instanceof HTMLElement : obj && typeof obj === 'object' &&原创 2021-05-21 00:51:36 · 461 阅读 · 0 评论 -
纯js消息弹窗组件Message
js消息弹窗组件文章目录js消息弹窗组件1. js部分代码2.使用方法3.演示效果写组件上瘾,今天写一个纯js消息弹窗组件,复制即可使用,css也写在了js之中,用js生成,代码若是存在不足的地方可以探讨一些,本人也是前端新人┭┮﹏┭┮1. js部分代码(function(win) { const createDom = (className = '', tag = 'div') => { const ele = document.createElement(tag原创 2021-05-22 20:21:54 · 1904 阅读 · 2 评论 -
纯js弹窗Dialog组件
纯js弹窗Dialog组件文章目录纯js弹窗Dialog组件1. js部分2. css样式3. 简单使用4. 效果展示1. js部分/* eslint-disable */const { isTmplValid, createDom, getDom, createSingleDom, cssFromObj, addNode, isDOM} = require('./Common')/** * 根据模板床建 * @param title */function原创 2021-05-31 12:52:25 · 3897 阅读 · 3 评论 -
js实现进度条组件(Progress)
js实现进度条组件(Progress)1. 使用方式配置参数pNode: '' // 进度条放置容器 可以是选择器,也可以直接传入dom对象width: '100%' // 进度条宽度 百分比为相对于父容器的宽度height: 10 // 进度条的高度min: 0 // 最小值max: 100 // 最大值value: 50 // 当前值radius: '4px' // 边框圆角 若为空值则默认50%// 颜色color: '#9d9dda' // track颜色barColo原创 2021-06-02 19:36:43 · 3046 阅读 · 0 评论 -
js树形选择组件Tree
js树形组件Tree文章目录js树形组件Tree1. 使用方式2. js代码css样式1. 使用方式配置信息// 容器位置pNode: 'body'// 每一个title的paddingtitlePadding: 18// 数据源/*[ { label: '', children:[ { label: '', children: [] } }原创 2021-06-05 20:43:06 · 2161 阅读 · 1 评论