如何基于 React 封装一个组件

如何基于 React 封装一个组件前言很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary ,那么这个组件的字体颜色会变为 primary 对应的颜色,这是如何做到的?还有别人封装的组件类名都有自己独特的前缀,这是如何处理的呢,难道是 css 类名全部加上前缀吗,这也太麻烦了! 如果你正在困惑这些问题,你可以看看这篇文章. 我会参照 antd的divider组件来讲述如何基于React封装…

基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。

react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地图 SDK(通过创建 Script 标签的形式加载),包括第三方 SDK. 使用 Typescript 编写,集成高德地图 SDK @type 声明文件(包括中文注释). ⚛️ 支持 React Hook 新增特性(需要 React 16.8+). 不依赖任何第三方组件. 安装不依赖 uiw 组件…

基于 React 实现一个 Transition 过渡动画组件

过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的动画效果,也就是通过添加或移除某个 class 样式.因此需要给 Transition 组件添加一个 toggleClass 属性,标识要切换的 class 样式,再添加一个 action 属性实现样式切换,action 为 true 时添加 toggleClass 到动画元素上,action 为…

基于 element-plus 封装一个依赖 json 动态渲染的查询控件

前情回顾基于 el-form 封装一个依赖 json 动态渲染的表单控件 Vue3 封装第三方组件(一)做一个合格的传声筒功能使用 vue3 + element-plus 封装了一个查询控件,专为管理后台量身打造,支持各种查询需求: 多种查询方式快捷查询更多查询自定义查询支持防抖清空每个查询条件依赖 json 动态创建有些控件自带清空功能,有些没有自带清空功能,那么就需求我们手动加上清空的功能. 技术栈 Vite2 Vue3 element-plus 查询控件设计 [自我感觉…

Vue.use源码分析（转）+如何封装一个组件

封装一个组件:https://www.jianshu.com/p/89a05706917a 我想有过vue开发经验的,对于vue.use并不陌生.当使用vue-resource或vue-router等全局组件时,必须通过Vue.use方法引入,才起作用.那么vue.use在组件引入之前到底做了那些事情呢?让我们一窥究竟. 先上vue.use源码 Vue.use = function (plugin) { /* istanbul ignore if */ if (plugin.installed)…

基于iview 封装一个vue 表格分页组件

iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天系统框架,十分方便. 下面我们就简单封装一个分页插件首先引用iview的分页 <Page :total="total" :page-size="pageSize" :page-size-opts="[10]" show-sizer show-…

基于better-scroll封装一个上拉加载下拉刷新组件

1.起因上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很多灵活的api供我们开发各种实用的组件,文档地址(https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll),本次主要用到它提供的pullDownRefresh 和 pullUpLoad api 开启上拉加载和下拉刷…

基于react hooks,zarm组件库配置开发h5表单页面

最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方式显示 , 所以一开始就考虑封装一个配置化的页面生成方案,目前已经有多个项目基于此方式配置开发上线,思路和实现分享一下. 已经发布npm包有兴趣的可以采用或适配自己的组件库 zarm-form-render ,不到100行代码. 使用场景任意包含表单的h5页面(使用zarm库,或自行适配自己的库…

基于highcharts封装的组件－demo&源码

前段时间做的项目中需要用到highcharts绘制各种图表,其实绘制图表本身代码很简单,但是由于需求很多,有大量的图形需要绘制,所以就不得不复制粘贴大量重复(默认配置等等)的代码,所以,后来抽空自己基于highcharts封装了一个插件.组件暴露一个Hxt的全局对象,它有以下一些方法来绘制不同类的图形,从此以后,画图只需简简单单的几行配置就ok了!赶紧点进来看看实例吧! Hxt.line(elem, data, options); //渲染默认折线图 Hxt.spline(elem, data,…

基于 el-form 封装一个依赖 json 动态渲染的表单控件

nf-form 表单控件的功能基于 el-form 封装了一个表单控件,包括表单的子控件. 既然要封装,那么就要完善一些,把能想到的功能都要实现出来,不想留遗憾. 毕竟UI库提供的功能都很强大了,不能浪费了对吧. 依赖 json 动态创建表单可以多行多列可以调整布局可以自定义子控件(插槽和动态组件) 可以扩展表单子控件数据验证数据联动组件联动依据 json 自动创建 model 功能演示介绍代码之前先看看效果. 单列表单这个比较基础,直接贴图. 多列表单有时候需要双列或者三…

基于 IntersectionObserver 实现一个组件的曝光监控

我们在产品推广过程中,经常需要判断用户是否对某个模块感兴趣.那么就需要获取该模块的曝光量和用户对该模块的点击量,若点击量/曝光量越高,说明该模块越有吸引力. 那么如何知道模块对用户是否曝光了呢?之前我们是监听页面的滚动事件,然后通过getBoundingClientRect()现在我们直接使用IntersectionObserver就行了,使用起来简单方便,而且性能上也比监听滚动事件要好很多. 1. IntersectionObserver 我们先来简单了解下这个 api 的使用方法. Inte…

基于Vue封装分页组件

使用Vue做双向绑定的时候,可能经常会用到分页功能接下来我们来封装一个分页组件先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-sel…

基于jQuery封装一个瀑布流插件

/*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化调用这个方法的时候的那个jquery选着到的dom对象 this*/ /*$this 拿到的瀑布流容器中有需要需要去做定位的盒子*/ var $this = $(this); /*拿到容器的宽度*/ var parentWidth = $this.width(); /*瀑布流容器当中的item*/ var items = $this.children(); /*…

基于antd封装一个高可用form组件减少cv代码导致的bug

引言在开发中台过程中我们的原型中有很多表单,antd有表单组件,但是粒度比较细,就单纯组件而言,无可厚非,但是在开发过程中,可能会造成代码不够聚合,有些表单公共逻辑无法提取,copy paste比较多,所以可以加以封装,搞一个兼容性和扩展性都契合项目本身的组件. 主要思路我简单查阅了一番资料,参考了一下别人的封装方式,决定以Col和FormItem作为基本单元,进行表单的搭建,主要原因可以将FormItem的信息和Col的信息以对象方式传入,这样我们可以更加专注于组件的包含的信息减少C…

基于element-ui封装一个Table模板组件

大家在做后台管理系统的时候,写的最多的可能就是表格页面了,一般分三部分:搜索功能区.表格内容区和分页器区.一般这些功能都是使用第三方组件库实现,比如说element-ui,或者vuetify.这两个组件库都各有各的优点,但就table组件来说,我还是比较喜欢vuetify的实现,不用手写一个个column,只要传入headers的配置数组就行,甚至分页器都内置在了table组件里,用起来十分方便.有兴趣可以看看:vuetify data table. 上面是一个经典的用element-ui开发的…

使用react封装评论组件

首先看我的效果图我在评论框中输入数据,会在页面进行显示这个效果图我们进行拆分就是,一个评论组件,一个大的评论列表组件,一个小的评论组件首先整个页面中有的是我们的评论组件和列表组件我们输入评论点击的时候会将评论放入一个数组中,最后存到状态机里面.通过this.state.comments我们的评论列表中取到输入的评论在我们的评论组件中,我们需要取到textarea中的值,从state中取到数据,最后通过事件将输入值传给父组件. 在我们的评论列表中,会通过遍历每一个小的评论组件展示数据…

React Native 一个组件styles BUG

'use strict'; var React = require('react-native'); var { StyleSheet, PanResponder, View, Text } = React; var CIRCLE_SIZE = 40; var PanResponderExample = React.createClass({ componentWillMount: function() { this._panResponder = PanResponder.create({ o…

基于AFNetWorking封装一个网络请求数据的类

1.新建一个继承于NSObject类的类,在.h文件中 #import "AFHTTPRequestOperationManager.h" //定义两个block来接收请求成功和失败 typedef void(^DownLoadFinishedBlock)(id responseObj); typedef void (^DownLoadFialedBlock)(NSError*error); @interface NetManager : NSObject //Get请求的方法封装…

使用CRA开发的基于React的UI组件发布到内网NPM上去

前言:构建的ES组件使用CNPM发布内网上过程 1. 使用Create-React-APP开的组件如果直接上传到NPM,你引用的时候会报: You may need an appropriate loader to handle this file type. 如果你直接复制到你的项目里比如Src下是可以的. 这个原因是webpack设置了默认对node_modules文件夹中不进行babel转码,有助于提升打包效率. 因此我选择将该组件先转化为ES5语法,然后发布到 NPM 社区. 你也可…

基于 muse-ui 封装一个微信公众号上传插件实现多图上传

Vue.component('my-wx-upload', { template: ` <mu-grid-list :cols="3" :cellHeight="90"> <mu-grid-tile titleBarClass v-for="img, index in readyUploadImages" :key="index"> <img :src="img" @click…

基于react的audio组件

样式请自己定义哦~需要其他功能请自行添加! // 组件调用 <Audio src={src地址} id={srcID}/> audio属性 src 歌曲的路径 preload 是否在页面加载后立即加载(设置autoplay后无效) controls 显示audio自带的播放控件 loop 音频循环 autoplay 音频加载后自动播放 currentTime 音频当前播放时间 duration 音频总长度 ended 音频是否结束 muted 音频静音为true volume 当前音频音量 r…

asp.net core封装layui组件示例分享

用什么封装?自然是TagHelper啊,是啥?自己瞅文档去在学习使用TagHelper的时候,最希望的就是能有个Demo能够让自己作为参考怎么去封装一个组件? 不同的情况怎么去实现? 有没有更好更高效的方法? 找啊找啊找,最后跑去看了看mvc中的TagHelpers,再好好瞅了瞅TagHelper的文档勉强折腾了几个组件出来,本来想一个组件一个组件写文章的,但是发现国庆已经结束了~ Demo效果预览代码仅供参考,有不同的意见也忘不吝赐教 Checkbox复选框组件封装标签名称:cl-c…

react：在一个组件中调用别的组件中的方法

先介绍一下要解决的问题:react中一个组件A和一个组件B,其中B是被connect(connect是redux中的方法)包装过的组件,包装成BContainer,A和BContainer的关系是兄弟关系,在同一个父元素下渲染.现在我们要在点击A的时候调用B中的方法解决思路:主要是用到ref获取BContainer组件挂载之后的实例 render(){ var b = null return(<BContainer ref={(node) => b = node}/>) } ref中的…

RSuite 一个基于 React.js 的 Web 组件库

RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我们的目标就是让 WEB 开发更快捷,同时具有一定的灵活性和扩展性. 一个简单的例子: 通过 npm 安装 npm install rsuite CSS: 我们提供一些主题, 载入对应的 CSS 资源到你的页面中,同时你也可以直接引用 Bootstrap 的 CSS . Javascript: 比如在…

Go/Python/Erlang编程语言对比分析及示例基于RabbitMQ.Client组件实现RabbitMQ可复用的 ConnectionPool（连接池）封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil 分享基于MemoryCache（内存缓存）的缓存工具类，C# B/S 、C/S项目均可以使用！

Go/Python/Erlang编程语言对比分析及示例本文主要是介绍Go,从语言对比分析的角度切入.之所以选择与Python.Erlang对比,是因为做为高级语言,它们语言特性上有较大的相似性,不过最主要的原因是这几个我比较熟悉. Go的很多语言特性借鉴与它的三个祖先:C,Pascal和CSP.Go的语法.数据类型.控制流等继承于C,Go的包.面对对象等思想来源于Pascal分支,而Go最大的语言特色,基于管道通信的协程并发模型,则借鉴于CSP分支. Go/Python/Erlang语言特…