目录一、需求描述:二、问题阐述:三、解决方法:四、实现思路:主要逻辑详解:总结一、需求描述:在页面上点击按钮弹出选择电脑文件的界面,可以一次性选择多个文件一起上传到服务器上,并把上传成功的文件展示在页面上。二、问题阐述:el-upload是支持多文件上传的,但是是同步进行的,你点击上传按钮,选择了多个文件后点击确定,会同时调用上传文件的接口,这样很容易导致服 ......
29
0
0
2023-09-12
目录组件间传值的两个坑实例填坑坑一1. 发现天坑2. 填坑时刻坑2:1.发现天坑2.填坑时刻总结组件间传值的两个坑我们都知道父组件可以把值传递到自组件中,但是有时候子组件需要修改这个父组件传递过来的这个值,我们可以想象下能修改成功吗?这是坑之一。我们在组件间传值的时候,都是一个属性名对应一个值,接收的时候也是用这个属性名接收,那么每一个用户自定义的属性名都能 ......
42
0
0
2023-08-24
目录1.渲染组件2.组件的状态与自更新3.组件实例和生命周期4.props与组件状态的被动更新5.setup函数的作用与实现6.组件事件和emit的实现7.插槽的工作原理及实现8.注册生命周期1.渲染组件从用户的角度来看,一个有状态的组件实际上就是一个选项对象。const Componetn = { name: "Button", dat ......
52
0
0
2023-07-23
目录1、父组件传给子组件2、子组件传给父组件3、兄弟组件间传值4、路由间传值 i.使用问号传值5、使用$ref传值6、使用依赖注入传给后代子孙曾孙7、祖传孙 $attrs8、孙传祖9、$parent10、sessionStorage传值11、vuex总结不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种 ......
48
0
0
2023-07-20
目录前言:实现基础功能表格进一步定制化总结前言:对于一个业务前端来讲,工作中用的最多的组件我觉得大概率是table组件了,只要是数据展示就不可避免地用到这个组件。用久了就有点熟悉,就来锻炼自己的封装能力,为了更好的搬砖,封装table组件。首先,我们要思考我们封装一个怎样的表格,怎样的形式更加方便。先定一个大概目标,往前走,剩下慢慢去完善。一般来说,我们更倾 ......
73
0
0
2023-07-08
目录vue自定义实现Tree组件和拖拽功能vue2 + js版vue2 + ts 版总结vue自定义实现Tree组件和拖拽功能实现功能:树结构、右键菜单、拖拽效果图vue2 + js版/components/drag-tree/utils/utils.jslet _treeId =; /** * 初始化树 * @param {Array} tree ......
59
0
0
2023-07-02
目录一、组件化诞生的历史二、为什么业务组件越开发越难维护人的问题技术问题2.1 项目现状2.2 理想目标三、举一个实际的例子3.1 需求背景3.2 开发之前: 前端设计文档数据流向图目录结构逻辑控制拆分的原则3.3 受控组件和非受控组件3.4 开发进行: 逻辑变量和UI变量四、持续的优化五、可能的问题五、实践是学习前端的捷径总结组件化是一种思维的表现,这种技 ......
58
0
0
2023-06-28
目录组件生命周期创建阶段beforeCreate阶段created阶段beforeMount阶段mounted阶段运行阶段beforeUpdate阶段updated阶段销毁阶段beforeDestroy阶段destroyed阶段总结组件生命周期生命周期(Life Cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时 ......
51
0
0
2023-06-22
目录背景介绍使用方法源码分析背景介绍近期业务开发,会想起之前做的两个组件的通信,社区推荐使用一个迷你库miit (200b), 因为vue3开发中没有了 EventBus 跨组件通信,这个替代的方案 mitt.js,原理还是 EventBusEventBus在多个组件之间进行事件通信的场景下还是比较有用的,通过监听事件和触发事件,可以在订阅者和发布者之间解耦 ......
67
0
0
2023-06-22
目录前言思考实践定义参数定义一个开始函数核心方法配置项功能组件前言最近开发有个需求需要酷炫的文字滚动效果,发现vue2版本的CountTo组件不适用与Vue3,没有轮子咋办,那咱造一个呗。其实大多数版本更替导致公共组件不可用,最简单的做法就是在原版本的基础上进行修改调整,总体来讲花费的时间成本以及精力成本最低。思考先看下效果,明确需求,然后开始搬砖。明确基础 ......
82
0
0
2023-06-18
目录一、前端项目目录结构二、vue单文件组件格式三、js导入语法四、父组件和子组件五、父组件往子组件中传数据(组件属性)实现步骤六、子组件往父组件中传数据(组件事件)实现步骤:拓展总结一、前端项目目录结构二、vue单文件组件格式注意1: scoped表示对当前组件生效<style scoped></style>这个是设置组件中html ......
60
0
0
2023-06-17
目录基础用法禁用状态尺寸继承原生 input 属性可清空密码框 show-password带 Icon 的输入框文本域可自适应高度文本域复合型输入框总结源码地址本篇文章将为我们的组件库添加一个新成员:Input组件。其中Input组件要实现的功能有:基础用法禁用状态尺寸大小输入长度可清空密码框带Icon的输入框文本域自适应文本高度的文本域复合型输入框每个功能 ......
110
0
0
2023-06-15
目录前言1、 props / $emit2、ref / $refs3、eventBus事件总线($emit / $on)4、依赖注入(provide / inject)5、$parent / $children6、$attrs / $listeners总结1、父子组件间通信2、跨代组件间通信3、兄弟组件间通信4、任意组件间通信前言组件是 vue.js最强大的 ......
55
0
0
2023-06-12
目录前言1 悬浮窗1.1 使用display1.2 使用visibility(☆)2 全屏只能点击登录组件原理代码前言​ 本文整理了实现悬浮窗以及聚焦登录组件的功能。​ 为的是方便大家和自己的学习。​ 省流:可以只看1.2 和 2的代码即可1 悬浮窗现在各大流行视频网站的平台都在使用这种悬浮显示的效果,我就想这种东西是怎样搞出来的呢!几经尝试,终于找到了一个 ......
136
0
0
2023-06-11
目录计算属性监听属性组件介绍和定义父子通信父传子子传父ref属性动态组件插槽vue-cli计算属性计算属性关键字:computed每次页面刷新都会重新加载数据,而我们有时候退出页面再返回页面后希望保持原来选择商品的价格总价,这是就可以运用到计算属性:只有涉及到计算属性中使用的变量发生变化它才会重新运算<body> <div id="app ......
69
0
0
2023-06-10