Vue
文章平均质量分 52
是小橙丶
正在努力的前端攻城师,一次次记录自己所遇到的问题,望各位大神多多指导
展开
-
element表格底部合计功能--给定的多维数组和键值获取函数,创建一个可查找特定键对应值的函数(JS自己写函数)
VUE原创 2023-08-30 14:59:16 · 982 阅读 · 0 评论 -
TS手写简陋版reactive响应式原理(依赖收集,依赖更新)
我们首先new了一个weakMap,weakMap只接受object的类型,target正好是一个对象,然后我们通过target获取到对应的内部Map,我们在通过key获取到Set的集合,此时内部存储的就是一个个所收集到的依赖。我们简单的可以就把他理解成一个依赖,用户使用了effect函数过后,里面的响应式数据发生变化后会重新执行传递进去的回调函数,vue2中收集的依赖对应watcher,vue3收集的依赖实际是effect,他们两者实现功能实际上是一样的。,然后去递归进行依赖收集,并不是直接像。原创 2023-05-31 15:09:55 · 5797 阅读 · 0 评论 -
前端自定义导出功能(轮子)不需要调用后端接口
导出工具类封装原创 2023-03-22 20:12:14 · 11515 阅读 · 1 评论 -
JS实现数组转换成树形结构数组(封装公共方法)
公共方法原创 2023-03-18 14:34:05 · 11252 阅读 · 0 评论 -
JS树形结构递归平铺转为一维数组
无原创 2023-03-16 20:09:53 · 12013 阅读 · 0 评论 -
关于iframe一些通讯的记录(可适用工作流审批,文中有项目实践,欢迎咨询)
审批流原创 2023-02-23 20:24:11 · 11189 阅读 · 0 评论 -
Vue.observable()的使用,小型Vuex的使用
让一个对象可响应,vue内部会用它来处理data函数返回的对象,返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器,observable()方法,用于设置监控属性,这样就可以监控viewModule中的属性值的变化,从而就可以动态的改变某个元素中的值,监控属性则通过返回一个函数给viewModule对象中的属性,从而来监控该属性。返回的对象可以直接用于渲染函数methods和计算属性computed内,并且会在发生改变时触发相应的更新。.....原创 2022-07-21 10:34:41 · 11521 阅读 · 2 评论 -
前端单张图片下载,批量下载图片成压缩包
各位铁子们,博主最近手撕了一个图片管理模块,效果如下图所示,其中有个下载图片的功能,包含了单张图片下载,以及多张图片批量下载成压缩包,认为很有意思,分享给你们首先我们需要引入对应的安装包如下 import axios from 'axios' import FileSaver from 'file-saver' import JSZip from 'jszip'下载功能主要代码如下//批量图片下载//this.currentChooseImgList参数是当前选.原创 2022-05-25 15:01:29 · 14286 阅读 · 6 评论 -
Vue项目设置Eslint规则
一、需求当我们创建完vue的新项目后,希望写完代码后会自动格式化代码二、Vscode安装插件安装 ESLlint、Vetur、Prettier 这三个插件。1.eslint在团队协作中,为避免低级 Bug、产出风格统一的代码,会预先制定编码规范。使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量2.Vetur这个插件主要作用就是让vscode识别.vue文件,实现语法高亮。3.Prettier它的作用是将我们散漫的风格迥异的代码格原创 2022-04-27 14:52:08 · 19431 阅读 · 0 评论 -
Element-Ui级联选择器递归显示某一级树形结构数据
博主遇到了业务场景有一次创建/二次创建时,当一次创建选择了对应的树形结构数据如下二次创建时需要回显第一次创建时选中的级联选择器的数据,级联选择器只显示该当前数据以及下级的树形结构数据 ,效果如下后端返回数据的结构如下图所示因此需要通过递归拿到对应的数据 ,递归算法如下//code 是后台返回你对应的code码 list是你原来的数组数据recursiveFindWarZone(code, list) { let findZone = null原创 2022-04-01 13:49:43 · 12856 阅读 · 0 评论 -
VbenAdmin(Vue)-- 下载文件功能(图片、MP3/MP4)点击下载、没有下载成功,反而打开了新窗口的问题
java web中下载文件时,我们一般设置Content-Disposition告诉浏览器下载文件的名称,是否在浏览器中内嵌显示.Content-disposition: inline; filename=foobar.pdf表示浏览器内嵌显示一个文件Content-disposition: attachment; //这里表示会下载文件两种解决方案:1.后端返回的照片url带上Content-disposition: attachment;2.前端自己拼接'?respon...原创 2022-02-18 18:17:17 · 12587 阅读 · 0 评论 -
vue3 VsCode的保存代码格式设定
{ "typescript.tsdk": "./node_modules/typescript/lib", "volar.tsPlugin": true, "volar.tsPluginStatus": false, "npm.packageManager": "pnpm", "editor.tabSize": 2, "editor.defaultFormatter": "esbenp.prettier-vscode", "files.eol": "\n", "search.原创 2022-02-09 09:28:46 · 11848 阅读 · 0 评论 -
解决vue3 Vben框架弹窗点击遮罩层不关闭的BUG
最近博主正在努力学习VUE3的开发,在开发的过程中遇到了Vben框架弹窗点击遮罩层不关闭的BUG,查了很多资料后,亲测如下找到这个对应的路径:\src\components\Modal\src\components\Modal.tsx1.在setup 加上 emit参数2.加上点击关闭的方法如const handleCancel = (e: Event) => { emit('cancel', e); };3.最后再把它return 出去,注意加上方法,如下...原创 2022-01-26 14:31:28 · 14642 阅读 · 5 评论 -
解决font-weight:600在安卓机不生效的方法
1 解决font-weight:600在安卓机不生效的方法 按照UI设计图给的 font-weight:600 直接设置,发现苹果机是字体是加粗的,安卓机没有变化,改成 font-weight:bold 就好了原创 2022-01-13 10:03:42 · 14330 阅读 · 0 评论 -
vue获取当前时间
data() { return { currentTime:'', },methods: { getCurrentTime() { //获取当前时间并打印 let yy = new Date().getFullYear(); let mm = new Date().getMonth()+1; let dd = new Date().getDate(); let hh = new Date().getHours(); .原创 2022-01-11 11:05:56 · 11561 阅读 · 0 评论 -
Android内嵌H5,安卓手机返回键点击无反应、苹果手机返回键正常情况解决方案
定义一个返回APP的方法函数如下:function backForApp(delta = 1) { if (getCurrentPages().length > 1) { uni.navigateBack({ delta }); } else { bridge.close() //第一个页面、无法返回上一页 只能回到APP }}接下来在你写的H5页面使用created() { window.refreshData = (res) =>{原创 2022-01-10 11:06:16 · 12666 阅读 · 0 评论 -
使用vuex实时更新右上角通知信息的红点数量
需求如图:因为这两个不存在组件关系,所以我们使用vuex来解决这个实时刷新1.首先在vuex的state定义数据如下原创 2021-11-18 15:46:14 · 16325 阅读 · 3 评论 -
Vue的监听属性Watch的详解
各位小伙伴让我们一起来了解Watch的一些用法,例子<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#sina', data: { firstName: 'Chen', lastName原创 2021-10-19 10:16:55 · 10681 阅读 · 0 评论 -
解决uni-app 输入框,键盘弹起时页面整体上移问题
1.发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize2.这个softinputMode属性在page.json文件中,找到需要修改的页面配置,在app-plus中找到softinputMode属性,uniapp中默认属性值是adjustPan,在pages.json里该页面注册的style里加上这段代码就能完美解决了"style": { //手机软键盘升起不让其将页面头部上推 "app-原创 2021-10-19 09:11:20 · 26149 阅读 · 3 评论 -
Uniapp(H5)判断软键盘是否唤起、关闭事件
记录一下每次因为软键盘弹起,而导致我们写的代码样式变形,或者出现一些其它的BUG性问题,此时都要根据是否软键盘弹出,去做相对应的判断,此篇文章就是判断软键盘是否弹起的一些代码记录,好了接下来进入正题1.先在data定义我们需要的参数defaultPhoneHeight:'', //屏幕默认高度nowPhoneHeight:'', //屏幕现在的高度2.在生命周期mounted做以下操作//监听软键盘获取当前屏幕高度的事件this.defaultPhoneHeight = win.原创 2021-10-14 14:40:15 · 14296 阅读 · 0 评论 -
最新的vscode中修改默认的终端为Git Bash
在windows下,我们有些npm项目需要执行bash脚本,如果每次都是从文件夹通过“Git Bash Here”打开的话,我们的效率会变得极其低,所以我们要将vscode的终端配置为Git Bash,我们之前的老版本直接在settings.json配置以下内容即可// "terminal.integrated.automationShell.windows": "",// "terminal.integrated.shell.windows": "自己电脑的bash路径"2021年6月原创 2021-09-06 09:29:32 · 11103 阅读 · 1 评论 -
使用vue-table-with-tree-grid的树形表格组件
我们平常在使用Element-ui组件库的时候,用的很多组件都能解决日常工作的需要,但是有时候也满足不了,比如属性结构的表格,此时我们就需要自己去找第三方组件来实现这个功能,铁汁们先让我们看看效果图如下:如何使用这个组件呢第一步:npm install vue-table-with-tree-grid第二步:在main.js引入import TreeTable from 'vue-table-with-tree-grid'Vue.component('tree-table',原创 2021-06-28 15:54:25 · 12396 阅读 · 4 评论 -
ElementUI 选择结束时间不能大于开始时间(可以选择同一天的时间段)
先上效果图template的模板下<el-col :span="5"> <el-form-item label="开始时间"> <el-date-picker v-model="startTime" type="datetime" placeholder="选择开始日期" format="yyyy/MM/dd HH:mm:ss" value-fo原创 2021-06-25 15:58:21 · 10265 阅读 · 4 评论 -
Vue+ElementUI Cascader级联选择器 省市区编辑回显(通过CodeToText,TextToCode辅助)
一、首先引入element-china-area-dataimport { regionData,CodeToText,TextToCode } from 'element-china-area-data'二、使用时的HTML结构<el-form-item label="地区"> <el-cascader size="large" :options="options" placeholder="请选择地区" expand-trigger="hover"原创 2021-06-22 12:05:32 · 22683 阅读 · 24 评论 -
vue3创建项目的两种方式
一、使用 vue-cli 创建## 安装或者升级npm install -g @vue/cli## 保证 vue cli 版本在 4.5.0 以上vue --version## 创建项目vue create my-project原创 2021-06-10 17:22:27 · 10213 阅读 · 3 评论 -
Vue中provide和inject 用法(vue组件爷孙传值)
1.概念 成对出现:provide和inject是成对出现的 作用:用于父组件向子孙组件传递数据 使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。 使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据...原创 2021-06-08 11:34:53 · 10031 阅读 · 1 评论 -
vue项目中字体自适应屏幕(使用px2rem插件)
1.为什么使用rem做适配?答:当你使用px做单位的时候,在不通分辨率的手机型号,他显示的大小就是设定的多少px,当手机尺寸大时,那么元素就会显得很小,当手机分辨率过小时,元素就会显得很大,因为我们引入rem单位,根据不通分辨率来做px适配,这样使元素大小更加合适。2.使用px2rem插件将px转为rem,书写的时候直接写px就可以,编译的时候会将px单位自动转换为对应的rem单位第一步:安装postcss-px2remnpm add postcss-px2rem第二步:在原创 2021-06-07 17:46:58 · 12521 阅读 · 4 评论 -
vue+elementUI组件table实现前端分页(后端接口没有做分页时)
背景:在现在这个盛行前后端分离的现状下,前后端都是各自负责自己的职责,在表格分页这一块,有时候后端未给你做分页,或者忘记给你做分页了,你就可以采用以下的方法自己对表格进行分页首先效果图如下:未作分页:做了分页后:看完效果图直接上demo:<template> <div id="app"> <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pag原创 2021-05-31 11:47:23 · 7307 阅读 · 5 评论 -
vue项目动态设置浏览器标题title两种方法
各位铁汁们,老步骤先效果图奉上方法一、使用插件vue-wechat-title来设置浏览器动态标题第一步:安装插件 1. npm vue-wechat-title --save第二步:在全局main.js引入、使用该插件 1. import VueWechatTitle from 'vue-wechat-title' //可以动态修改浏览器标题的插件 2. Vue.use(VueWechatTitle);第三步:在router中的index.js路由下设置mate属性const rou原创 2021-05-28 15:31:52 · 4968 阅读 · 5 评论 -
vue项目中回车键登录、登录密码是否可见、以及登录功能做防抖处理
在我们的登录页面,一般有个登录按钮,我们点击它然后才进行登录,但是站在用户体验上讲,体验非常不好,一般用户都是输入完账号和密码回车就直接登录了,以及一般希望在密码旁边可以点击查看自己的密码看见,输入的是否正确,接下来让我们先上效果图密码不可见的时候密码可见的时候分为三个部分呀一:回车键登录1.第一种方法在created()写上以下代码<script> created() { 回车键 enter点击登录 var _this = this; .原创 2021-05-20 17:05:11 · 2388 阅读 · 1 评论 -
vue实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)
今天研究了一个插件 列表自动滚动的插件vue-seamless-scroll感受这是个做大屏可视化时可靠帮手请欣赏一下效果图如图所示可以看到 它自动向上滚动 以及鼠标移动进入表格则停止滚动 这个使用起来也是非常的方便的,接下来我为各位老铁记录一下使用的过程1.第一步进行安装npm install vue-seamless-scroll --save2.在main.js直接导入使用import scroll from 'vue-seamless-scroll'Vue.use(..原创 2021-05-19 11:52:03 · 25178 阅读 · 13 评论 -
vue如何自定义一个过滤器
通过vue实例的 filters 属性或 Vue.filter() 函数创建过滤器,在值运算中用竖杠 | 表示过滤:过滤器(价格)<script><ul class="brands"> <li v-for="item in brandList" :key="item.id" @click="goBrand(item)"> <img :src="item.pic_url" alt=""> <h4>{{item.name}}</原创 2021-05-11 10:27:58 · 1449 阅读 · 0 评论 -
vue之this.$route.query和this.$route.params的使用与区别(有例子方便理解)
1.this.$route.query的使用params、query是什么?params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做paramsquery:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。首先我们先看看路由index.js的定义传参数如下:this.$router.push('/productdetail?id='+id) //注意这里路由没有带/:id 接收参数:co原创 2021-04-27 10:14:46 · 2177 阅读 · 0 评论 -
Vue父子组件之间传值、兄弟组件之间传值、子组件调用父组件方法(有例子方便理解)
组件之间传值原创 2021-04-26 17:50:25 · 1647 阅读 · 1 评论