- 博客(77)
- 收藏
- 关注
RSS订阅原创 规范化Git提交日志（Commitizen + husky + Git hooks ）
commit message 应该清晰明了，说明本次提交的目的，但是很多人在提交git信息的时候，为了图方便，大多都会简单的写一下，开发一时爽，维护火葬场。清晰且统一的提交风格，有利于团队的协作和后期的维护，本文分享了我们如何通过限制代码提交的规范。一、配置自己的提交规范// 安装commitizennpm install -g commitizen// commitizen根据不同的`adapter`配置commit messagenpm install -g cz-conventiona.
2021-12-06 19:42:48
1941
原创 vue源码解析
1、准备知识1、[].slice.call(lis)：将为数组转换成真数组（1）、什么是伪数组？具有length属性；按索引方式存储数据；不具有数组的push、pop等方法；例子：<body> <ul> <li>Vue</li> <li>React</li> <li>Flutter</li> </ul></bod
2021-05-24 22:23:48
159
1
原创 重学前端——HTML5（canvas）
文章目录一、canvas基本用法1、什么是canvas(画布)2、绘制注意事项3、设置宽高4、渲染上下文 getContext()二、canvas绘制矩形1、绘制矩形2、strokeRect时，边框像素渲染问题3、添加样式和颜色fillStylestrokeStylelineWidth4、lineJoin三、canvas绘制路径1、步骤2、绘制三角形3、绘制矩形4、lineCap5、save & restore一、canvas基本用法1、什么是canvas(画布)<canvas>
2021-05-21 16:04:53
283
3
原创 重学前端——HTML&CSS基础
文章目录一、基础概念1、软件架构2、网页的组成二、HTML1、标签2、元素3、 常见属性4、 注释5、doctype6、乱码7、meta三、CSS1、选择器2、选择器权重一、基础概念1、软件架构C/SB/S（1）、B/S中的B指的是browsers，是浏览器的意思，S值Server指服务器的意思（2）、B/S架构的软件一般都是通过访问一个网页的形式来使用的，而将一些运算等操作放到远端的服务器上（3）、这样就降低了对客户端的要求，我们的计算机上只需要安装一个浏览器即可使用。软件架
2021-05-20 12:46:22
149
1
原创 一个月纯 JS 挑战——JavaScript30（1）——纯 JS 模拟敲鼓效果
首先呢，给大家推荐一个很好的免费的JS学习项目——JavaScript30。JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。我是跟着github上的一位大神一点一点学习的，他每一个挑战都有详细的注释和讲解，不会学的一头雾水，但是主要还是要自己动手去写代码并且自己复习知识点呀。附上github地址：ht
2021-03-30 10:37:34
847
原创 ES6——属性的遍历
ES6一共有5种方法可以遍历对象的属性。let obj = { name: '佳音呀~', age: 18, like: '唱歌'}1、for…infor…in循环遍历对象自身的和继承的可枚举属性。for (const key in obj) { console.log('>>>>>key,', key); console.log('>>>>>value,', obj[key]);}// >>>
2021-03-29 13:34:10
310
原创 JS判断两个值是否相等的三个方法
1、相等运算符==缺点：会自动转换类型2、严格相等运算符==缺点：1、NaN不等于自身；2、+0等于-03、Object.is()ES6的“同值相等”（Same-value equality）算法。和=== 一样，严格比较，但是区别是：1、NaN等于自身；2、+0 不等于 -0...
2021-03-26 13:50:03
2553
原创 vue+ Ant Design Vue实现拖拽树形图
vue+ Ant Design Vue实现拖拽树形图，当前节点高亮；默认选中第一个节点；添加自定义图标；自定义图标居右
2021-03-18 14:47:58
4246
2
原创 vite.config.ts文件的配置
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], // 注册插件 server: { open: true }, resolve: { alias: { // 如果
2021-03-16 13:40:27
8066
原创 使用vite+vue3+antd+less搭建基础项目
1、项目的创建项目的创建在上一篇文章中已经讲过了。可以查看这篇文章vite+vue3.0创建项目这篇文章中关于最后的问题antd的使用，这里暂时不做解决，因为vite对于vue3周边的支持还不是非常好。我们暂时还在main.ts里引入antd的css文件进行使用。2、引入vue-router和vuexyarn add vue-router@next -Syarn add vuex@next -S配置main.tsimport { createApp } from 'vue'imp
2021-03-16 11:22:00
6858
2
原创 vite中引入less，修改组件样式
vite使用less报错[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead
2021-03-12 13:48:13
7317
原创 2021-03-03快速排序
快速排序：找⼀个标志位，先遍历⼀次，所有个头⽐他矮的，都站左边，⽐他个头⾼的，都站右边，遍历⼀次，就把数组分成两部分，然后两遍的数组，递归执⾏相同的逻辑let arr = [11, 4, 7, 5, 9]function quickSort(arr) { if (arr.length < 2) { return arr; // 递归结束的出口（没有这行代码的话会陷入死循环） } let left = [] let right = [] let flag = ar
2021-03-03 13:42:01
93
原创 插入排序
插入排序：插⼊排序逻辑和冒泡类似，只不过没采⽤挨个交换的逻辑，⽽是在⼀个已经排好序的数组⾥，插⼊⼀个元素，让它依然是有序的代码如下： let arr = [11, 4, 5, 7, 9] function insertSort(arr) { for (let i = 0; i < arr.length; i++) { for (let j = i; j > 0; j--) { console.log('>>>>>>比
2021-03-02 12:59:28
82
原创 冒泡排序
冒泡排序：挨个对⽐，如果⽐右边的数字⼤，就交换位置 ，遍历⼀次，最⼤的在最右边，重复步骤，完成排序。每一轮次比完之后，最大的都在最后一位代码如下：const arr = [11, 4, 5, 7, 9]function bubbleSort(arr) { let len = arr.length for (let outer = len; outer >= 2; outer--) { for (let inner = 0; inner <= outer - 2; in
2021-03-02 11:34:02
66
原创 element-ui表格样式错乱调整方式
在vue中封装了element-ui表格，然后使用插槽，fixed定位等，导致样式出现了错乱，以下提供几种错乱方式的解决方法1、线没有对齐在全局样式中写下这样的代码/* Element-UI 的table 组件出现表格线条不对齐的问题 */body .el-table th.gutter { display: table-cell !important}2、fixed固定导致的高度问题全局样式中写如下代码.el-table__fixed-right{ height: 10
2020-12-29 11:07:52
4474
原创 flutter实战20个小demo（02）——底部不规则导航栏
在开发的过程中，我们的需求是多变的，不一定底部的导航栏都是固定的样式，可能会有一些不规则的，这节课尝试一个不规则的底部导航栏。实现效果如下：1、首先我们了解一下，flutter的18中主题样本red,pink,purple,deepPurple,indigo,blue,lightBlue,cyan,teal,green,lightGreen,lime,yellow,amber,orange,deepOrange,brown,blueGrey,2、浮动按钮如何书
2020-12-23 18:43:51
374
原创 flutter实战20个小demo（01）——底部导航栏
从这篇文章开始，我准备新建一个实战合集，flutter实战20个小demo,记录自己学习这20个小实战的过程。首先，新建一个文件夹，flutterDemo20，在这个文件夹里将会是我们这20个实战的代码。首先，在文件夹下创建第一个项目flutter create demo01...
2020-12-21 16:17:35
1428
原创 React学习（五）——React Hooks（一）
一、React Hooks简介React Hooks就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式管理state，有Hooks可以不再使用类的形式定义组件了。与原始写法对比： 二、useStateuseState是react自带的一个hook函数，它的作用是用来声明状态变量。1、useState的声明useState这个函数接收的参数是状态的初始值，它返回一个数组。const [ count , setCount ] = useState(0);// 声明一个count
2020-12-10 22:17:44
341
原创 React学习（四）——redux(二)TodoList制作demo体验redux流程
1、获取store中的值在开始demo之前，我们先来复习一下，如何获取store中存储的数据1、在reducer.js文件中const defaultState = { inputValue : '我是store中的默认值',}我们有一个默认值，在别的地方获取时，有两个步骤：（1）、引入store文件import store from './store/index'（2）、使用store.getState()即可拿到所有的store文件，然后通过.key的方式就可以拿到需要的数据
2020-12-10 21:13:01
140
原创 React学习（三)——redux（一）安装与创建仓库
1、安装npm install --save redux// oryarn add redux2、创建仓库store是唯一的只有store能够改变自己的内容Reducer必须是纯函数 (纯函数：给固定的输入，就一定会有固定的输出，而且不会有任何副作用)1、在src目录下创建一个store文件夹,然后在文件夹下创建一个index.js文件。index.js就是整个项目的store文件。// src\store\index.jsimport { createStore } from
2020-12-08 22:02:32
217
原创 React学习（二）——React Router学习
1、安装npm install --save react-router-dom// oryarn add react-router-dom2、基本使用<Route path="/" exact component={Index} /><Route path="/list/" component={List} />exact的意思是精确匹配：路径信息要完全匹配成功，才可以实现跳转，匹配一部分是不行的3、路由上动态传值使用场景，列表页跳转到详情页的时候需要携带id
2020-12-08 19:13:06
102
原创 React 学习（一）——组件间传值
1、父组件向子组件传值子组件使用props接收父组件内：<Child fatherName={this.state.name}/>子组件内：constructor(props) { super(props);}render() { return ( <div>我是子节点，这是我从父结点拿到的值——{this.props.fatherName}</div> );}2、子组件向父组件传值（子组件调用父组件中的方法修
2020-12-07 21:33:58
162
原创 判断对象中每个值是否相等
今天在开发过程中遇到了一些阻力，查询资料解决了，觉得会经常遇到，记录一下，时间有限，粗糙记录。1、对象的操作，赋值，删除// 在操作对象之前，最好深拷贝一份，否则会影响原本的对象const cloneRow = JSON.parse(JSON.stringify(row))// 去掉对象中的某一个属性，比如去掉namedelete cloneRow.name// 2、对象的遍历// 获取对象row中的key组成的数组// Object.keys(row)// 获取对象row中的valu
2020-10-29 11:26:56
1364
原创 JS原生代码全选/全不选练习
最近在补学习js（前端小菜鸟js基础太弱）尝试用原生的js写代码，做了这样一个小的练习，记录一下。先看一下效果：实现的效果是，基础功能：点击全选/全不选的按钮或者是点击checkbox框，下面的四项都会被选中/取消选中，点击反选，会对四项进行反选。进阶功能：上面这些比较简单，一个稍微复杂的是，上面的全选/全不选的checkbox的框会同步下面四个选项框（四个都选则选中等等），具体可以复制一下代码看一下效果直接上代码：<!DOCTYPE html><html lang="en
2020-09-14 16:58:11
432
原创 vue3.0引入矢量图标，封装组件
一、在阿里粑粑矢量图标库选择图标并下载压缩包，解压后放在项目中二、引入css文件在项目的总文件（App.vue）或者是入口文件里引入（因为全局都要用到）1、App.vue@import url("./assets/iconFont/iconfont.css");2、main.jsimport "./assets/iconFont/iconfont.css";三、封装组件组件代码<template> <div :class="['iconfont', i
2020-08-13 21:57:06
609
原创 element-ui的树形图父节点选中子节点未选中（对懒加载之后的数据做处理）
需求是：某一个父节点下的所有子节点都选中，父节点不一定选中，但是父节点选中的，子节点都要选中。开始采用了父子组件不关联的做法，因为实现过程中有问题，具体看上一篇文章element-ui的树状图default-checked-keys默认却勾选了所有的子节点但是这种实现方式会造成父节点选中的情况子节点未选中，解决方式如下：1、这个是上一篇文章，评论里给的答复，没有尝试，但是按理应该可以2、自己写的比较麻烦的方式在loadNode的懒加载子节点的方法里，第一步let checkedKeys =
2020-08-12 18:36:22
1821
原创 Vue+Element中Table树形数据懒加载删除后数据动态更新
Vue+Element中Table树形数据懒加载删除后数据动态更新直接将参考的文章搬过来了截图如下，使用的是方法2，亲测有效，原作者棒！！！原文链接https://www.jianshu.com/p/85141cdad1aa
2020-08-05 15:43:35
3608
1
原创 vue页面拖拽改变大小
要实现这样一个功能，拖拽那条线，下面的上下内容分区的比例会改变，类似于我们打开了开发者工具拖动控制台的效果废话不多说直接上代码<div ref="topDom" class="containorOuter">上面</div><div id="line" ref="moveDom" class="dragLine" /> // 拖拽的线<div ref="bottomDom" >下面</div> mounted() { t.
2020-07-27 12:13:44
5196
6
原创 element-ui+vue实现懒加载的树形图选择器
在，开发的过程中，有这样一个需求需要选择资源，并且是多选，但是资源是放在文件夹里的，并且未知层数，因此需要树状图展示，并且树状图的选中的节点需要展示在select选择器的input框内实现效果如下代码：<el-form-item id="specialItem" label="资源" class="resource-select"> <el-select v-model="nodeForm.resourceList" multiple filt
2020-07-22 16:59:46
994
2
原创 vue监听页面快捷键（保存，复制）
1、createdcreated() { document.addEventListener('click', this.handleKeyClick) document.addEventListener('keydown', this.handleKeyDown) document.addEventListener('keyup', this.handleKeyUp) },2、methodshandleKeyClick(e) { if (e.target.c
2020-07-16 18:00:50
2546
2
原创 vue复制文本到剪切板
实现方式一、1、新建一个copy.js文件const copy = { executeCopy(textValue) { const input = document.createElement('textarea') document.body.appendChild(input) input.value = textValue input.select() document.execCommand('Copy') input.remove()
2020-07-16 17:40:54
434
原创 element-ui刷新当前树下的节点
需求：element-ui的数状图懒加载，对树状图中的数据进行添加和删除之后需要重新刷新该树状图解决方法：刷新更改的树节点下的子节点，通过loaded// 刷新当前节点下的数据（新增、删除树节点后需要用到） refreshNodeBy(id) { const node = this.$refs.tree.getNode(id) node.loaded = false // 主动调用展开节点方法，重新查询该节点下的所有子节点 node.expand(
2020-07-16 15:51:00
1911
原创 修改element-ui的Transfer组件无数据样式
废话不多说，直接说需求上代码默认穿梭框无数据的样式设计稿要求的样式修改方法：官方没有修改无数据默认样式的API，因此需要css修改默认样式加上背景颜色// transfer.el-transfer-panel .el-transfer-panel__empty{ height: 100px !important; line-height: 190px !important; width: 88px !important; background: url('../assets
2020-07-08 11:57:05
2577
6
原创 vue+echart图表自适应屏幕大小、点击侧边栏展开收缩图表自适应大小resize
开发中用到了echart图表，需要图表自适应大小resize,一开始使用的方法是：window.onresize = function () { this.myChart.resize();};但是又遇到一个问题，点击侧边栏的展开收起的时候，图表的大小没有自适应（因为窗口的大小没有变化）这里参考vue+element+admin的框架写的自适应一、index.vue的文件引入chart图表``这里是数据chartData: { title: {
2020-07-03 15:03:21
6410
2
原创 element-ui的树状图default-checked-keys默认却勾选了所有的子节点
在开发的过程中，有一个权限模块的需求，是需要更新分配的权限，因此需要在编辑的时候，将之前已有的权限默认先勾选上。页面是这样的，树状图是懒加载的。但是开发完成之后测试的时候，发现了很玄学的问题：每次只要勾选前两个，比如勾选oss下的wb_test3和A，再次点开编辑的时候，就变成了oss下的子节点是全选的了。bug复现：我打印看了一下默认赋给树状图选中的default-checked-keys的数组，发现没有问题，是两个id，但是为什么其他的都被选中了呢，太玄学了！后来研究了很久，我尝试打印了
2020-07-01 14:01:58
6996
5
原创 vue+element-ui实现搜索文字并高亮定位显示
首先看一下效果，定位到画布上的节点先上代码代码模块1// 搜索框html代码<el-input placeholder="请输入节点名称" prefix-icon="el-icon-search" v-model="searchNodeInput" @input="changeSearchNodeInput" @keyup.down.native="inputDown" @keyup.up.native="inputUp" @keyup.enter.native="inputD
2020-06-05 11:36:14
4336
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人