- 博客(32)
- 收藏
- 关注
原创 react hooks 基于 useContext 与 useReducer 跨组件通信的封装
react hooks 基于 useContext 与 useReducer 跨组件通信的封装, 实现数据全局修改与展示
2023-05-08 23:49:45 276
原创 react umi dva 使用 useSelector,useDispatch
react umi dva 使用 useSelector,useDispatch
2023-02-17 15:35:40 738
原创 强制下载链接 转流 实现在线预览
背景: 因为某些oss云服务器 返回的资源链接,直接浏览器去访问都是会强制 下载的,包括一些 浏览器可以打开的资源 也是 ,例如 pdf。思路:直接访问 就强制下载了,那我们就把数据抓下来 转流后再打开流来实现查看,核心代码const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'blob'; xhr.onload = () =>
2022-01-18 11:33:17 1364 2
原创 js 跨域下载链接 下载文件 实现重命名,文件名称 兼容处理
背景: 标签的 download 跨域设置名称无效思路:下载链接按照 流 格式 下载下来 在组装,下载到本地的 流 就是同域了let downChangeName = (downUrl='',downFilename)=>{ if(!downUrl){ window.alert('请传入下载链接') return } let filename = ''; let url = downUrl ; let fileType = dow
2021-12-30 17:58:10 1029
原创 服务器 部署 ,jenkins 配置
用xshell 登录服务器在 linux 新建文件夹 mkdir web进入文件夹 cd web下载 node包 wget https://nodejs.org/dist/v14.17.6/node-v14.17.6-linux-x64.tar.xz下载 好以后 解压 tar xf node-v14.17.6-linux-x64.tar.xz进入解压目录 cd node-v14.17.6-linux-x64解压文件的 bin 目录底下包含了 node、npm 等命令,我们可
2021-09-09 11:44:45 177
原创 原生 js 打印dom的 封装
// 设置打印样式function getStyle() { const styleContent = `#print-container { display: none;}@media print { body > :not(.print-container) { display: none; } html, body { display: block !important; } #print-cont
2021-08-17 14:38:31 196
原创 文字滚动 vue
<template> <div class="TextRunning"> <div class="myMarquee" style="width:300px"> <span>**</span> <div class="myMarqueeLay"> <div class="myMarqueeWrap"> <div class="myMarqueeCo
2021-07-29 23:55:08 93
原创 css 文字滚动-react
reactimport React from 'react'import styles from './TextRunning.less'import { NotificationOutlined} from '@ant-design/icons';import {Modal} from "antd";const TextRunning = (props)=>{ const [textArr,setTextArr] = React.useState([ {
2021-07-29 23:52:40 451 1
原创 常见格式浏览器在线预览
const onlineViewFile = (url) => { if (url) { // 获取文件格式 const getFileFormatFun = (getFileFormatFunUrl) => { console.log(175555, getFileFormatFunUrl); const getInUrl = getFileFormatFunUrl; const urlArr = (getInUrl || '').sp.
2021-07-27 11:11:47 625
原创 微信 小程序 canvas 跟手绘制 组件
<view class="signCanvas"> <text bindtap="onOpenSignCanvas">打开 canvas </text> <view wx:if="{{isSignCanvasShow}}" class="signCanvas-shade-box"> <view class="signCanvas-shade"> <view class="canvas-box"> ...
2021-06-17 23:16:57 199
原创 echarts 绘制 立体柱状图
const VALUE = [{ value: 1000, itemStyle: { color: 'rgba(0, 206, 201,1.0)' } }, { value: 800, itemStyle: { color: 'rgba(232, 67, 147,1.0)' } }, { value: 600, ...
2021-06-02 16:55:38 788
转载 Vant-weapp自定义格式化日历--自定义月报表
转载https://www.wyb.plus/index.php/archives/1792/
2021-05-27 22:47:37 477
原创 浏览器 全屏 方法
// 全屏 方法function inFullScreen(element) { const ele = element; if (ele.requestFullscreen) { ele.requestFullscreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen(); } else if (ele.webkitRequestFullscreen) { ele.webk.
2021-05-27 12:13:08 166
原创 基于 canvas.getImageDat 的矩形分区算法。
var canvas20210510 = document.getElementById('canvas20210510')var canvas202105102D = document.getElementById('canvas20210510').getContext("2d")const canvas20210510getImageData = canvas202105102D.getImageData(0, 0, canvas20210510.width, canvas20210510.he.
2021-05-14 11:38:21 118
原创 常用工具函数分享
const utils = { /** * yc * 全链路url转对象 * @param {*} allUrl */ allUrlToObj(allUrl) { let obj = {} if (allUrl.includes('?')) { let allUrlArr = [] allUrlArr = allUrl.split('?') ...
2021-02-02 15:35:25 54
原创 antd tag 组件改造 动态修改
import { Tag, Input, Space, Button, Tooltip } from 'antd';import { PlusOutlined ,EditOutlined} from '@ant-design/icons';class EditableTagGroup extends React.Component { constructor(props) { super(props) } state = { // t...
2020-09-24 19:05:58 2503
原创 antD form 数据绑定
import { Form, Input, Button, Select } from 'antd';const { Option } = Select;const layout = { labelCol: { span: 8, }, wrapperCol: { span: 16, },};const tailLayout = { wrapperCol: { offset: 8, span: 16, },};const Demo = (.
2020-09-24 14:22:05 2492
原创 递归全匹配 菜单数组 筛选
// const filterByMenuDate = (data, keyWord) =>{ // console.log(888888888888,data,keyWord) // let returnArr = data.map((item) => { // if ((item.name && item.name.includes(keyWord)) ||filterByMenuDate(item.children || [], keyWo..
2020-09-16 16:11:59 293
原创 子组件的props 只能由父组件 修改 子组件 内部 不能动 props 解决报错思路
vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "XXXX"报错大概意思就是子..
2020-08-17 17:42:57 306
原创 0-100数字,最多可保留两位小数‘
{pattern:/(^(\d|[1-9]\d)(\.\d{1,2})?$)|(^100$)/, message: '请输入0-100数字,最多可保留两位小数'}
2020-08-10 15:36:47 1143
原创 高德地图 amap-js 获取定位 import 方式
在网上找了很多 高德 获取 定位的方法 大多是在html 引入<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> ---------cdn的方式 ,但是现在的项目大都是npm 引包开发 使用cdn 有些不规范,有些 还会报红。 所以 结合以下几个文档,实现 npm import 方式封装函数 避免踩坑...
2020-07-18 09:44:41 1794
原创 笔试题 多维数组 扁平化去重
et arr = [1,2,3,[5,6,[5,9,9,[5,5,6]]],5,[5,1]]let strArr = arr.toString().split(",")console.log(1911111,strArr)console.log(1911111,[...new Set(strArr)])
2020-07-14 14:58:05 145
原创 视频 图片撑满容器 object-fit:fill
视频 或者图片 为了保证自己展现的内容不变形 会默认保持自己的长宽比例,但是有时候 需求是满铺 就需要用到 object-fit 属性语法object-fit 属性由下列的值中的单独一个关键字来指定。取值contain被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。cover被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象.
2020-07-13 09:42:30 1690
原创 vue transition 封装
<template> <transition :name="activeName"> <slot v-if="value"></slot> </transition></template><script> export default { name: "index", props:{ value:{ .
2020-07-10 15:44:55 224
原创 基于 crypto-js 加密解密 的封装
看了网上各位大佬的 加解密 实现 有些复杂(可能涉及到高阶应用) 鄙人就只是想实现字符串的加密解密,就简单地做了如下封装先 npm i -scrypto-js找一个文件 放封装的代码 将其导出import CryptoJS from 'crypto-js'export default class Encryption { //秘钥 lockKey: any; constructor(key) { this.lockKey = key ...
2020-07-08 16:32:23 671
原创 vue-router 路由守卫 与 vuex
vue是单页面应用 ,各个页面的跳转需要路由支持,当然也可以 v-if/v-show,但是实际开发中不现实为一个项目做鉴权就可以用解决方案去vuex里面读取状态,根据状态 来调用vue-router的路由守卫来实现,鉴权路由跳转官方链接:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB写判断...
2020-07-07 17:19:29 1372 2
原创 vue 动画 过渡效果 「transition」 封装
vue 提倡数据驱动 不宜操作 dom元素要完成显示隐藏的过度动画 可以用 官方的<transition>文章后面再说官方的<transition>组件先来看看我自己想到的 过度动画方案 与 理解动态绑定 class 类名 通过 改变v-if/v-show 的布尔值的时候 动态改变class绑定的类名称例如 (lang="ts")<div > <div :class="aniClass" v-if="show" > ...
2020-07-06 14:59:01 471 1
原创 js 判断一个字符串内 是否包含 指定字符串 正则
str.indexOf('指定字符串',检索位子 为Num 可不传) 返回值为找到的内容出现的位置search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。str.search(regexp) 返回第一个与 regexp 相匹配的子串的起始位置。regexp可为字符串,可为正则表达式indexOf 与 search 区别 就是 indexOf 只能检索字符串 search 不仅可以检索字符串 还可以 匹配 正则...
2020-07-04 16:04:05 9508
原创 常用css 文本 样式 滚动条css 样式
常用css文本不换行,直到遇到br标签。white-space:nowrap;前提设定宽度.一行文本 省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;多行文本省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:...
2020-07-03 17:09:46 531 1
原创 jsmind源码初探
先把项目跑起在<script>里面引入 jsmind.js<link>里面引入样式 <link type="text/css" rel="stylesheet" href="../style/jsmind.css" /> <script type="text/javascript" src="../js/jsmind.js"></script> <script type="text/javascript"...
2020-05-27 14:14:25 1205 3
原创 element ul el-table选中改变表格行样式
<el-table:data=“tableData”:cell-style =“rowRed”//改变样式:cell-class-name=“tableRowClassName”//添加下标@selection-change=“handleSelectionChange”//收集下标>/*** @author: YC* @description: 收集选中的inde...
2019-07-09 01:48:56 6068
原创 input multipart 多文件上传的后台php处理 前端工程师自研 勿喷
input multipart 多文件上传的后台php处理 前端工程师自研 勿喷Php多文件上传转存for ($i=0; i<count(i <count(i<count(_FILES[‘fileN’][‘name’]) ; KaTeX parse error: Expected '}', got 'EOF' at end of input: …_upload...
2019-05-26 01:31:56 708
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人