vue
前端小懒虫
这个作者很懒,什么都没留下…
展开
-
vue 2.x项目图标管理(选型,优化)
1.问题:前端项目小图标如何处理才是最优解? 我们都知道web项目图标可以是png,jpg等形式,我们前端人员可以用设计图上面下载这几种格式。那我们的项目应该采取什么格式的图片比较好呢,那就要比较这几种图片展示形式的优缺点。 图片格式优缺点:https://blog.cs原创 2021-07-01 18:26:29 · 408 阅读 · 0 评论 -
vue实现点击外部区域关闭下拉框,弹出层等操作
先上图:(录屏看不到鼠标点击位置,自行复制代码跑,环境vue2.x+iview)描述需求:有一个下拉菜单,是通过点击按钮弹出的,再次点击按钮获取点击外部区域(除下拉菜单列表的区域)下拉菜单关闭。实现思路:1.点击按钮改变下拉菜单显示和隐藏的变量的状态2.点击外部区域,判断所点击的区域是否点击在外部,可通过判断点击区域是否在下拉菜单列表区域,是,则不是外部区域。不是,则是外部区域,修改隐藏下拉菜单变量的状态。代码:<template> <div> <D原创 2021-04-17 14:41:34 · 2456 阅读 · 0 评论 -
vue 3.x 插槽v-slot升级table组件
1.需求:iview的table组件提供了自定义列模板的方式,使用slot-scop,结构出我们需要的数据项,极大方便了我们的开发,现在我们用vue3.x的v-slot来升级这种自定义列模板的写法。2.子组件,slot上命名每一项的数据的name,并定义属性传入对应的数据项<template> <ul> <li v-for="item in data"> <slot :name="item.slot" :row="原创 2021-01-27 19:23:41 · 3199 阅读 · 5 评论 -
vue 3.x 新特性teleport
遮罩层,模态框等第三方组件的常常是默认组件放到body下面的,这是为了避免父元素的样式对其产生影响。但是在实际应用中,我们可能也需要不放在body里,方便样式修改和组件化。我们来看看第三方的组件库如何做的。原创 2021-01-26 15:15:57 · 917 阅读 · 0 评论 -
vue 3.x customRef实现响应式变量防抖
1.编写防抖函数function useDebouncedRef(value,delay=500){ let timeout=null //customRef 参数是一个工厂函数,返回get和set方法 return customRef((track,trigger)=>{//track,trigger用来监听追踪和触发依赖的 return { get(){ track()原创 2021-01-25 10:10:01 · 276 阅读 · 0 评论 -
vue 3.x 组件实现双向绑定
1.子组件获取props和抛出update:text事件<template> <div> <van-cell-group> <van-field v-model="text" label="文本" /> </van-cell-group> </div></template><script>import { ref, watch } f原创 2021-01-23 19:09:51 · 5593 阅读 · 3 评论 -
vue 2.x 在组件中使用防抖
1.声明防抖函数 Debounce(fn, t){ let delay = t || 500; let timer = null; return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, arguments)原创 2021-01-23 14:50:21 · 906 阅读 · 0 评论 -
vue3 watchEffect防抖优化请求
代码:<template> <div> <input type="text" v-model="keyword"> </div></template><script> import { ref, watchEffect } from 'vue' export default { setup() {原创 2021-01-19 14:59:15 · 789 阅读 · 0 评论 -
axios 请求处理参数空格,&等转译问题
方法一:自己写一个转译的函数,把&,空格等字符用对应的字符替换,具体替换如下特殊字符转译字符+%2B空格%20/%2F?%3F%%25方法二:用axios提供的配置paramsSerializer // 创建axios实例 import Qs from 'qs'; var instance = axios.create({ timeout: 1000 * 60,//请求超时 paramsSerializer: fun原创 2020-07-27 15:08:53 · 4801 阅读 · 0 评论 -
echarts tooltip(提示框)的某一项选中高亮状态
效果图需求:当有多组数据的时候,常常需要对比同一x轴的不同线上的点的数据,并且当数据组过多的时候,也就是线过多的时候,需要明确知道我们当前选中的线是哪条。解决方案:通过设置显示x轴的tooltip可以显示同一x轴点上面的各个线上面的数据,通过自定义tooltip和监听事件可以设置高亮当前鼠标悬停或点击的线对应的数据组。关键点:如何知道当前的点击或悬停的点与tooltip里面所有的数据点中需要的数据项对应起来,每个点都有一个坐标,通过对比坐标做判定即可。代码<template>原创 2020-07-26 09:33:42 · 4440 阅读 · 0 评论 -
vue 打开新窗口
----vue-router 如何在新窗口打开页面----标签实现新窗口打开:官方文档中说 v-link 指令被 组件指令替代,且 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 target="_blank" 属性的(tag=“a”),如下:新页面打开home页2、编程式导航:有些时候需要在单击事件或者在函数中...转载 2020-03-03 16:10:05 · 1313 阅读 · 0 评论 -
keep-alive,activated,deactivated
原文链接:https://www.jianshu.com/p/0272c0fe9392要点:1.当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。2.进入组件a时执行activated执行,离开时执行deactivated3.keep-alive内的组件,(被缓存的组件),首次仅加载一次created和mouted...转载 2019-09-28 00:22:03 · 282 阅读 · 0 评论 -
vue学习常见的问题参考篇
从事开发一段时间,发现自己的学习方式有问题,遇到坑解决的速度也比较慢,效率低,不仅仅是对新框架的源代码,文档不熟悉的问题造成的。更多的是没有去总结别人开发过程中遇到的问题,来使自己避免走更多的弯路,这样成长,学习起来更加的快。今后开始要常阅读别人遇到的坑来提升自己。https://www.cnblogs.com/ygunoil/p/9242167.htmlhttps://cloud.tence...原创 2019-11-19 05:27:54 · 169 阅读 · 0 评论 -
vue控制登录按钮禁用,背景颜色变化
先上图:想要实现的功能:当两个输入框都不为空的时候,登录按钮颜色高亮,并且可以触发点击事件,否则,登录按钮变暗,不能触发提交等等事件思路:登录按钮的颜色变化和禁用状态都是依赖于两个输入框的value值的变化,由于这种依赖关系,我们可以选择用computed和watch来监听两个输入框的变化,由于不需要经过中间状态,所以我们选用更简便的computed属性来实现主要代码:html:&l...原创 2019-10-01 22:53:56 · 5345 阅读 · 2 评论 -
vue+h5实现移动端拍照和上传功能
思路: <input type="file" name="file" capture="camera" @change="takePhoto($event)">可以调用原生的相机 <input type="file" accept="image/*" @change="takePhoto($event)" name="file">可以调用原生的相册然后就是获取...原创 2019-10-01 16:13:04 · 10304 阅读 · 5 评论