~~~
/**
* 秒转 时、天 以及 逆向转换
* @param{number}v - 输入值
* @param{h | d}param.type - h为小时,d为天
* @param{boolean}param.reverse - 是否逆向转换
*/
functiontransTime(v:number, { type='h', reverse }:any) {
constinterval=type==='h'?1:24;
returnreverse?v/ (3600*interval) :v*3600*interval;
}
解决IE11浏览器不支持toString
<script>
if (!window.toString) {
window.toString=Object.prototype.toString
}
</script>
下拉框带模糊搜索功能：
<Select
showSearch
placeholder="请选择"
optionFilterProp="children"
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
年月日
moment().format('YYYYMM')
moment().format("HH:mm:ss")
moment().format("YYYY-MM-DD”)
单行溢出…
width:300px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
InputNumber数字输入框不能为负数，不能输入小数点要取整数：
const limitDecimals = (value: string) => { return value.replace(/^(0+)|[^\d]+/g,'') }
<InputNumber min={0} formatter={limitDecimals} parser={limitDecimals} />
单位地址：（40位）
rules={[
{ required:true, message:'单位地址不能为空' },
{ pattern: /^.{1,40}$/, message:'单位地址不能超过40个字符' },
]}
证件号、身份证验证正则：（数字、18位）
rules={[
{ required:true, message:'证件号不能为空' },
{ pattern: /^[\d]{1,18}$/i, message:'请输入正确的证件号' }
]}
统一社会信用代码验证正则：（字母大小写，18位）
rules={[
{required:true, message:'统一社会信用代码不能为空'},
{pattern: /^[\dA-z]{18}$/, message:'请输入正确的社会统一信用代码'}
]}
手机号码验证正则：（数字、10）
rules={[
{ required:true, message:'手机号码不能为空' },
{pattern: /^[\d]{1,10}$/i, message:'请输入正确的手机号码, 仅支持数字'}
]}
手机号验证正则：
/^1\d{10}$/.test(xxx）
中文验证正则：
/^[\x00-\xff]+$/.test('xxx')
6-16为，数字、字母、字符组合至少两种
方法:
function blend(value) {
return (/[a-z]/i.test(value) && (/\d/.test(value) || /\W/.test(value))) || (/\d/.test(value) && (/[a-z]/i.test(value) || /\W/.test(value)));
}
if判断：
if (!(blend(params.newPassword) && params.newPassword.length >= 6 && params.newPassword.length <= 16)) return message.warn('6-16位字符限制，数字、字母、字符至少包含两种');
if (params.newPassword !== params.reNewPassword) return message.warn('两次输入的密码必须保持一致');
输入框去掉前后空格：
getValueFromEvent={event => event.target.value.trim()}
登录，修改，忘记密码md5加密：
import { md5 } from 'shared'
values.pwd = md5(values.pwd) // 其中 pwd是对应的 name
例如：
<Form.Item name="pwd" rules={[{ required: true, message: '请输入您的密码' }]}>
MD5+盐值加密：
md5(md5(password)+'hypercha1n')
或
values.password = md5(`${md5(values.password)}hypercha1n`)
表格里添加超链接跳转：
render: (_, record) => {
return <Link to={{pathname: /dataServiceDetail/${record.resourceId}}}>
{record.resourceName}
}
垂直居中flex
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
列表搜索框
const [listParams, setListParams] = useState<ListParamsTypes>({ pageSize: 10, pageNo: 1 });
onChange={onAppName}
const onAppName = (e) => {
listParams.keyword = e.target.value.trim();
setListParams({ ...listParams });
};
子组件获取父组件里的值：
在父组件里调用的子组件地方加：itemName={dataTypeModal.itemName} xxxx根据接口定义
然后再子组件调用props的地方添加：const { itemName } = props
然后在需要展示的地方 {itemName} 就可以了
获取当前URL中的路径部分：
let detailBaseUrl = '';
const pathName = window.location.pathname; // pathname 属性是一个可读可写的字符串，可设置或返回当前 URL 的路径部分
if (pathName.includes('service')) { // includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
detailBaseUrl = '/inspect/service-supervise/org-detail/';
} else if (pathName.includes('/log/')) {
detailBaseUrl = '/inspect/log/detail/';
} else if (pathName.includes('order')) {
detailBaseUrl = '/inspect/order-supervise/detail/';
}
获取地址带home的URL
constwhiteStyles = history.location.pathname.includes('home');
把当前按钮失去焦点：
标签里：ref={uploadBtnRef}
组件或方法里：onClick={()=>uploadBtnRef.current.blur()}
获取当前input文本框的值：
e.target.value
获取当前勾选框的值：
e.target.checked
列如：
const [formData, setFormData] = useState({});
const onSandbox = (e) => {
formData.myChecked = e.target.value;
setFormData({...formData});
}
<Radio.Group defaultValue={0} onChange={onSandbox}>
标准
沙箱
</Radio.Group>
IE11浏览器兼容性问题（看不到页面+报错：无效字符（umi.xxx.js））
原因是：build 之后，ES6没有编译IE11 不识别报错
去掉esbuild再打包
下载文件
apis.certificateDownload({verificationId:detail.evidenceId}).then((resModel:any)=>{
const {response, data} = resModel;
if (data) {
const fileName = response.headers.get('content-disposition').replace(/.+filename=/,'');
downloadFile(data, {type: response.headers.get('content-type'), fileName }); }
})
routes一级菜单，详情高亮
// 证照制作
exportdefault [
{
path:'/produced',
name:'证照制作记录',
icon:'menuNotify',
routes: [
{
path:'/produced',
name:'证照制作记录',
component:'./produced',
title:'证照制作记录',
hideInMenu:true,
},
{
name:'证照制作记录详情',
path:'/produced/info',
component:'./produced/info',
title:'证照制作记录详情',
hideInMenu:true,
},
],
},
];
图表字体颜色：
axisLabel: {
show: true,
textStyle: {
color: 'red',
},
},
菜单上用JS创建一个文案点击跳转URL（写死），后期改成通过接口动态获取URL
React.useEffect(() => {
const oa = document.createElement('a');
oa.style.position = 'fixed';
oa.style.left = '50px';
oa.style.bottom = '20px';
oa.style.zIndex = '100';
oa.style.color = 'white';
oa.innerHTML = '区块链浏览器';
oa.target = '_blank';
// 区块链浏览器动态URL
apis.user.query({ key: 'hypervision_url' }).then((resModel: any) => {
if (resModel) {
oa.href = resModel.configValue;
document.body.appendChild(oa);
}
});
}, []);
正则去掉-（比如日历的-）
.replace(/-/, '')
图片翻转
transform: rotateY(180deg);
Form.Item里面使用Checkbox组件选中丢失的问题在Form.Item上添加这个属性：
valuePropName="checked"
修改气泡组件的确定取消按钮
cancelbuttonprops={style:{display:'none'}}
添加三元条件判断：
{ formData.myRadio == 1 ? : }
x-render组件拖动
http://172.16.8.65:4873/-/web/detail/fr-generator
2个导航切换（包括内容）
const[tabValue,setTabValue]=useState<number>(0);
Js获取页面地址参数
var url = window.location.href; //获取当前窗口的Url; 结果：http://localhost:61768/Home/Index?id=2&age=18
var host = window.location.host;//获取当前窗口的主机名; 结果：localhost:61768
var port = window.location.port; //获取当前窗口的端口; 结果：61768
var pathname = window.location.pathname;//获取当前窗口的路径 ; 结果：/Home/Index
var URL = document.URL;//获取当前文档的Url；结果：http://localhost:61768/Home/Index?id=2&age=18
var search = window.location.search;//获取参数；结果：?id=2&age=18
分割url提取参数
var search = window.location.search;
var age = getSearchString('age', search); //结果：18
var id = getSearchString('id', search); //结果：2
//key(需要检索的键） url（传入的需要分割的url地址，例：?id=2&age=18）
function getSearchString(key, Url) {
var str = Url;
str = str.substring(1, str.length); // 获取URL中?之后的字符（去掉第一位的问号）
// 以&分隔字符串，获得类似name=xiaoli这样的元素数组
var arr = str.split("&");
var obj = new Object();
// 将每一个数组元素以=分隔并赋给obj对象
for (var i = 0; i < arr.length; i++) {
var tmp_arr = arr[i].split("=");
obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
}
return obj[key];
}
~~~
- html
- 头部标签
- canvas
- md
- DOM
- git常用命令
- css
- 网站
- 默认
- 前缀
- 文本
- 图片
- 选择器
- 滚动条
- 强制横屏
- 响应式
- 动画
- animation(动画)
- transition(过渡)
- transform(变形)
- translate(移动)
- 渐变
- 鼠标
- 自定义 Web 字体
- 可视化
- echarts
- 折线图
- 区域颜色标识
- 分段显示不同颜色
- 柱状图
- 子弹图
- 分组、柱体宽度、指示器宽度
- 圓角
- 顶部显示文字
- 双轴柱状折线图
- 双轴双列柱状图
- 单个柱状图
- 多纵向坐标
- 走势图
- 横向百分比
- 最大值和最小值
- 饼图
- 嵌套
- 分组显示
- 饼图结合柱状图
- 折线结合饼图
- 关系图
- 树图
- 地图
- 标点
- 选中
- 常用
- 图片超出可拖拽
- 百度导航
- 短信验证码倒计时
- video
- TS
- 未整理
- 消失的边界线问题
- 跟随
- js
- 兼容
- 数组去重
- 解析 URL 参数为对象
- 图片懒加载
- 正则
- Photoshop
- 快捷键
- 混合模式
- vscode
- vue
- 指令