- 博客(46)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 React后台管理项目 开源
????点击项目预览地址????GIthub地址(路过的给个星星????)????项目使用nginx部署，开启gzip压缩，路由懒加载，加载从8s到1s这样????图片压缩使用Tinypng技术栈 React+antd功能模块（后台接口正在开发node）首页完整布局导航菜单顶部导航左边菜单(增加滚动条以及适配路由的active操作)图标模块富文本Markdown拖拽表格模态框拖拽列表拖拽放大镜C3动画旋转木马正方体八卦图表格echarts地图（表格下载开发…
2020-06-15 21:06:36
1726
2
原创 el-cascader点击选中前判断事件及单选取值为最后一级数据
在element-ui中单选选中最后一级，props中加入emitPath:false属性；如果在选中之前判断是否可以选择<el-cascader :options="options" :props="{ emitPath:false }" :show-all-levels="false"> <template slot-scope="{ node, data }"> <div style="width:100%" @click="chec
2023-10-16 16:59:50
990
原创 使用 monaco-editor-nls 汉化 右键菜单汉化部分失败原因
使用 monaco-editor-nls 汉化 右键菜单汉化部分失败原因。
2023-07-27 19:27:25
2382
4
原创 vue elementUI select树性选择器
服务端返回全部数据时，有两三千条,渲染全量的tree组件时前端直接卡死，排查发现业务数据大部分子节点的量级在万以上。页面卡死,改成懒加载模式后.树形选择器使用了。
2023-03-17 16:32:11
2070
原创 基于Vue3+ECharts5+datav的疫情数据可视化大屏/地图项目
基于Vue3+ECharts5+datav的疫情数据可视化大屏/地图项目，每日新增，国外新增排行
2022-10-12 20:32:09
4391
4
原创 阿里云centos7安装docker
安装dockerdocker安装参考链接：点这里1. 使用 root 权限登录 Centos。确保 yum 包更新到最新。sudo yum update2. 安装需要的软件包， yum-util 提供yum-config-manager功能yum install -y yum-utils device-mapper-persistent-data lvm2这样就安装成功了3. 安装docker-ce的yum源yum-config-manager --add-repo https://
2021-12-19 16:05:57
1001
原创 vue点击标签切换选中及互相排斥
单身和已婚不能同时选中，不了解保险和已了解保险不能同时选中。同时各个标签点击可以取消选择 //html <li> <span class="fill-title">与我相关</span> <div> <van-button v-for="(item, index) in myself" :key="in
2020-07-03 18:01:20
727
原创 阿里云服务器Linux系统安装mongodb
花了一两天时间，在linux系统上安装了mongoDB，记录一下过程。安装包linux安装包链接：点我百度网盘提取码：smgw将下载好的安装包（mongodb-linux-x86_64-4.0.13）用xftp上传到linux，目标路径为/usr/local/解压安装包用Xshell进入到 /usr/local,解压安装包并将安装装包移动到mongodb目录下（先在/usr/local下创建mongodb文件夹）cd /usr/local/tar -zxvf mongodb-lin
2020-06-22 22:35:57
1010
原创 react-draft-wysiwyg富文本编辑器使用
yarn add react-draft-wysiwygyarn add draft-jsyarn add draftjs-to-htmlyarn add html-to-draftjsimport React, { Component } from 'react';import { EditorState, convertToRaw, ContentState } from 'draft-js';import { Editor } from 'react-draft-wysiwyg';im
2020-06-15 14:37:54
482
原创 React css模块化样式判断
import React, { Fragment } from 'react'import style from "./TaskItem.module.less";function TaskItem(props) { let { item, idNow } = props let { title, username, id } = item const dragStart = (e) => { props.dragStart(id) } c
2020-06-13 10:19:37
892
原创 You should not use Route component and Route render in the same route
//You should not use <Route component> and <Route render> in the same route; //<Route render> will be ignored //这句话是不用在路由中再嵌套路由 //错误写法 <Route {...props} render={(item) => { if (item.isLogin) {
2020-06-05 11:44:55
1110
原创 react 中控制台报Destructuring assignment Componet unnecessarily renamed no-useless-rename警告
这句话的意思是：已经使用解构赋值了，就不必要再重新命名了{ Componet: Componet, ...props }//直接换成{ Componet, ...props }
2020-06-05 11:39:38
758
原创 react高阶组件判断是否可以跳转路由
import React, { Component } from 'react'import { withRouter } from "react-router-dom"import { connect } from "react-redux"import { message } from 'antd';export default function (Componets) { class AutherCreate extends Component { UNSAFE_com
2020-06-04 21:34:00
446
原创 antd菜单组件递归遍历渲染
import React, { Component } from 'react'import { Link } from 'react-router-dom'import "./menu.less"import { menuData } from "@/router/router.js"import { Menu } from 'antd';const { SubMenu } = Menu;export default class Menus extends Component { me
2020-06-04 21:32:06
2849
原创 React子路由跳转，显示空白
在使用React菜单组件，点击跳转不显示子路由，直接跳到空白页面在子路由的上一级路由里，不能使用exact会导致父级路由路径不匹配从而父子组件都显示不了父级路由 render() { return ( <Router> <Switch> <Route path="/login" component={LoginRegister} /> <Route path="/register"
2020-06-04 21:30:30
3906
原创 react-redux学习
action.jsimport { ADD, INCERMENT} from "./Base"const add = function (num=5) { return { type: ADD, num }}const incerment = function (num=3) { return { type: INCERMENT, num }}export { add,
2020-06-03 11:37:55
99
原创 React高阶组件用法
npm run eject 把webpack的相关配置文件暴露出来，会把所有的都添加在dependenciesFragment和vue的template模板一样，不会渲染成标签 render() { return ( <Fragment> { this.state.num? this.state.num.map(item => { return <li key={item.key}>{item
2020-06-03 00:47:35
189
原创 学习promise源码
var nextTick if (typeof setImmediate === 'function') { // IE >= 10 & node.js >= 0.10 nextTick = function (fn) { setImmediate(fn) } } else if (typeof process !== 'undefined' && process && typeof process.nextTick ...
2020-06-01 20:38:08
103
原创 vue项目中取消axios请求
axios中文文档请求文件中//构造函数来创建 cancel tokenimport request from '@/utils/request'import axios from 'axios'const CancelToken = axios.CancelToken;export function fetchList(query,that) { return request({ url: '/vue-element-admin/article/list', method:
2020-05-30 17:04:51
2084
原创 javascript 数组slice和splice方法
slice是截取元素，而splice是删除元素。slicearr.slice(start,end)//start 开始的位置//end 结束的位置 可选 如果没有就从开始截取到最后//返回一个新的数组，包含从 start 到 end （不包括该元素）的 arr 中的元素。let arr = [1,2,3,4]arr.slice(1)//[2, 3, 4]arr.slice(1,3)//[2, 3]arr.slice(1,2)//[2]如果想删除数组中的一段元素，应该使用方法 ar
2020-05-29 19:53:34
235
原创 vue项目使用xlsx读取excel表格上传，支持拖拽和点击上传，即时展示表格内容
支持拖拽和按钮点击上传html部分<template> <div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"> <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter
2020-05-29 14:49:29
903
2
原创 vue中H5图片拖拽上传即时预览
html部分<template> <div> <img ref="img" style="width:200px;overflow:hidden"/> <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover"> 拖拽图片上传 </div> </div></te
2020-05-29 13:35:14
779
1
原创 require.context在vue项目的使用
适用于划分各个模块，而各个模块要一个一个引入，太麻烦了，这是就用到了require.contextrequire.context函数接受三个参数：directory {String} -读取文件的路径useSubdirectories {Boolean} -是否遍历文件的子目录regExp {RegExp} -匹配文件的正则语法: require.context(directory, useSubdirectories = false, regExp = /^.//);//项目中引用con
2020-05-28 23:50:30
2412
原创 elemntui分页和表格删除最后一页全部数据，页面暂无数据显示的bug
//this.total 是页面的总条数 this.pagesie是一页显示多少条数据const totalPage = Math.ceil((this.total-1)/this.pagesie)//this.currentpage 当前页this.currentpage = totalPage < this.currentpage ? totalPage:this.currentpagethis.currentpage = this.currentpage < 1 ? "1":t.
2020-05-27 20:34:16
447
原创 Better-scroll 的学习
const bscroll = new Bscroll(el,option);1.监听滚动probeType:0/1/2/3 2是手指滚动 3是只要滚动就触发，惯性往上也是bscroll.on(“scroll”,(position)=> {})2.上拉加载pullUpLoad:truebscroll.on(“pullingUop”,()=> {})上拉加载更多，获取完数据后，最后要调用finishpullUp() ;滚动时候如果有图片，图片加载过慢，可能滚动时候有bug，卡顿。
2020-05-25 15:43:40
177
原创 elementui中el-scrollbar 组件跳转回来手动把scrollTop置为0
<div style="display:flex;flex:1;overflow:hidden;"> <el-scrollbar style="width:100%;height:100%;" ref="scroll"> <router-view></router-view> ...
2020-01-02 15:23:59
1633
原创 二次封装elmentui表格和分页
Table.vue<template> <div class="tables"> <div class="tabelLists"> <el-table :data="tableData" style="width: 100%"> <el-table-column label="编号" width="50...
2020-01-02 15:18:26
308
原创 一个数组为基础，过滤掉另一个数组中相同的数
var arr = ["小明", '小红'] var arr2 = [{ name: "小明", price: 20 }, { name: "小红", price: 20 }, { name: "小李", ...
2020-01-02 15:08:02
476
原创 vue elementUI 动态渲染表格
<el-table :data="tableData2" border style="width: 100%" max-height="300"> <el-table-column prop="num" label="序号" align="left" width="50"> <template s...
2019-11-29 16:38:26
1546
原创 vue elementUI Dialog 中表单清除方法
Object.assign(this.usersForm, this.$options.data().usersForm) this.usersForm就是表单数据。 vue elementUI Dialog ，一开始进页面先打开编辑弹框的话，用elementui 清除表单的方法，下次再打开新建的时候，会发现表单中的数据还是第一次打开时候的数据。这样不行，只能手动循环清除数据 ...
2019-11-29 16:35:52
3039
原创 vue elementui 动态渲染表单
根据数据动态渲染表单不bb ，直接贴代码//template 代码 <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" ...
2019-11-29 16:15:43
1612
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人