![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 64
井底的蜗牛
凡事预则立,不预则废。
展开
-
引用阿里图标库,不知道对应的图标是什么,可在本地显示图标ui,再也不要担心刚来不知道公司图标对应的是什么了
/获取 命令行里面的参数//node 文件 【iconfont.css的url】 【生成的文件的link标签对应 iconfont.css的url】//当前文件的路径//当前文件的文件夹路径//获取icon库里面的iconfont.json数据//获取名字mapi原创 2023-12-14 19:02:55 · 259 阅读 · 0 评论 -
企业微信消息模板通过中转页面(h5)判断跳转pc还是跳小程序
3、上面引用时按照开发文档中进行引用的,结果你会发现有问题,wx.agentConfig这个根本调不通,文档没有更新不能用这个,得用这个。7、wx.config和wx.agentConfig需要获取签名,他们两个获取签名都是要调接口去获取的,签名的接口都不同,这个得注意。1、在进行配置的时候得先引入引用weixin-1.2.0.js,并且必须线上引入,不能npm i XXX进行引入,public->4、请求签名传的url不能转义、不加参数;index.html中引用。原创 2023-08-10 10:57:02 · 1134 阅读 · 0 评论 -
el-table-column 合并列,切换表格显示,数据错乱问题
由于同一个页面需要通过lable进行切换显示不同的表格结果在切换的时候发现表格列错乱了。原创 2023-07-27 17:25:43 · 1048 阅读 · 0 评论 -
vue基于element-ui的三级CheckBox复选框(权限管理)
<!--菜单权限列表--><template> <el-scrollbar style="height: 90%"> <div class="menuList"> <el-row style="margin-top: 20px"> <div class="menuList-table"&...原创 2020-02-07 14:55:58 · 4001 阅读 · 4 评论 -
element-ui之表格相同数据合并,并可进行上下移动,删除相同模块
首先看效果第一个向下移动第一一个大模块整个向下移动使用的工具- vue- element-ui- 自定义的工具类MyTools完整代码- html<template> <div class="box"> <el-table ref="areaPointTable" :data="tableData" border @selec.原创 2022-05-19 15:10:28 · 1092 阅读 · 0 评论 -
vue 自定义月日历日程组件(MSchedule)
效果图组件的使用 日程内容可以自定义 状态对应颜色可以自定义 <MSchedule :list="plan" @handleDetail="handleDetail" @chooseEntireCard="chooseEntireCard" @changeMonth="changeMonth"> <template v-slot:card="{row}"> <span>时段:{{ row..原创 2022-02-11 18:05:25 · 5541 阅读 · 13 评论 -
vue 自己捣鼓周日程日历组件(WSchedule)
需求:想要一个周日程表,记录每天的计划,点击可查看详情。可自定义时间段通过后台获取时间段显示分析:通过需求,我联想到在大学期间就用过超级课程表app这款软件,其中课表和这个需求很像,只不过这个需求第一列的时间段是自定义的,不是上午下午两个,但是原理都差不多 原本想找一些第三方插件使用,由于时间充足,而且自己也想封装成一个组件方便以后或许会碰到类似的需求,于是自己手动写了一个日程日历。效果如下:自己写的肯定有不足的地方,如有问题请大佬们提出,进行改进npm包 使用文档npm i w.原创 2022-02-10 17:36:29 · 6786 阅读 · 31 评论 -
自己捣鼓日历选择组件(类似el-calendar)可以单击选则不同日期,也可范围选择日期
日历选择原创 2022-02-09 18:31:46 · 4400 阅读 · 20 评论 -
vue canvas手绘签名
公司业务想要在手机端搞个签名需求,我想到钉钉上请假有个签名,然后就在网上找了一下发现都是用canvas来绘制的,也有用 vue-esign,其他的我逐一试了发现,能实现但是感觉和钉钉上的签名差点东西,钉钉在签名时如德福般丝滑,网上的总感觉会有些卡顿,这获取就是大佬吧;技术有限我也只能尽量做到和钉钉类似,还是有很多缺陷,页面感觉不是那么清晰,这个问题还有待处理上代码<template> <div class="myBrush-container" ref="myBrus原创 2021-11-15 18:57:13 · 750 阅读 · 0 评论 -
表格树进行条件查询(前端处理)
我们将学过的东西忘得一干二净时,最后剩下的东西就是教育的本质。什么是剩下的东西,其实就是自学能力,更是举一反三或者无师自通的能力效果展示最近公司需求 需要做一个任务分配的功能(已完成点击这里),由于可能分配的太多不太好找某一个任务就想做一个列表展示,通过搜索进行查询,好家伙对树的数据进行筛选查询当时就想好麻烦,就想着我试着搞一天,如果可以就不用后端去搞了,搞了一上午毛都没有想到脑瓜子又嗡嗡了,去厕所释放一下,既然element-ui表格可以单条件过滤,那是....原创 2021-10-09 12:10:48 · 2167 阅读 · 3 评论 -
使用D3js 实现进行任务分配效果
不会抓妖的小道士的故事有个从来抓不到鬼的小道士,他终于还俗了,在他婚礼的那一天,他的师兄弟没有一个到场,可是全城的鬼怪都聚集在了婚礼上空,想为这个总是心肠很软、碎碎念、很唠叨,最后娶了个小狐狸的这个家伙当一道劫雷,可是那天,晴空万里,什么都没有发生;言归正传 首先看效果该效果使用的是D3js+vue2进行使用时 注意事项 D3js版本不宜过高 否则会报错 出现无法移动现象 使用"^5.16.0"版本 由于我使用了load-scss 如果自己安装无法启动可以使用我的原创 2021-09-05 22:34:42 · 438 阅读 · 0 评论 -
vue2中的一些实战技巧之如何创建小型仓库store类似于vuex
小项目还用Vuex?vue2使用Vue.observable手写一个状态管理吧,vue3直接使用reactive手写store为什么用这个,首先想要手写仓库,那么你使用的数据就必须是响应式数据,不然你改变了,页面却没有改。而Vue.observable和reactive都是把数据变成响应式的方法故vue2的做法是import Vue from 'vue'export const store=Vue.observable({ userInfo:null,})// 定义 mut原创 2021-06-08 22:22:31 · 470 阅读 · 0 评论 -
vue中的一些实战技巧之如何监听钩子函数
hookEvent1. 内部监听生命周期函数this.$once/$on('hook:钩子函数',callback)在绘制canvas的时候去监听窗口的大小来设置画布,下面代码乍看是没什么问题?在我们刚用的人觉得无伤大雅(悠然见南山);在他们哪些大佬面前(一览众山小),这样写不是很好,应该将监听resize事件与销毁resize事件放到一起,现在两段代码分开而且相隔几百行代码,可读性比较差<template> <div class="home"> <原创 2021-06-07 22:24:10 · 712 阅读 · 0 评论 -
vue自定义指令之手写v-loading指令
先看效果自定义加载效果的loading指令为什么不创建一个组件来加载loading效果: 麻烦你得先引入组件,注册挂载组件,然后在通过v-if在空子显示隐藏 为什么要用自定义loading指令: 由于项目中很多地方需要用到,在哪个元素或者组件直接使用v-xx就可以了方便 不过前提是需要用到的地方多,不然要么不用,要么不要在全局注册,局部注册就行 如何定义首先得了解自定义指令的钩子函数bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。原创 2021-06-07 16:56:04 · 2241 阅读 · 3 评论 -
纯js手写一个element的弹窗,方便修改自己想要的样式
由于每次修改element的弹窗样式颜色觉得麻烦,于是就想着自己搞一个,想怎么玩就怎么玩,开干,走起1、首先创建div 2、给div添加内容 3、把div放入页面中显示 4、添加样式 5、添加事件 6、完成移除添加的div一、如何创建div,使用document.createElement const div = document.createElement("div"); div.innerHTML = `<div >测试</div>`...原创 2021-05-29 15:36:15 · 1362 阅读 · 0 评论 -
vue中点击按钮函数中使用防抖,发现既然毫无效果,好家伙this也获取不到,如何解决请看下文超详细分析
结果 结果发现有用,不是代码问题,我就说嘛代码咋会有问题所谓的防抖函数就是一个闭包;它返回的是一个函数,然后你又去执行这个函数,如何解决闭包问题就是用立即执行函数 debounce返回的是一个函数然后里面执行就形成了闭包。问题就出现在这里 上面的防抖是否是相当于与下面的立即执行函数,由于每次触发点击事件都会返回一个新的匿名函数, 就会生成一个新的函数执行期上下文(称之为执行栈),所以就会防抖失效 对于大佬们提出来的this指向问题,我也试了apply,call方原创 2021-05-16 17:31:04 · 6681 阅读 · 14 评论 -
项目vite1.0升级到2.0打包遇到Some chunks are larger问题如何解决
打包项目过程中遇到警告 (想看结果,可以滑至底部)输出文件名字/static/vendor.9b5698e4.js 806.03kb/brotli:skipped(large chunk)Some chunks are larger than 500kb after minification.Consider:Using dynamic import() to code-split the application Use build.rollupOptions.output.manu...原创 2021-05-05 23:18:23 · 14922 阅读 · 20 评论 -
详解vue中计算属性与methods的区别
简单的回答1、既然计算属性computed都叫属性了,那么他就是可以当作属性来使用,可以修改;而method是当作方法来使用,它也可以获取值,只不过是return返回值2、computed有getter和setter进行赋值.而method不行;3、计算不行不能传值,虽然你在定义的时候看上去是方法computed(){},但是他不能像方法那样可以进行传递参数4、computed如果数据不变是可以进行缓存的,而方法不行只要是在页面中使用了方法,那么使用几次久会调用方法几次,而computer不原创 2021-04-24 17:44:30 · 4940 阅读 · 1 评论 -
vue中对组件的生命周期的理解
组件的生命周期简述过程实例被创建-->【beforeCreate】--> 注入-->【created】--> 生成虚拟dom树[VNode]-->【beforeMount】--> 生成真实DOM-->【mounted】--> 已挂载-->【数据改变beforeUpdate】-->重新渲染 已挂载<--【update】<--重新渲染 已挂载-->【beforeDestroy】--> 销毁组件-->【de原创 2021-04-15 22:34:15 · 171 阅读 · 0 评论 -
vue的数据响应原理
数据响应原理简单简述运行过程1、首先是传入原始对象,使用Observer,通过其getter和setter方法把数据变成响应式数据;2、在设置和获取数据时,在进行渲染时(执行render函数时)会产生一个watcher,用来收集谁用到了数据和谁改变了数据(收集的数与派发更新的数据这里统称为Dep),3、然后再把自己收集到的数据给Scheduler(调度器),调度器会把watcher给的每个数据添加到队列中去4、然后内部会把这些依次添加到nextTick队列中去(微队列中去);等同步代码执原创 2021-04-13 22:06:08 · 1088 阅读 · 10 评论 -
vue对v-model的理解
对v-model的理解’v-model即可以作用于表单元素,又可作用于自定义组件,无论是哪一种情况,它都是一个语法糖,最终会生成一个属性和一个事件 当其作用于表单元素时 vue会根据作用的表单元素类型而生成合适的属性和事件。例如,作用于普通文本框的时候,它会生成value属性和input事件,而当其作用于单选框或多选框时,它会生成checked属性和change事件。 v-model也可作用于自定义组件,当其作用于自定义组件时; 默认情况下,它会生成一个value属性和in原创 2021-04-13 22:02:36 · 614 阅读 · 0 评论 -
vue路由跳转问题,其他页面正常显示,刚创建的路由页面可以显示,但是刷新后页面空白问题
看似没用问题的路由,当使用this.$router.push({path: "/legalNotices"})时发现不能跳转,当我使用this.$router.push({name: "legalNotices"}),name时发现可以跳转了,但结果刷新页面,页面空白;其他页面的路由可以使用path跳转,就有那么几个不行;然后和其他路由的对比一下结果发现天大的坑,因为空格问题,无法识别路由path,最后把空格去掉,就可以正常显示了刷新页面也可以正常显示了...原创 2021-04-13 17:21:11 · 1294 阅读 · 3 评论 -
vue组件之间的通信有哪些
父子组件通信prop 父传子 event 子传父 style和class 父组件可以向子组件传递style和class,他们会合并到子组件的根元素中 attribute 父组件传递一下属性如【data-xx】,但子组件并没有声明这属性,这些属性也会附着在子组件的根元素上 但这不包括class和style,他们是被特殊处理 native修饰符 在注册事件时,父组件可以使用native修饰符,将事件组测到子组件的根元素上 $listeners 子组件可以通过$listeners获取父组件传递过来的原创 2021-04-11 14:08:52 · 98 阅读 · 2 评论 -
vue在封装axios时出现获取响应头时只有两个属性content-length和content-type
在封装axios时,想要获取响应头的authorizaton的值结果发现没有import axios from "axios";// 从本地缓存中获取tokenlet token = localStorage.getItem('token');let instance = axios;// 如果token存在,需要加上请求头if (token) { instance = axios.create({ timeout: 30000, baseURL:..原创 2021-04-06 21:01:11 · 3236 阅读 · 2 评论 -
vue动态路由,编程式导航,axios拦截配置
VueRouter_编程式的导航通过在 Vue 根实例的 router 配置传入 router 实例,$router、 $route 两个属性会被注入到每个子组件。$router路由实例对象。除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例 方法,通过编写代码来实现。$router.push与$router.replaced的区别$router.push是往路由数组后面添加一个['/a','/b']this.原创 2020-12-21 11:41:30 · 201 阅读 · 0 评论 -
vue不常用的指令v-pre,v-cloak,v-once,v-text,v-html
v-pre跳过元素和他的子元素的编译过程跳过没有编译的过程,加快编译如:<div v-pre> <p>这些元素</p> <p>不需要</p> <p>重新编译</p> </div>v-cloak解决闪烁问题,防止网速慢页面会出现{{msg}}的问题[v-cloak]{display:none;}<div v-clock>{{msg}}</div原创 2020-12-21 11:38:23 · 264 阅读 · 0 评论 -
el-switch遇到的问题:只要点了就会改变值的问题
为什么会出现这个问题?原因在于使用了v-model ,在我还没有点击确认隐藏时他就已经改成隐藏了,这不是我没想要的效果想要正常的效果就使用value就可以了原创 2021-04-01 17:04:02 · 1106 阅读 · 2 评论 -
vue使用keep-alive在列表中进入详情页中返回后在进入其他详情页面发现还是上一次的详情,被缓存了如何解决呢
直接写重点:使用keep-alive如果你想页面不仅刷新页面还保存原来的搜索内容,则是要使用activated生命周期函数,那么用在什么地方呢,你在哪个周期函数里面去调用api获取数据的,就把那个周期函数给替换成activated就可以了,一般都是在created和mounted中获取数据,就直接用activated就可以了...原创 2021-03-22 10:40:36 · 1317 阅读 · 0 评论 -
v-if和v-for为什么不能一起使用
为什么v-for和v-if不能能同时使用永远不要把 v-if 和 v-for 同时用在同一个元素上。 当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级所以vue会先循环所有数据在进行判断,影响性能如何解决这个问题,可以使用计算属性修饰符使用passive设置 addEventListener 中的 passive 选项能够提升移动端的性能2.3.0新增即使在触发触摸事件时,执行了一个空的函数,也会让页面卡顿。因为浏览器不知道监听器到底会不会阻止默认事件,所原创 2020-12-21 11:34:04 · 5138 阅读 · 0 评论 -
vue的nextTick方法原理与vue的小问题
什么是响应式,实时监听数据变化如何监听数据变化使用Object.defineProperty函数可以检测到数据变化具体步骤可自行实现更改数据后,页面会立刻重新渲染吗?vue更新DOM的操作是异步执行的,只要侦听到数据变化,将开启一个异步队列,如果一个数据被多次变更,那么只会被推入到队列中一次,这样可以避免不必要的计算和DOM操作。如果想要更改数据后,才去渲染页面,改如何操作使用vm.$nextTick或Vue.nextTick该方法会在页面重新渲染,DOM更原创 2020-12-21 12:03:24 · 288 阅读 · 0 评论 -
vue使用Object.defineProperty监听数据变化
什么是响应式实时监听数据变化如何监听数据变化使用Object.defineProperty函数可以检测到数据变化具体步骤可自行实现更改数据后,页面会立刻重新渲染吗?vue更新DOM的操作是异步执行的,只要侦听到数据变化,将开启一个异步队列,如果一个数据被多次变更,那么只会被推入到队列中一次,这样可以避免不必要的计算和DOM操作。响应式原理/** *对数组的方法重新定义 *防止污染原来的数组方法 */const oldPropType = Array.原创 2020-12-21 11:59:03 · 565 阅读 · 0 评论