- 博客(92)
- 收藏
- 关注
原创 table trtd tbody
<template> <div class="view-table"> <table border="1" > <tr class="tr"> <td>指标名称</td> <td>时间</td> <td>指标状态</td> <td>企业数量</td> <
2022-05-24 15:06:25
196
原创 反转按钮点击两次第一次获取值第二次为空
import React from 'react';import {Button} from "antd";const Demo = () => { let lastVal =null // 记录下上次的值 const getValue = (val) => { const thisValue = lastVal ==val ?'' :val // 先把上次的值传给这次 lastVal =thisValue
2022-05-23 21:05:28
168
原创 原生打印js
import React from 'react';import {Button} from "antd";class Example extends React.Component { constructor(props) { super(props); this.state = { printType: 1, }; } // 原生打印 printPartFn = () => {..
2022-05-20 23:49:17
507
原创 多文件上传,文件夹上传
<template> <div> <el-upload v-loading="loading" class="upload-demo" action="*" :on-remove="fileRemove" :on-change="fileChang" :http-request="uploadFile" accept="" :before-
2022-05-18 23:07:55
421
原创 vue实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)
第一步进行安装npm install vue-seamless-scroll --save - 在main.js直接导入使用```javascriptimport scroll from 'vue-seamless-scroll'Vue.use(scroll) - 建立了一个Test.vue来使用(结合element-ui中的表格来一起实现的)```javascript<template> <div id="app"> <div class..
2022-05-12 21:57:27
3120
2
原创 多功能React影像组件(拖拽、水印、缩放、切换、旋转)
yarn add cxj-react-image// npm i cxj-react-image**import ImageModal from 'cxj-react-image'; <ImageModal src={imageList[currentImageIndex]} {/* 当前图片路径 */} next={() => this.next()} {/* 控制下一张 */} prev={() => this.prev()}
2022-05-03 00:57:28
644
原创 React基于antd Table实现可拖拽调整列宽的表格
实现功能1:表格列宽初始自动分配、列宽总和不能超过容器宽度(无横向滚动条,公司项目特殊需求)2:当容器宽度变化时,保持当前列宽的分配比例,等比缩小3:拖动过程中不进行列宽的调整,只有释放之后再进行列宽调整效果图见目录结构:在这里插入代码片useTableCol.tsx: 处理表格列的宽度计算等相关逻辑import { useMemoizedFn, useSafeState } from 'ahooks';import type { ColumnType } from 'antd/es/ta
2022-04-30 16:57:59
4024
原创 Hooks中父组件中调用子组件方法
/* child子组件 */// https://reactjs.org/docs/hooks-reference.html#useimperativehandleimport {useState, useImperativeHandle} from 'react';...// props子组件中需要接受refconst ChildComp = ({cRef}) => { const [val, setVal] = useState(); // 此处注意useImperativeHand
2022-04-19 21:03:53
517
原创 前端导出数据
这是不依赖分页document节点导出1.安装依赖cnpm install -S file-saver xlsxcnpm install -S script-loader2.在公共组件中引入import XLSX from "xlsx"import FileSaver from 'file-saver'3.使用封装的公共组件<template> <!-- // 导出按钮 --> <el-button type="success" icon="e
2022-04-07 12:15:24
2144
原创 将数组里某个属性相同的对象合并成一个数组
var array=[ {id:1,name:'小明',sex:'男'}, {id:2,name:'小刚',sex:'男'}, {id:3,name:'小红',sex:'女'}, {id:4,name:'小花',sex:'女'}, {id:5,name:'小甜甜',sex:'女'}, ] var obj={},newArr=[]; array.forEach(function(item,suffix){
2022-04-05 15:21:25
1605
1
原创 el-table高亮显示
<el-table stripe v-loading=“loading” class=“tables” :data=“esopData” @row-click=“clickData”highlight-current-row:row-style=“rowClass”:row-class-name=“tableRowClassName”@current-change=“handleCurrentChange”@selection-change=“handleSelectionChange” :
2022-04-04 22:10:27
1915
原创 Antd 不能选择今天之前的日期
{/* 不能选择今天之前的日期 */} <DatePicker showTime allowClear disabledDate={isBefore} style={{ width: '100%' }} ></DatePicker>import moment from 'moment'// 判断传入时间是否小于今天0时0分0秒0毫秒的时...
2022-03-25 20:26:20
799
原创 后端返回状态,前端显示对应的值,以及颜色
const STATUS_TYPE: any = { 1: { color: '#f50', text: '待提醒' }, // 1代表后端返回的字段 2: { color: '#87d068', text: '已提醒' }, 3: {color:'',text:'全部'} } console.log(STATUS_TYPE[1].text) //待提醒 console.log...
2022-03-24 21:26:34
1105
原创 时间一开始就显示一年的开始到结束或者点击重置
import React, {useState, useEffect} from 'react'import {Button, DatePicker, Form, Select, Card} from "antd";import moment from "moment";const {RangePicker} = DatePickerconst {Option} = Selectconst Demo: React.FC = function () { const [form] = F.
2022-03-24 20:53:07
259
原创 react 动态获取年月日
import React, { Component } from 'react';class DateSelect extends Component { constructor(props) { super(props); this.state = { yearList: null, monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], dayList: null, selectYea
2022-03-22 22:26:25
1917
原创 vue动态获取年月日类似级联
<template> <div class="date-pickers"> <el-select class="year select" v-model="currentDate.year" @change='judgeDay' placeholder="年"> <el-option v-for="item in years" :key="
2022-03-22 17:51:59
1371
原创 el-tree 跟el-table连用,el-tree每选一个el-table多一列
<template> <!-- 多维查询--> <el-container> <div class="card2"> <div class="serchWrap"> <div class="left"> <el-form :inline="true" :model="listQuery"
2022-03-09 16:49:29
1582
1
原创 富文本上传的html格式的显示在table中只显示文字
const delectHtml=(description)=>{ description = description.replace(/(\n)/g, ""); description = description.replace(/(\t)/g, ""); description = description.replace(/(\r)/g, ""); description = description.replace(/<\/?[^>]*>..
2022-02-10 10:58:57
415
原创 vue element视频上传以及进度条
<div class="album albumvideo"> <div> <p class="type_title"> <span>视频介绍</span> </p> <div class="pic_img"> <div class="pic_img_box"> <el-up
2022-01-26 11:05:13
709
原创 PDF预览
import {useState} from "react";import {Document, Page} from 'react-pdf';import Pagination from "antd/es/pagination";import {pdfjs} from 'react-pdf';import {Button} from "antd";pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/p
2022-01-12 15:25:07
217
原创 Vue.js 第三方常用插件盘点
vue-lazyload 图片懒加载插件地址:https://github.com/hilongjw/vue-lazyloadDemo:http://hilongjw.github.io/vue-lazyload/1、安装:cnpminstallvue-lazyload–savesrc/main.js 导入import并使用use插件:importVueLazyloadfrom’vue-lazyload’Vue.use(VueLazyload)//也可以配置一些选项,建议使用这种配置方式,配
2022-01-06 17:28:48
843
原创 javascript鼠标双击时触发事件大全
javascript事件列表解说事件 浏览器支持 解说一般事件 onclick IE3、N2 鼠标点击时触发此事件ondblclick IE4、N4 鼠标双击时触发此事件onmousedown IE4、N4 按下鼠标时触发此事件onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件onmousemove IE4、N4 鼠标移动时触发此事件onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件
2022-01-04 16:32:05
9022
原创 vue/uniapp - 返回上一页并onLoad刷新数据
methods:{ back() { uni.$emit('refreshData'); uni.navigateBack({ delta: 1 }) }}// 这是换回到哪个页面就使用这个方法控制刷新onLoad() { // 正常进入该页面的获取数据 this.getData(); // 从详情页返回该页面的获取数据 uni.$on('refreshData',() => { this.getData(); })},methods:{ getDat
2021-12-31 16:13:30
1723
原创 【无标题】Cookie 封装
import Cookies from 'js-cookie'const TokenKey ='Admin-Token'export function getToken(){return Cookie.get(TokenKey)}export function setToken(token){ return Cookie.set(TokenKey,token)}export function removeToken(){return Cookie.remove(TokenKey)
2021-12-29 16:31:39
425
原创 基于react的拖拽组件库react-beautiful-dnd 与功能组件一起使用
import React, { useState } from "react";import ReactDOM from "react-dom";import styled from "@emotion/styled";import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";import type { Quote as QuoteType } from "../types";// 生成一个数组co.
2021-12-28 10:43:57
1004
原创 基于react的拖拽组件库react-beautiful-dnd 一个简单的垂直列表
// 用的时候先安装react-beautiful-dndimport React, {Component} from "react";import {DragDropContext, Droppable, Draggable} from "react-beautiful-dnd";// 生成一个数组const getItems = (count:any) => Array.from({length: count}, (v, k) => k).map(k => ({
2021-12-28 09:52:35
746
原创 Canvas
Canvas介绍1.canvas是html5的一个新标签,属于h5的新特性2.canvas标签是一个图形的容器,简单点说就是一块画布,你可以在上画矩形,圆形,三角形,折线等等,也可以用来画logo3.它是通过javascript来画的,即脚本绘制图形canvas可以用来干啥呢?1.制作web网页游戏(但是如果代码写的不咋的游戏可能会非常卡)2.数据可视化(这么说你可能不明白,但我告诉你echarts就是基于canvas)3.广告banner的动态效果非常适合用canvas制作4.canvas
2021-12-24 10:55:44
283
原创 react antd list用法
在这里插入代码片```import React, { useState, useRef, useEffect, useCallback } from 'react';import { PageContainer } from '@ant-design/pro-layout';import { Button, Card } from 'antd'import { FormattedMessage, formatMessage } from 'umi';import { AlipayOutlined.
2021-12-23 14:43:55
1413
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人