json-yc-CSDN博客

原创 react hooks 基于 useContext 与 useReducer 跨组件通信的封装

react hooks 基于 useContext 与 useReducer 跨组件通信的封装，实现数据全局修改与展示

2023-05-08 23:49:45 244

原创 react umi dva 使用 useSelector,useDispatch

react umi dva 使用 useSelector,useDispatch

2023-02-17 15:35:40 680

原创强制下载链接转流实现在线预览

背景：因为某些oss云服务器返回的资源链接，直接浏览器去访问都是会强制下载的，包括一些浏览器可以打开的资源也是，例如 pdf。思路：直接访问就强制下载了，那我们就把数据抓下来转流后再打开流来实现查看，核心代码const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'blob'; xhr.onload = () =>

2022-01-18 11:33:17 1269 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 998

原创服务器部署，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 165

原创原生 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 168

原创文字滚动 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 85

原创 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 407 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 604

原创微信小程序 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 184

原创 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 764

转载 Vant-weapp自定义格式化日历--自定义月报表

转载https://www.wyb.plus/index.php/archives/1792/

2021-05-27 22:47:37 465

原创浏览器全屏方法

// 全屏方法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 138

原创基于 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 114

原创常用工具函数分享

const utils = { /** * yc * 全链路url转对象 * @param {*} allUrl */ allUrlToObj(allUrl) { let obj = {} if (allUrl.includes('?')) { let allUrlArr = [] allUrlArr = allUrl.split('?') ...

2021-02-02 15:35:25 47

原创 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 2470

原创 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 2457

原创递归全匹配菜单数组筛选

// 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 291

原创子组件的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 298

原创 0-100数字,最多可保留两位小数‘

{pattern:/(^(\d|[1-9]\d)(\.\d{1,2})?$)|(^100$)/, message: '请输入0-100数字,最多可保留两位小数'}

2020-08-10 15:36:47 1119

原创高德地图 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 1754

原创笔试题多维数组扁平化去重

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 137

原创视频图片撑满容器 object-fit：fill

视频或者图片为了保证自己展现的内容不变形会默认保持自己的长宽比例，但是有时候需求是满铺就需要用到 object-fit 属性语法object-fit 属性由下列的值中的单独一个关键字来指定。取值contain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。cover被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象.

2020-07-13 09:42:30 1662

原创 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 214

原创基于 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 637

原创 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 1343 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 437 1

原创 js 判断一个字符串内是否包含指定字符串正则

str.indexOf('指定字符串',检索位子为Num 可不传) 返回值为找到的内容出现的位置search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。str.search(regexp) 返回第一个与 regexp 相匹配的子串的起始位置。regexp可为字符串，可为正则表达式indexOf 与 search 区别就是 indexOf 只能检索字符串 search 不仅可以检索字符串还可以匹配正则...

2020-07-04 16:04:05 9248

原创常用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 499 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 1118 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 6031

原创 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 683

weixin_44968614的博客