web前端
897164979
一年级程序员
展开
-
react 组件内暴露方法供原生android调用
Reactimport { useEffect } from 'react';// 组件const Index = () => { // 定义方法 const testFunction = (arg) => { alert(`调用成功${arg}`); } useEffect(() => { // 在useEffect中暴露方法到window上。 // ts 中可以这样 (window as any).test = testFunction;原创 2022-02-07 11:07:01 · 1932 阅读 · 0 评论 -
js split 正则分割字符串
正则表达式 分割字符串 str.split(/[,-\s.]/) /[中间加多个分割符]/\s 为空格转义"Hello World,I-am code".split(/[,-\s.]/) // ["Hello", "World", "I", "am", "code"]"Earth-is-our home".split(/[,-\s.]/) // ["Earth", "is", "our", "home"]"This.is.a-sentence".split(/[,-\s.]/) // ["Thi原创 2021-07-23 11:12:46 · 4389 阅读 · 0 评论 -
React + ts echarts组件
import * as React from "react";import * as echarts from "echarts";/** * 参数列表 * key: string; 唯一值 * option: object | null; 图表数据 * style: { * width: string; 图表宽度 * height: string; 图表高度 * }; * className?: string; 图表CSS样式类名称 * onRender?(in原创 2021-05-10 11:10:36 · 1823 阅读 · 4 评论 -
使用React hooks完成响应式组件开发
好久没更新博客了,接触React已经有一段时间了,近期在做公司官网的开发。技术要求使用React ,响应式布局。开始准备使用css @media 来负责页面的响应布局。当开发到一定程度时发现媒体查询并不能满足所有的情况。当一个组件切换不同大小设备时只是改变宽度、边距或者排版时,媒体查询当然更好。但是当一个组件在pc上的展示模式和在移动端展示的模式完全不同时,与其使用大量的媒体查询进行display:none;不如直接切换不同的组件来的优雅。于是就想怎么在React中优雅的获取屏幕宽度,保证在动态原创 2020-09-24 18:06:21 · 794 阅读 · 1 评论 -
图片裁剪上传
html 用到的jq插件为cropper演示官网:https://fengyuanchen.github.io/cropper/<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/cro...原创 2019-10-24 16:21:19 · 258 阅读 · 0 评论 -
图片base64 转 file
function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Arra...原创 2019-10-24 16:09:22 · 167 阅读 · 0 评论 -
利用div实现input输入框
工作中遇到了需要将带有html标签的内容放进input框中显示,用户还可以进行修改,发现通过设置<input>的value属性,不能将html元素进行转义显示,比如想让他显示 22 , 但是实际显示了 2<sup>2</sup>,这显然不符合我们的要求。索性就把div伪装成一个input,这样就能通过$("#id").html(内容);的方式进行显示带有html...原创 2019-07-02 16:08:01 · 7219 阅读 · 0 评论