vue
吴大大逛博客
身为菜鸟~我不骄傲qaq
展开
-
vue自定义指令directive实现接口请求转圈的加载效果
封装个自定义指令v-Loading实现接口请求前,调用元素在一直转圈的效果,当然ele-UI也有类似的组件,我们是为了实现下,避免有特殊的业务要求,不多说,上代码,先看效果。vue中配合jq实现的 jq比较少 项目中要是没jq的 可以直接把用到的一行换成原生的就行。还有个转圈动画的实现,去iconfont拿一个半圆的空心圆就行,具体怎么用自定义指令~就不说了吧,各位看官自行补充知识。该条为vue版本,后面封装个原生基于jq版本的。原创 2023-02-13 14:55:59 · 863 阅读 · 0 评论 -
vue自适应带圆圈的进度条实现#根据数量占比计算进度条长度#颜色可控
可以全局挂载–然后调用,这里的dom用了uuid当作id去渲染样式,不用担心互相影响,里面可配置。一些组件库例如ele的进度条实现只是简单的实现进度条样式,进度条的长度是百分比形式,未做到。去动态计算,这是我在这里要去实现的。原创 2022-11-15 09:53:17 · 1147 阅读 · 0 评论 -
vue命名式路由#render函数#es6箭头函数的柯里化
render中,如果不用h(createElement),就直接return后面写节点元素内容啥的就行,如果用了h,则return中要按照其格式严格执行。我这里再附上第二个参数的一些属性吧,第三个参数就是传递子节点元素:标签内部的html。createElement:h 主要是创建虚拟节点,render是将虚拟节点进一步处理挂载,,es6的箭头函数还能快速实现函数的柯里化,就不说了,自行研究。(h是vue里面默认的一种createElement简写方式),简单两句说下render的使用方法吧。...原创 2022-08-16 15:27:47 · 350 阅读 · 0 评论 -
js滚动条触底加载更多#js懒加载数据#步骤条布局懒加载
不浪费大家时间,兄弟们先看效果图,如果是你们想要的就看,不是想要的效果就去下家....这次实现的是步骤条式的懒加载效果,滚动条到底实现触发接口;说加载前先说下步骤条样式的实现思路,具体代码有点杂,有需要的可以留言dd思路div不浮动竖排排列,或者用flex布局的纵向轴,第一层的每个div上下紧靠这里不可以用magin-top和button,然后设置个border-left或者border-right样式,这时一条不间断长线就会形成,然后设置圆圈;cssless或scss。...原创 2022-07-28 10:54:06 · 1879 阅读 · 0 评论 -
js中的策略模式的概念和案例实现(表单校验的封装:单个数据和深层对象中全部属性的校验)
我靠,自己也有一年多开发经验了,竟然还不知道策略模式的概念–弟弟我属实太菜了。看了b站上讲解的视频–记录下js中策略模式的概念和案例实现并尝试实现个表单校验的函数封装策略模式的定义:定义一系列的算法,把他们封装起来,并且他们之间可以相互替换核心:将算法的使用和算法的实现分离开来样例一般是薪资等级的算法,这个网上很多,基本策略模式的讲解都是拿薪资等级的代码来说。截个图吧上方的代码片段不全,只是举个例子,网上特多=>薪资讲述策略模式看了下好像只是简单的概念,如果想深入了解策略模式,b站.原创 2021-08-12 14:29:00 · 115 阅读 · 1 评论 -
element的树结构功能菜单--初始化勾选状态选中--element的setCheckedKeys事件
做一个项目的功能菜单权限,用到了element的树结构。如下图所示:eg: <el-tree :data="menuList" show-checkbox default-expand-all node-key="menuId" ref="tree" highlight-current @check="changetree" :props="defaultProps"></原创 2021-07-07 10:21:48 · 4551 阅读 · 0 评论 -
vue三级路由解读--及模块化路由导出
简介近期做项目需要用到vue三级路由的概念,踩了不少坑。看了不少网上的教程和博客还是有坑。记录一下。(PS:各位既然能看到三级路由–普通路由的基本知识就不带大家回顾了 )。先上代码:(代码的路由片段为我项目的路由,看思路,这是一个路由js文件,{}内的代表的是路由数组中的一个值,我这是模块化把路由分离出去了,不是完整的index.js的路由哈,知道思路就行了)。所有的icon为阿里图标库三级路由代码import Narbar from '@/components/HeaderNar/index.v原创 2021-04-09 15:30:20 · 720 阅读 · 0 评论 -
前端小白学习路径。及12大UI库
简介不管是刚接触前端的小白还是有些工作经验的前端人员来说,前端的技术栈真是个又大又杂的坑。一些技术可能长时间用不到自己都忘了。花点时间整理一下前端的资源和知识库。方便用到的时候直接拿链接。首先是一个学习路径,大概一个路子就是:基础学习HTML基础,css,js,js和UI库:jquery(js封装的一个库),echarts(图表可视化库),elementUI(饿 了么UI库,后台管理系统),bootstrap(着重响应式布局),layui(后台管理系 统),vant(移动端库),uview原创 2021-04-01 14:50:27 · 229 阅读 · 0 评论 -
vue--阶梯区间数据的监听--头尾数据实时同步
很早之前码的一个代码–记录一下。做阶梯区间的一个功能,发现做好容易,要增加客户的体验感有点不容易,前后上下input数据不能不一致。不能断层填写。截图说明:如上图所示,比如两个2的input。我填写了上面的,那么下方的input就要同步改变,数据不同步改变就会导致区间不能连贯的闭合起来。这里用了input的实时触发事件,然后改变上(下)一层的数据(看思路就好,具体的数据不要深究)://触发input事件---修改上一级的upStairs值changeinputdown(event,index){原创 2021-03-09 16:18:42 · 359 阅读 · 1 评论 -
element-输入框实时搜索展示列表-js-filter事件传参
现有产品有实时搜索展示数据,采用了element的el-autocomplete,最后效果如图上标签代码:<el-autocomplete size="mini" class="inline-input" v-model="keyword" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" ></el-autocomp原创 2021-03-09 15:43:00 · 572 阅读 · 3 评论 -
element表格table进行单选操作
标签代码–其中有个函数 @selection-change="selectstation"还有个ref=''<el-table class="th-bg" max-height="380" :data="allstation" ref="listTable" @selection-change="selectstation"> <el-table-column type="selection" width="55"></el-table-原创 2021-03-04 17:34:10 · 2692 阅读 · 4 评论