前端小跑堂-优快云博客

原创 uniapp H5 使用mui-player插件播放hls格式监控视频流

uniapp H5环境使用mui-player视频播放器，视频流hls格式，自定义控件、返回事件、视频加载、视频播放错误等事件监听

2024-04-19 11:05:53 1808 2

原创 antd - Checkbox多选（Tab) 类型样式

Tab多选样式解决方式<Form.Item name="detectionIds" label="XXXX" rules={[{ required: true, message: '请选择XXXX' }]}> <Checkbox.Group onChange={(ids) => categoryChange(ids)} className={styles.specimenCheckbox}> {(detectionData || []).map((item:

2021-11-03 16:14:25 1165 1

原创 JS 时间工具类

获取时区export function getOffset = () => { const offset = (new Date()).getTimezoneOffset() / 60; if (offset < 0) { return Math.abs(offset); } return -offset; }验证日期是否是今天export function isToday(str) { const today = new Date()

2021-11-03 16:04:09 488

原创 JS 常用正则集

验证数字：^[0-9]*$至少八个字符，至少一个大写字母，一个小写字母，一个数字和一个特殊字符：^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$至少八个字符，至少一个大写字母，一个小写字母，一个数字和一个特殊字符（除去数字和字母外的特殊符号）：/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{8,}$/数字+字母，数字+特殊字符，

2021-11-03 15:50:47 357

原创 circleci 自动部署： error:0308010C:digital envelope routines::unsupported

**问题自动部署打包因为每次打包node自动更新最新版本，这次因为最新版为17.01而导致解决方案看了官方没有看太明白，所以采取了降低版本号更改配置文件如下

2021-11-03 15:34:14 7634

原创 js 字符串拼接

js 字符串拼接var baseUrl = 'www.baidu.com'var a = 1, b = 'request', c = truevar url = baseUrl + '?a=' + a + '&b=' + b + '&c=' + c新型拼接const url = `${baseUrl}?a=${a}&b=${b}&c=${c}`

2021-04-06 14:32:21 189

原创 vue或react用原生引用js插件

在vue或react用原生引用js插件在vue中放到mounted里面, 在react中放到componentDidMount() const s = document.createElement('script'); s.type = 'text/javascript'; s.src = 'https://cdnjs.cloudflare.com/2.3.1/jspdf.umd.min.js'; // 示例 document.body.appendChild(s);

2021-04-06 14:19:00 430

原创根据时间排序

根据时间排序const rows = [ { "name": "张三", "time": "2018/4/1 0:00:00", },{ "name": "李四", "time": "2019/6/6 12:30:00", },{ "name": "王五", "time": "2020/10/1 22:10:00", },{ "name": "赵六",

2021-04-06 14:10:55 738

原创 react img加载失败触发onError

react img加载失败触发onError<img alt={head} className={styles.item_image_vatar} src="getHead.png" onError={(e) => { e.target.src = "default.png" }}/>

2021-04-06 14:02:00 1616

原创 tinymce-react富文本编辑器

tinymce-react富文本编辑器TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。下载依赖npm install --save @tinymce/tinymce-react官网例子：代码：init({ selector: '#tiny-ui .editor', toolbar: 'bold italic underlin

2021-03-18 17:25:06 656 1

原创 AntV 折线图

AntV 折线图Step 1npm install @antv/g2Step 2创建折线图容器<div id='lineChart' />Step 3渲染效果源码： const data: any = [ {date: "01/01/2021", num: 12}, {date: "01/10/2021", num: 3}, {date: "01/20/2021", num: 4}, {date: "01/28/2021", num: 5}, {da

2021-02-22 16:25:55 1466

原创 AntV 柱状图

AntV 柱状图图表Step 1npm install @antv/g2Step 2创建柱状图容器<div id="bar" />代码截图：代码生成效果源码：useEffect(() => { // 创建 Chart 对象 const chart = new Chart({ container: 'bar', // 指定图表容器 ID autoFit: true, // 指定图表宽度 height: 300, /

2021-02-22 15:48:06 798

前端小跑堂的博客