- 博客(75)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 antd DatePicker组件 报错：date.clone is not a function
代码...useEffect(() => { if (item) { form.setFieldsValue({ time: moment(item.time).format('YYYY-MM'), }); } }, [item]);... <Form.Item label="日期" name="time" rules={[{ required: true, message: '请输入日期!' }]}>
2022-05-16 10:53:11
1134
原创 react富文本编辑器 quill
npm install react-quill "react": "^16.0.0", "react-dom": "^16.0.0", "react-quill": "^1.3.5",hook封装import React, { useEffect, useState } from 'react';import ReactQuill from 'react-quill';import 'react-quill/dist/quill.snow.css';const MyCompo
2022-05-15 21:18:48
1763
1
原创 小程序taro 实现轮播图
创建一个文件夹MySwiper，再创建index.js和index.scss文件index.js/** * 轮播图组件 */import React from 'react'import { Swiper, SwiperItem, Image } from '@tarojs/components';import './index.scss';import { View } from '@tarojs/components'const MySwiper = props => {
2021-07-01 11:20:12
2030
原创 react scrollTop滚动到最底部
document.getElementById(“div”).scrollTop = document.getElementById(“div”).scrollHeight无效先设置ref，再操作ref<div ref={divEle} style={{ display: ‘block' }}> { list&&list.map((item)=>{ <div>......</div> }) }</div>
2021-06-04 10:41:52
2865
2
原创 react hook自定义弹出框组件
先在组件中放置两个div，一个是需要弹出的组件的div，另一个是触发组件的div。//触发div<div style={{ width: '200px', height: '200px', background: 'red', }} >按钮块</div>//弹出的div<div style={{ width: '50px', height: '50px', background: 'blue' }} > 123</div>
2021-05-20 10:48:50
2062
原创 react echarts数据更新时图表不刷新问题
图表实现创建的通用图表组件import React, { useEffect, useState } from 'react'import * as echarts from 'echarts';const index = props => { const { height, option } = props const [id, setId] = useState() var myChart useEffect(() => { if
2021-04-15 09:49:21
3119
原创 react hook + echarts折线图
新建一个组件import React,{useEffect,useState} from 'react'import * as echarts from 'echarts';const index = props =>{ const {height,option} = props const [id,setId] = useState() useEffect(() => { let id = ('_' + Math.random()).rep
2021-04-06 16:06:25
690
原创 antd table分页居中
:global{ .ant-table-pagination-right { float: none !important; text-align: center; }}ant-table-pagination-right 是table的css样式，这样写是修改全部table。只修改一个table，使用下面这个**.less.tableform{ :global{ .ant-table-pagination-right {
2021-03-23 09:36:27
1199
原创 umi设置css打包路径和资源访问路径
config.js中设置....const { PUBLIC_PATH = '/***/' } = process.envexport default defineConfig({ ..... base: PUBLIC_PATH, // 打包路径，默认是/ publicPath: PUBLIC_PATH, // 资源访问路径，默认/ .....})
2021-03-19 10:27:39
5341
原创 antd design pro修改tree展开/折叠图标
.less文件:global{ .ant-tree-switcher_close{ background: url('../../assets/browse/down.png') no-repeat; i{ display: none; } } .ant-tree-switcher_open{ background: url('../../assets/browse/up.png') no-re
2021-03-02 15:40:03
3758
3
原创 react+canvas绘制圆环
首先创建一个.jsx文件输入rfc，创建组件模板import React from 'react'export default function index() { return ( <div> </div> )}再把canvas元素引入，顺便把组件模板稍微改下import React from 'react'const index = props => { return (
2021-02-01 12:42:53
877
原创 vue 跨组件进行传值（简易）
vue的小项目，对于多组件之间的状态管理，不使用Vuex，可以使用provide/inject完成数据管理。父组件使用provide 封装数据<template> <div> .... <Books></Books> </div></template><script>import Books from "./Books.vue";export default { data() {
2020-12-07 13:51:01
1934
原创 vue transition实现组件平滑显示/隐藏
在HTML部分使用Vue 提供的template封装组件，设置name，在template的子节点设置v-show，通过按钮来改变flag来改变状态，实现组件的显示/隐藏。<template> ... <div @click=“flag=!flag”>按钮</div> <transition name="slide"> <div v-show="flag"> ... </div> </transiti
2020-11-27 16:11:32
3437
原创 vue引用iconfont图标
在iconfont图标官网把需要的图标添加入库，再把下载的文件解压，把里面所有的文件复制到项目 src/assets/font 目录下使用的时候先在script导入import "@/assets/font/iconfont.css";然后在template中使用<i class="icon iconfont icon-fanhui"></i>icon和iconfont必写icon-fanhui和iconfont.css文件中的相互对应图标库网址https:/
2020-11-25 15:04:01
169
原创 前端请求下载（react）
let oReq = new XMLHttpRequest();oReq.open("GET", getUrl(requestUrlBase, `/api/v1.1/auth_session/export/gathered/point/Data?id=1519`), true);oReq.responseType = "blob";oReq.setRequestHeader("Content-Type", "application/octet-stream", 'cors', "Access-Cont
2020-11-24 14:39:05
215
原创 利用github 创建api接口
首先在github上创建一个新的工程再在本地创建一个文件夹，创建2个文件db.json,README.md再根据github上的提示，把2个仓库连在一起再在db.json文件中写入数据，然后保存，提交并推送然后输入接口地址 http://my-json-server.typicode.com/Lin152/myjson/posts注意接口地址和项目路径对应关系http://my-json-server.typicode.com/Lin152/myjson/posts参考 https:/
2020-11-18 11:20:08
3238
2
原创 sass &用法
<div class="header"> <span class="header-home">首页</span></div>.header { width: 100%; height: 1rem; background-color: #e54847; position: fixed; .... &-home{ position: absolute; top: 50%; left: 50%
2020-11-17 10:21:50
416
原创 js数组比较取不同
//数组比较取不同 let c = a.concat(b).filter((cur, i, arr) => { return arr.indexOf(cur) === arr.lastIndexOf(cur); });
2020-09-01 09:28:11
600
原创 请求.xlsx文件
let oReq = new XMLHttpRequest(); oReq.open("GET", getUrl(requestUrlBase, `api/api?${stringify(queryParams)}`), true); oReq.responseType = "blob"; oReq.setRequestHeader("Content-Type", "application/octet-s...
2020-08-25 14:49:02
643
原创 js语音输出
window.speechSynthesis.speak(new window.SpeechSynthesisUtterance(‘你好，世界！’))
2020-08-14 13:07:47
348
原创 python连接mysql
首先安装pymysql 模块，可以通过 pip 安装在进行mysql操作前，先设置MySQL服务器地址，MySQL服务器端口号，用户名，密码，数据库名称。import pymysqlDBHOST = 'localhost'DBUSER = 'root'DBPASS = 'root'DBNAME = 'datest'建立连接try: db = pymysql.connect(DBHOST,DBUSER,DBPASS,DBNAME) print('OK')except py
2020-08-10 11:04:59
287
原创 js数组乱序
一var values = [1, 2, 3, 4, 5];values.sort(function(){ return Math.random() - 0.5;});console.log(values)二var res= [1, 2, 3, 4, 5];function shuffle(a) { for (let i = a.length; i; i--) { let j = Math.floor(Math.random() * i);
2020-08-06 11:06:42
135
原创 react mockjs模拟数据请求
我使用的是dva框架，通过dva new dva-quickstart直接创建项目首先引入mockjsnpm install mockjs先实现一个简单GET请求在目录的最外层有一个mock文件夹，生成随机数据都放在这里创建一个cs.js和data.js两个文件data.js里放的是默认数据data.jsexport default[ { id:1, name:'a', age:13, type:1, },
2020-08-03 15:09:08
1117
原创 react+antd 自定义table单元格属性
先把antd table的基本样式引入，在columns中需要设置单元格属性的列描述数据对象中加入onCell属性，引入css样式import styles from './xxx.less';columns = [ { title: '..', .... onCell(record, rowIndex) {; return { className: styles[`.....`],
2020-07-31 10:43:35
7379
原创 js reduce求和
deviceList=[{name:‘1’,count:2},{name:‘2’,count:3},{name:‘3’,count:4},{name:‘4’,count:6},]let totalPrice = 0let sumdeviceList = deviceList.reduce((totalPrice, item) => totalPrice + item.count, 0)console.log(sumdeviceList )
2020-07-30 09:32:26
3082
原创 react根据条件改变边框颜色
遍历数据，根据数据中的某个值来更改div边框的颜色picinfo.map(item => ( <div className={styles.boxshow} style={{ borderWidth: '0.5px', borderColor: this.returnColor(item.color) }}> </div> )) returnColor = (color) => { switch (color) {
2020-07-28 16:31:25
2674
1
原创 react+echarts实现一个饼图的组件
npm安装echarts-for-reactnpm install --save echarts-for-reactnpm install echarts --save引入模块和组件import React from 'react';import echarts from 'echarts/lib/echarts'import 'echarts/lib/chart/pie'; //折线图是line,饼图改为pie,柱形图改为barimport 'echarts/lib/component
2020-07-27 13:48:03
1874
原创 鼠标移入生成放大图片，移出销毁图片
//移入显示大图moveover = record => {var boximg = document.createElement(‘img’);boximg.style.width = ‘150px’;boximg.style.height = ‘150px’;boximg.style.position = ‘absolute’;boximg.style.left = ‘70px’;boximg.style.top = ‘-30px’;boximg.src = record.url;
2020-07-13 11:11:20
282
原创 react+swiper
首先引入，我这里使用是5.3.0npm i swiper@5.3.0 --save 然后在组件头部引入import Swiper from 'swiper';import 'swiper/css/swiper.css';这里我使用的是class组件初始化轮播组件componentDidMount() { this.instanceSwiper()} instanceSwiper() { this.swiperObj = new Swiper('.swipe
2020-07-07 16:34:45
564
原创 javascript实用的功能
ES7includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回falselet arr = ['react', 'angular', 'vue'] if (arr.includes('react')) { console.log('react存在')}在ES7中引入了指数运算符，具有与Math.pow(…)等效的计算结果。console.log(Math.pow(2, 10)) // 输出1024console.log(2**10) // 输出1
2020-06-19 09:46:32
271
原创 git无法提交代码
报错npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData日志报错如下20 error code ELIFECYCLE21 error errno 122 error ant-design-pro@1.0.0 lint-staged: lint-staged22 error Exit status 123 error Failed at the ant-design
2020-06-12 10:24:17
1220
原创 GitHub精准搜索
in:name xxx // 按照项目名搜索in:readme xxx // 按照README搜索in:description xxx // 按照description搜索stars:>xxx // stars数大于xxxforks:>xxx // forks数大于xxxlanguage:xxx // 编程语言是xxxpushed:>YYYY-MM-DD // 最后更新时间大于YYYY-MM-DD...
2020-06-08 15:58:35
157
原创 js对象数组 修改对象名，取最大几个，剩余的相加并合并为一个对象
function sorBy(props){ return function(a,b) { return b[props] - a[props]; } } const data = [ {devTypeName: "a", count: 53}, {devTypeName: "b", count: 18}, {devTypeName: "c", count: 2}, {devTypeName: "d", count: 3}, {devTypeN.
2020-05-15 15:38:44
238
dva+mockjs实现模拟请求
2020-08-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人