- 博客(155)
- 收藏
- 关注
RSS订阅原创 使用Vue实现CSS过渡和动画
可以看到，由于动画的时间比较长，所以过渡完了之后，动画依旧还在进行，如果我们想要达到两者相同的时间的效果的话，就需要制定一个标准：比如以时间短的为结束。/* 开始，结束规定动画的效果，这个必须要有，否则不生效 */有个问题：两个标签都是慢慢消失，慢慢出来，不是我们想要的效果。起别名的好处，引入第三方组件库，直接添加。属性就可以完成对应的动画，比如第三方的。另外离开的时候，也有对应的钩子。属性，表示过渡和动画的时间。/* 进入，开始 *//* 出去，结束 *//* 出场的开始 *//* 出场的结束 */
2024-04-02 21:13:23
1345
原创 web前端编辑器内容-完成属性设置的优化
对于业务组件来说，其属性是有很多的，如果把所有属性都平铺在页面上，就会非常长，而且想要更改其中的某些属性，可能需要向下滚动很久才能找到，对于UI的交互不是很友好，需要对属性的不同特性进行分组。改造前：改造后：CommonComponentProps一开始就是按照不同的属性进行分类的，所以比较符合我们的一个需求。首先，组件总属性分两大类：业务组件(独特属性)，通用属性(CommonComponentProps)将组件通用属性分类分多个小类： size，border type，shadow…
2024-01-21 22:07:15
641
原创 web前端编辑器内容-编辑器组件图层面板功能开发-锁定隐藏、键盘事件功能的开发
我们这一部分主要是对最右侧图层面板功能进行剖析，完成对应的功能的开发:每个图层都对应编辑器上面的元素，有多少个元素就对应多少个图层，主要的功能如下：图层和编辑器中的元素都是一一对应的，在editor.ts中，其实就是对应的图层，有对应的一些属性，对于不同的状态，我们来添加对应的标识符来添加特定的标识符来表示他的状态即可。最开始的样子进行锁定隐藏操作
2024-01-17 00:38:54
968
原创 web前端编辑器内容-HTML2Canvas 截图的原理
样式没起作用，原因是我们只添加的html，并没有添加样式，如果要做到一样，需要把样式也添加到svg中去，这就是htmlCanvas简单的原理。通过canvas.getContext(‘2d’)可以拿到canvas提供的2D渲染上下文，然后在里面绘制形状，文本，图象和其他对象。可缩放矢量图（Scalable Vector Graphics, SVG）,是一种可用于描述二维的矢量图，基于XML的标记语言。内部的原理主要是根据要截图元素的节点进行遍历，根据类型进行复制，添加样式，另外就是对于不支持。
2023-12-25 00:13:46
1456
原创 web前端编辑器内容-使用html2canvas获取截图，并处理一些问题
所以虽然我们中间的元素 css 尺寸是 375px，但是因为 Apple 是视网膜屏幕，所以使用了两倍于 css 尺寸的设备像素来渲染它，这就是最后图片尺寸为 750 px 的原因。这是因为我们页面上面的元素都是使用的是阿里云的oss，所以图片的地址会存在跨域的情况，htmlCanvas对于任何跨域的资源都不会做处理，所以就不会显示截图出现的背景图片。第二个问题是html2canvas获取到的截图在某些机型上面得到的宽度是750px，但是我们设置的宽度是375。第三个问题是有的区域出现了灰色黑色的区域。
2023-12-24 22:26:34
1929
原创 web前端编辑器内容-改进字体下拉菜单
前面说到我们可以通过面板配置来更新画布上面的一些属性，如果我们有这样一个需求：在右侧面板配置里面需要查看字体的样式效果我们应该怎么做呢？渲染的时候有两种方案：方案一使用tsx进行渲染，方案二：借助render函数桥梁，将vnode转换成真实dom。
2023-12-22 14:47:11
1226
1
原创 web前端编辑器内容-创建业务组件和编辑器基本行为
editWrapper组件就是为了隔离两个组件，方便后续的一些拖拽，拉伸，吸附的一些效果。编辑器主要分为三部分，左侧是组件模板库，中间是画布区域，右侧是面板设置区域。在父组件中接收change事件来改变stroe中的compoents的值。在component-list组件中循环渲染这个模板。当组件内的change事件改变后，组件内部会触发。右侧是使用表单的方式来更新元素的值。中间是使用交互手段来更新元素的值。左侧是预设各种组件模板进行添加。最终转换成出来的值是这样的。
2023-12-22 14:16:12
5028
原创 vue2.x源码刨析-new Vue的时候做了什么(手写简易版01)
在这里首先用child的属性替换掉parent的属性，其次使用策略模式，整合各个生命周期，这里将生命周期整合成一个数组，是因为如果我们使用了mixin方法，可能会存在一个生命周期被调用两次的情况。initLifeCycle方法，其中涉及到数据的更新引起dom的变化，模板的解析，主要用来处理这些东西。方法，这个方法可以解析模板中的数据，将响应式数据进行渲染，这个方法我在后面会主要进行分析。在实例化的时候，会对数据进行初始化，在初始化的过程中，会在Vue原型上面挂载上。方法极为重要，是整个响应式系统的核心。
2023-11-21 19:47:55
261
原创 如何在el-tree懒加载并且包含下级的情况下进行数据回显-02
nodesMap其实是一个对象，key是已经展开数据的id，value是node信息，所有我们的思路就是等数据加载完成(resolve调用结束)，此时reslove的数据对应的node已经生成，改变value里面的checked和indeterminate就可以实现多选，半选的回显，这里需要特别注意，一定要在reslove函数执行完成之后，在进行回显。方法是在root底层添加数据，形成层联关系，所以我们要在resolve方法执行后，进行回显，loadNode的第一个参数，实际上对应的源码里面的。
2023-11-19 12:27:17
1594
原创 如何在el-tree懒加载并且包含下级的情况下进行数据回显-01
进而不会多次执行resolve，进行下级数据查询，而是给用户一个标识----对于全选，半选的数据，将全选，半选的标识再去默认赋上，这样让用户一层一层的去点击。首次只加载初始化数据，全选，半选给出一个标识，让用户知道数据在哪些层级，手动去进行点击。的数据会被回显，不是下层好几级的数据都会回显，这是因为由于数据是懒加载的，下级，下下级，下下下级。的数据是未知的，所以只能做到其下一级。比如说我们默认回显的是总行的值，但是因为是包含下级的，所以总行。的数据会全部会被回显。这里的接口会被调用多次。
2023-11-18 18:49:52
2325
转载 VScode选中多个单词
重命名变量: 选中变量名后按F2转到变量名的定义处: 选中变量名后按F12同时选择多个单词: Alt + Click同时选择上一行 (Ctrl + Alt + Up) 或者下一行 (Ctrl + Alt + Down) 的相同位置：依次找出文中所有的当前选中的单词: Ctrl + D一次性找出文所有的当前选中的单词: Ctrl + Shift + L拓展性 (Shift + Alt + Right) 或者收缩性 (Shift + Alt + Left) 的选中文本矩形框的鼠标选择: 同时按住S
2022-06-25 02:14:05
2046
原创 使用vscode pull拉取报错： [rejected] (would clobber existing tag)
使用vscode自带的git拉取功能时报了一个错：> git pull --tags origin masterFrom .... * branch master -> FETCH_HEAD ! [rejected] ISO-FE-V1.0-TAG -> ISO-FE-V1.0-TAG (would clobber existing tag)解决方法：使用这个命令，强制刷新一下本地的tagsgit fetch -
2022-05-31 14:21:29
1364
原创 vscode按下ctrl键，点击鼠标别名跳转
众所周知，如果在webpack中配置别名，通过ctrl键加上鼠标点击，vscode是不能根据别名进行跳转的，这就造成了一个及其不方便的一个问题：查找文件的时候非常不方便，今天终于找到一种方法可以在vscode中实现别名跳转了首先在根目录下，创建jsconfig.json的文件， 这个是我项目的整体目录，这是我使用webpack创建的别名，新建的jsconfig.json路径设置{ "compilerOptions": { "experimentalDeco
2022-05-23 18:48:28
7999
4
原创 关于css中百分比的问题
还记得去年秋招的时候，我遇到一个及其刁蛮的面试官，各种装×，本来不想面了，到最后问了我一个css中的百分比问题，让我说一下定位，移动(transform/tranlate)，以及margin中的百分比都是相对于谁的，定位和移动我知道，但是margin却没使用过百分比，很少使用吧。于是，我直接傻傻的回答了margin没有百分比。后来我也没怎么review这段面试，但是这段面试却让我非常印象深刻，秋招面了这么多公司，见了这么多面试官，就这一个令我非常非常无语。不过话说，我在今天根据b站up主----极梦小屋的视
2022-05-22 16:21:19
461
原创 前端moment库时间戳转标准时间不准确的问题解决
做前端项目的时候，根据后台返回的一个时间戳，将时间戳需要转换成标准时间，因为项目中有moment这个时间处理包，而且moment对于时间的转换比较强大，可以根据特定的格式进行转换，最终将时间戳转换成年-月-日 时-分-秒这种形式，但是转换出来，发现时间不太正确，这是我做的一个demo，<script src="./moment.js"></script><script> console.log(moment(1653039480000).form.
2022-05-21 10:35:37
3392
1
原创 es6使用map方法改变数组中某一对象的值
const data = [ { name: "张三", age: 12, _check: true, }, { name: "李四", age: 15, _check: true, }, { name: "王五", age: 18, _check: false, },];data.map(item => { if(item._check) { item._check = fa.
2022-05-13 15:51:44
5141
原创 world页眉配置第几页共几页不连续
今天修改毕设格式发现在world页眉处配置第几个共几页不连续，有的显示不出来，后来无疑中看见了一个关于world中的分节符的操作。对于分节符是这样描述的：分节符对包含栏的文档特别有用，可以将其用于更改栏数，但不开始新页。我想会不会是加了分节符导致配置第几页共几页不连贯呢，于是取消了分页符，发现问题就解决了。word如何取消分节符设置？...
2022-05-09 00:32:25
403
原创 javascirpt 将扁平化数组转换成树形结构
后台返回两种情况的数据：一种是没有包含上下级关系，需要自己手动处理一下上下级关系，通过parentId或pid来判断上下级关系，具体代码如下：let list = { msg: "操作成功", code: 200, data: [ { deptId: 100, parentId: 0, ancestors: "0", deptName: "若依科技", orderNum: "0", parentName: nu
2022-04-29 17:56:06
313
原创 es6遍历数组，给数组里面的对象添加新属性
let array = [ { id: 1, name: "张三" }, { id: 2, name: "李四" },];let arrayNew = []array.map(item => { arrayNew.push(Object.assign({},item,{sex:'男'}))})
2022-04-29 17:47:19
2993
原创 javascript实现深拷贝：结合递归，for of，Object.entries()
const deepClone = (obj) => { let newObj = obj instanceof Array ? [] : {} for(const [key,value] of Object.entries(obj)) { if(typeof value === 'object' ) { newObj[key] = deepClone(value) }else { newObj[key] = value .
2022-04-29 17:43:02
1148
原创 遍历数组：使用Object.values，Object.keys,Object.entries结合for of遍历数组
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>对象.
2022-04-29 17:34:39
497
原创 react中使用svg作为字体图标,使用react-svg组件
公司一直使用svg作为字体图标，从一开始我使用svg字体图标的方式也是通过img标签引入的，直到最近公司做的业务有个附件预览需求是这样的：展示几种不同的样式，当预览的附件里面没有数据和有数据的时候svg图标展示的样式不一样，鼠标移入的时候，又展示不同的样式图标，一开始感觉就是把所有要展示的svg图标切出来就行了，但是后来发现有几种图标没有，如图，其中的模板有数据时，和鼠标经过-无数据悬停态的时候的svg图标没有，于是我和ui就去要了一下图标，但是ui说svg可以改颜色，并让我按照这个改下就行，不必要
2022-04-23 15:38:29
6127
原创 img中src引入svg,修改svg颜色
<div class="image"> <img src="1.svg" /></div>.image{ display: inline-block; overflow: hidden; }img{ position: relative; left: -80px; filter: drop-shadow(#ffffff 80px 0); }
2022-04-22 18:28:20
4053
原创 react mirror全局状态管理库
不同anctions里面的数据组合再一起：// 数据和组件UI关联、绑定export default connect((state) => { return { ...state.masterDetailOneNoticeTemplate, searchTreeId: state.treeCardtaxorg.searchTreeId, };}, null)(IndexView);这样在masterDetailOneNoticeTempla
2022-04-13 20:08:35
379
原创 js es6使用数组的every方法遇到的问题
最近在看js数据结构和算法的书，并且把书里面的案例敲了一遍，在集合这一章里面，在封装集合子集的时候是这样封装的，isSubsetOf(otherSet) { if (this.size() > otherSet.size()) { // {1} return false; } let isSubset = true; // {2} this.values().every(value => { // {3} if (!otherSet.has(value)) { //
2022-04-11 01:45:10
1704
原创 彻底搞懂git代码冲突问题----产生冲突以及解决冲突
首先说明一下，我是一名前端开发工程师，用的代码编辑器是vscode，这篇文章主要是讲解一下我在使用git中遇到代码冲突的一些问题。之前总是搞不懂使用git工具发生代码冲突的原因，而且我老是担心pull代码后，远程的代码会把本地的代码覆盖了，我写的代码要是被覆盖了，那不就完了嘛，所以我在提交代码的时候总是会备份一份，但是这样做也很麻烦，所幸看看git一些基础知识，并且自己在gitee上面建了一个仓库供自己使用。具体流程如下 首先在gitee或者github上面创建一个仓库 在gitee上面新建.
2022-04-09 02:21:37
25919
6
原创 error while loading shared libraries: libcurl.so.4: cannot open shared object file: No such file or
ubuntu报错：error while loading shared libraries: libcurl.so.4: cannot open shared object file: No such file or总的来说就是curl出了问题，没装。sudo apt-get updatesudo apt-get install libcurl4-openssl-devsudo apt-get install curl参考：小皮面板报错/usr/local/phpstudy/soft/
2022-04-08 00:04:33
5456
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人