sc0002的博客

原创 better scroll

<script> import BScroll from 'better-scroll' method(){ new BScroll('container',{ scrollY: true }) }</script>#container display flex overflow hidden .left-container position absolute bottom 0 top 224px voerflow hidden#c

原创 TS 定义数据类型

[key:string]:anyconst someObj:Record<string,unkown> = { name1:'zh', name2:'san'}unkown : 代表所有never : 有但不占位置null: 就是 null 占位置

原创 Object.keys()

Object.keys() 获取对象自身所有属性let obj = {‘a’: ‘123’,‘b’: ‘456’}console.log(Object.keys(obj)) //[“a”,“b”]

原创 flattern: Web展平；数据中心网络扁平化；打平

flattern: Web展平；数据中心网络扁平化；打平const columns = [{id:1, posts:[{id:'1_1'}]},{id:2, posts: [{id:'2_1'},{{id:'1_1'}}]}]

原创 vue中computed的 get与set属性

get : 给计算属性赋值set：值改变时触发 const inputRef = reactive({ val: computed({ get: () => props.modelValue || "", set: (val) => { emit("update:modelValue", val); }, }), error: false,

原创 js 双叹号 !!

const id = !!route.query.id 转换成 Boolean 判断id是否存在

原创 markdown-it

markdown-it是一个用来解析markdown的库，它能够将markdown代码编译为html代码。https://markdown-it.docschina.org/#%E7%94%A8%E6%B3%95%E7%A4%BA%E4%BE%8B

原创 css属性 object-fit

https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

原创 umi useLocation

import { useLocation } from 'umi';export default () => { const location = useLocation(); return ( <div> <ul> <li>location: {location.pathname}</li> </ul> </div> );};

原创 React.SetStateAction＜never[]＞

React.SetStateAction<never[]>

原创 css calc

height: calc(100vh - 228px);

原创 React.CSSProperties

React.CSSPropertiesReact TS css 类型

原创 TypeScript类型-Partial、Omit

Partial 类型的定义/** * Make all properties in T optional */type Partial<T> = { [P in keyof T]?: T[P];};interface IUser { name: string age: number department: string}使用Partialtype optional = Partial<IUser>// optional的结果如下type

原创 当前日期

Date.now() - Math.floor(Math.random() * 2000)

原创 e.target 和 this 区别

e.target 返回触发事件对象，this返回绑定事件对象<ul> <li>123</li> <li>abc</li> <li>00</li></ul>var ul = document.querySelector('ul')ul.addEventListener('click', function(){ //点击 li // 给ul绑定事件 this指向 ul console.log(

原创 js关键字 in 判断对象中是否有某个属性

var obj = {name: 'abc',age: 18}; if('name' in obj){ console.log('yes');} else { console.log('none');} //输出“true”

原创 .contains()判断一个元素是否包含另一个元素

它以HTMLElement为参数，且返回布尔值。<div id="parent"> <div id="children"></div></div>var parent = $('parent');var children = $('children')；console.log(parent.contains(children)) //trueconsole.log(children.contains(parent)) /

原创 pointer-events 阻止用户的点击动作产生任何效果

pointer-events: none阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态的变化触发事件阻止JavaScript点击动作触发的事件

原创 includes()

const nameFruits = ['a', 'b', 'c']; if (nameFruits.includes('a')) { // 执行代码 }

原创 flex 排列

// html<div class="playlist-container"> <div class="playlist-main"> <img src="" class="playlist-img"/> <div>内容</div> </div></div>// css.playlist-container{ display: flex; flex-wrap: wrap; jus

原创 push 获取数组长度 let a = [].push()；

let a = [].push(); console.log(a) // 0 let a = [1,2,3].push(); console.log(a) // 3 let a = [1,2,3].push(4); console.log(a) // 4

原创 css布局内容对齐 justify-content

.footer { display: flex; justify-content: space-between; align-content: center;}justify-content语法：justify-content: flex-start | flex-end | center | space-between | space-around

原创 antd-pro-vue

安装npm i ant-design-vue momentyarn add ant-design-vueyarn add moment

原创 vue-cli 引入 chart

父组件<template> <div> <Chart :option="chartOption" style="height: 400px" /> </div></template><script>import Chart from "../../components/Chart";import random from "lodash/random";export default { .

原创 map()、some()、every()、filter()的区别

map 通过指定函数处理数组中的每个元素，并输出处理后数组var numbers = [4, 9, 16, 25]; function myFunction() { console.log(numbers.map(Math.sqrt)); // Math.sqrt() 返回一个数的平方根 }输出结果：2,3,4,5some 检测数组中元素是否满足条件some方法会依次执行数组的每个元素；1.如果有一个元素满足条件，表达式返回true，剩余不再检测2.没有满足条件返回f

原创 数组递归查询

原创 组件通信 provide inject

原创 内置指令

原创 vue声明周期函数

临时变量

原创 compuetd vs watch

计算属性 computed减少模板中计算逻辑数据缓存依赖固定的数据类型（响应式数据）侦听器 watch更加灵活、通用watch 中可执行任何逻辑、如数据节流，ajax异步获取数据，甚至操作domdata:function(){ b:{c:1,d:2}, e:{ f:{ g:4 } }}//----------------watch:{ "b.c":function(){ } e:{ deep:true // 深度监听 监听e下所有数据变化

原创 vue-solt 插槽

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> &l

原创 Vue.component，click，事件修饰符

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> &l

原创 js 基础

变量类型值类型 vs 引用类型typeof 运算符深拷贝值类型 let a = 20; let b = a; a = 200; console.log(b); // 20引用类型 let a = { age: 20 }; let b = a; b.age = 21; console.log(a.age); // 21定义赋值变量计算—类型转换字符串拼接if 语句和逻辑计算...

原创 JSON Tree结构修改

JSON[{id: 22, parent: “-1”, text: “酒”}{id: 23, parent: “22”, text: “白酒”}{id: 24, parent: “22”, text: “红酒”}{id: 25, parent: “22”, text: “洋酒”}{id: 26, parent: “22”, text: “香槟”}{id: 27, parent: “22”, text: “药酒”}{id: 28, parent: “22”, text: “麦卡伦”}]重组

原创 ES6语法

剩余参数 const show = (a, b, ...c) => { console.log(a, b, c); }; show(1, 2, 3, 4, 5, 22);运行结果数组展开 let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr = [...arr1, ...arr2]; console.log(arr);运行结果json展开let json = { a: 15, b: 14 };

原创 数组添加键值

payload.Message.forEach((item: { key: any; InfoID: any }) => { const obj = item; obj.key = item.InfoID; });

原创 map修改josn数据

res.Entity.map(function(item, index) { res.Entity[index] = { 'title': item.Value, 'value': item.Key } })

原创 xlsx导出excel

cnpm i -S xlsx// 导出表格 const exportDataHandler = () => { const wb = XLSX.utils.book_new(); const jsonData = tableData.Message; jsonData.forEach((item: any, index: number) => { jsonData[index] = {

原创 moment() 获取当前时间

moment().format("YYYY-MM-DD HH:mm:ss"); //当前时间moment().subtract(10, "days").format("YYYY-MM-DD"); //当前时间的前10天时间moment().subtract(1, "years").format("YYYY-MM-DD"); //当前时间的前1年时间moment().subtract(3, "months").format("YYYY-MM-DD"); //当前时间的前3个月时间moment(

原创 umi+dva+antd

箭头函数const fn_name = param = { return { name:'msg' }} 简化 ↓↓↓↓↓↓↓↓↓↓ const fn_name = param = ({ name:'msg' })析构赋值const obj = { key1 :'first', key2:'1', key3:'last'}const {key1, key2, key3} = objconsole.log(key1) //firstconsole.l.