![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Javascript
JS前端
xishiinsz
喜欢学习JavaScript
展开
-
绝对的原创:echarts图表的tooltip也可以支持vue自定义组件,基于vue3.0
【代码】绝对的原创:echarts图表的tooltip也可以支持vue自定义组件,基于vue3.0。原创 2023-06-26 22:37:28 · 690 阅读 · 0 评论 -
使用Vue手写阉割版的五字棋(仅供参考思路和语法,本人不太会玩五子棋)
<template> <div class="wuziqi"> <div class="wuziqi-wrap" :class="gameOver && 'click-banned'"> <div class="wuziqi-row" v-for="(item, index) in list" :key="index"> <div class="wuziqi-cell"原创 2020-08-02 16:32:27 · 271 阅读 · 0 评论 -
element ui table组件的另类写法,支持固定多行表头
某个项目的特殊需求,首3行均是表头,且为冻结状态(即固定),左边第1列也是固定状态废话少说,直接上vue源码<template> <div class="el-table-wrap"> <el-table :data="tableData" style="width: 100%" height="400" border> <el-table-column fixed width="150" align="center">原创 2020-07-23 02:44:49 · 1958 阅读 · 0 评论 -
提取当前域的Cookie数据,并存储为对象数组结构
涉及数组的map经典用法, 不一样的数组解构用法, 精简的动态属性对象用法提取当前域名的Cookie数据let result = document.cookie, 获取到的数据结构如下"_ga=GA1.2.508865395.1567870094; gr_user_id=06e98b97-09a2-4889-9b94-42f01869a72e; _gid=GA1.2.195245427.1593880848; Hm_lvt_93bbd335a208870aa1f296bcd6842e5e=159388原创 2020-07-05 02:05:24 · 536 阅读 · 1 评论 -
分享一种比较“新型”的数组解构用法
假设有如下字符串, 现需要获取问号(?)前面部分字符串const address = "http://t.cn/A6PEMFTb?m=4468594668640673&u=2975378897"可使用数组解构形式, 看起来有点怪怪的let host = address;host = host.split('?');[host]= host; ...原创 2020-02-06 14:08:28 · 81 阅读 · 0 评论 -
数据处理业务场景分析
由对象组成的数组中,对象之键表示某个物料的编号,对象之值表示对应物料的单价,现在的业务需求是判断相同的物料的单价必须统一,如果不统一则给出提示并退出业务处理流程;let _arrItemPrice = [{'4323424':22}, {'4323424':22}, {'4323425':20}, {'4323428':22}, {'4423428':10}, {'4423428':10}...原创 2019-12-17 21:13:15 · 584 阅读 · 0 评论 -
【更多】动作组件的封装
适用场景在某些【操作】列里的选项过多时,一般都会启用“更多”功能import React from 'react'import { Menu, Dropdown } from 'tinper-bee';const { Item } = Menu;const style = { marginRight: 5, maxWidth: 100, overflow: 'hidden', dis...原创 2019-12-16 19:34:46 · 109 阅读 · 0 评论 -
旁观者清,当局者迷,摘录部分同事的JS代码,并以旁观者的角度重写之!
别人的代码list.forEach(v => {//判断跨分页是否选中 if(this.state.selectedMap.has(v.headPoolId)){ v._checked = true }else{ v._checked = false }...原创 2019-12-04 19:45:41 · 114 阅读 · 0 评论 -
2. 尝试使用React Hooks重写【倒计时】组件(Hooks版本)
/* endTime: 目标时间,格式为时间戳endTimeUp: 倒计时结束的回调 */export const CountDown = ({ endTime, endTimeUp }) => { const [day, setDay] = useState(0) const [hour, setHour] = useState(0) const [minu...原创 2019-12-03 16:57:08 · 2161 阅读 · 1 评论 -
1. 尝试使用React Hooks重写【倒计时】组件(Class版本,未完待续......)
已经运行于项目中的组件代码import React, { Component } from 'react'import './index.less'export default class countDown extends Component { constructor(props) { super(props); this.state = { day: ...原创 2019-12-03 16:21:43 · 386 阅读 · 0 评论 -
在由对象组成的数组中,以属性1来分组,以属性2来排序,其中属性2是单元格合并的参数
现成的数据结构如下const arr = [{id: 1, itemName: "物料1", bagCode: "B1", bagName: "包1", rowSpan: 2},{id: 2, itemName: "物料2", bagCode: null, bagName: null},{id: 3, itemName: "物料3", bagCode: "B2", bagName: "包2...原创 2019-11-30 22:16:57 · 107 阅读 · 0 评论 -
三元表达式 | JSX | 回调函数
今天还是首次在JSX的点击事件中使用三元表达式,而且式子还是回调函数,特mark一下 <Button onClick={ handleGoback? ()=>handleGoback() : ()=>history.go(-1) } className="u-button-primary" >返回</Button>...原创 2019-11-28 18:14:40 · 797 阅读 · 0 评论 -
想把项目截图并分享出来,但页面上有一些版权或相关隐私信息想去掉,怎么办?---自己动手、封装一个函数搞定它
/* 批量替换页面上的文本, el=接管页面元素范围 a=待替换的文本 b=替换后的文本 */ const changeText = (el,[a,b]) => { +function fn(nodes) { nodes && nodes.chil...原创 2019-11-27 01:27:20 · 145 阅读 · 0 评论 -
项目中遇到一个相对隐蔽的Bug小记
项目中的数据结构如下:const arr = [{id:1, supplierId:1000,supplierName:'供应商A',isInvited:1},{id:2, supplierId:1001,supplierName:'供应商B',isInvited:1},{id:3, supplierId:1000,supplierName:'供应商A',isInvited:1},{id...原创 2019-11-24 00:12:41 · 146 阅读 · 0 评论 -
在由对象组成的数组中,根据传入的属性名来去重(支持多重属性)
export const uniqByProps = (arr, ...props) => { const _arrTemp = []; if (Array.isArray(arr) && arr.every(item => Object.prototype.toString.call(item) === "[object Object]")) { ...原创 2019-11-21 21:14:33 · 132 阅读 · 0 评论 -
React 、箭头函数、bind、this小事记
今天在react项目中使用somefunc.bind(this)语法,但在somefunc方法内部,this却是undefined, 甚是郁闷!后来灵机一动,是不是箭头函数搞的鬼。立马将箭头函数变更为标准function函数,this立马指向了调用somefunc方法的实例环境。...原创 2019-11-20 20:59:12 · 412 阅读 · 0 评论 -
在 用友前端打包框架中启用Optional Chaining功能
1.npm install --save-dev @babel/plugin-proposal-optional-chaining 装包2. 在ucf.config.js全局配置文件中加入babel_plugins:["@babel/plugin-proposal-optional-chaining"]项3. 在VS Code的设置中, 配置 “javascript.validate.enab...原创 2019-11-20 00:24:05 · 576 阅读 · 0 评论 -
React Hooks 二次封装省市区街道4级联动组件
import React, { useState } from "react";import FormItemPro from 'components/FormItemPro';import { FormControl, Row, Col, Label, Button, Select, Loading, Modal} from "tinper-bee";import request f...原创 2019-11-18 02:06:38 · 1087 阅读 · 0 评论 -
关于在strict mode严格模式下无法使用arguments对象的替代方案
+function (params){ //匿名函数递归 params.forEach(item=>{ if(item.children && item.children.length) arguments.callee(item.children) el...原创 2019-11-16 10:33:00 · 2158 阅读 · 0 评论 -
React DevTools pre-release for Hooks | React Hooks可以在google浏览器控制台调试了(测试预览版)
具体参见React DevTools pre-release小技巧1. 导航至 :console-> Components, 见左侧的小小的放大镜图标,在此处输入组件名可以搜索并定位组件2. 导致至:console-> Components, 见右侧(默认停靠位置)的小小多脚虫,点击它可以将Hooks变量映射到 浏览器的console控制台中去,方便调试!...原创 2019-11-09 17:19:51 · 523 阅读 · 0 评论 -
Object.keys & Object.entries使用上的一些小区别
假定有如下格式的数据,目的就是配合使用Select下拉框组件渲染一个key为属性名,可见文本为属性值的UI效果。// 文件类型 选择框枚举 const fileTypes = { techfile: '技术文件', busfile: '商务文件', otherfile: '其他文件', }Object.keys与map配合 的代...原创 2019-11-09 16:18:42 · 569 阅读 · 0 评论 -
JSX、!!、&&的那些事儿
某个项目中使用了如下代码 , 代码中的arr是动态计算所得,预期是有值时则输出值,无值时则无须渲染。render() { const arr = [1,2,3]; return ( <div className='test-apps'> { arr.length && <d...原创 2019-11-09 11:53:49 · 436 阅读 · 0 评论 -
手写验证器(Object.entries与some的经典应用)
假设已有如下数据const data = {evaluationType:'', techScoreType:'', openBidType: '' }// 基本验证配置 const isLowprice = data.evaluationType === 'lowprice'; const validator = { evaluationTy...原创 2019-11-08 21:00:38 · 379 阅读 · 1 评论 -
如何快速抓取对象数组中某个属性的集合?
如何快速抓取对象数组中某个属性的Key的集合?输入数据格式如下 ,要求抓取operations之所有Key的不重复的集合, 形如[‘free’,‘close’]等。const data = [ {id: 1, label: '全部', billStatus: 'alldata', number: 0, pId: 0 }, {id: 2, label: '待提交', billSt...原创 2019-11-07 17:58:01 · 1599 阅读 · 0 评论 -
在数组arr中 间隔插入元素el
某项目要求输出这样的格式(含逗号) 供应商A, 供应商B, 供应商C输入的数据为 arr = [‘供应商A’, ‘供应商B’, ‘供应商B’] ,试了几个现成的API, 好像都无法实现,索性自己封装了一个通用方法。调用: arrIntervalInsert(arr.map(item=><span style={{color:‘red’}}>{item}</span&...原创 2019-11-07 13:06:50 · 737 阅读 · 0 评论 -
基于用友开源前端库、XLSX插件、React Hooks编写的文件导出组件
import React, { useState } from 'react';import { Button, Transfer } from 'tinper-bee'import PopDialog from 'components/Pop';import { Info } from 'utils'import moment from 'moment'import './index....原创 2019-11-20 11:35:07 · 734 阅读 · 0 评论