![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
邹田聪
精通vue全家桶,前端基盘框架搭建,组件封装。
记录自己的同时也希望能帮助到别人,学术浅谈,如有正解,望不吝赐教!
展开
-
Js数组常见函数,常见操作场景。
*此文章仅仅针对数组对象,纯数字数组太过简单,无需多说先声明3个数组,就以这3个数组为列,进行工作中常用的数组操作模拟1、多个数组合并concat结果: 2、数组去重filter+map结果: 3、数组排序,重写sort方法结果:4、两个数组取交集(两个数组都存在的部分)结果: 5、两个数组取差集 结果:原创 2022-11-23 10:55:07 · 230 阅读 · 0 评论 -
省市区3级联动公用组件,基于elCascader
这个没什么难点,就是找数据挺麻烦。我是直接拿的vant的数据。再通过一系列的js操作转换成了一个树结构的对象。,因为基于element的样式,所以这个对象里面基本都是他的原生属性。1、组件源码main.vue。此组件已上传至npm。原创 2022-11-14 22:27:13 · 623 阅读 · 0 评论 -
文件下载,公共组件基于XMLHttpRequest+blob
fileName(必传,看和后端约定,可以在response的header中返回文件名称)3、测试使用 testDonlad.vue,当挂载全局,或者打包上传npm之后,只需要。可以根据实际项目约定修改。requestType(请求类型非必传,默认get)封装成组件,多了一个element按钮的对象属性,这样一行几个字代码就能实现文件下载,岂不是美滋滋。集成element原生属性,参考自定义样式。params(请求参数非必传)1、组件源码 main.vue。采用获取配置文件的方式,原创 2022-11-10 23:32:19 · 846 阅读 · 0 评论 -
eltable封装,eltable二次封装进击篇
此版本集成了eltable自身所有属性,看起来更复杂,但是功能更全面。主要是一些eltable自带的功能。需传入4个属性tableData、tableObj、columnObj、pageObj将tableObj和columnObj分离出来,tableObj主要是一些eltable自带的功能非必传。其他三个为必传对象。原创 2022-11-10 22:28:43 · 265 阅读 · 0 评论 -
vue记录路由历史+el-scrollbar,实现路由历史标签化
tag点击事件,调用方法计算scrollbr宽度,计算tag宽度,计算tag距离left(左边)多少px。tag宽度+距离右边再加20px左右,如果大于scrollbr宽度,证明tag所在位置已经到了最右边,实现点击tag之后scrollbr跟随滚动。4、把scrollbar和tag封装成组件,通过点击tag,获取tag位置,并计算scrollbar和tag宽度,实现根据tag位置,scrollbar跟随滚动。初始化数据渲染完成之后,通过当前路由获取下标,实现初始化计算。拦截,每次路由记录到缓存。原创 2022-10-09 11:10:50 · 2597 阅读 · 1 评论 -
微信小程序下拉穿透(禁用整体页面滑动)
场景:弹出框内部需要滑动。但是滑动会触发整体页面的滑动效果,导致弹出框内部滑动无效禁用外部整个页面滑动效果, 但是弹窗内依然可以滑动。enablePullDownRefresh级别高于disableScroll。要先关闭全局刷新,disableScroll才会生效。全局配置:app.json"enablePullDownRefresh": false当前页面json"disableScroll": true,...原创 2022-05-30 18:05:45 · 830 阅读 · 0 评论 -
Springboot集成七牛云,实现文件上传
七牛云创建空间,阿里云解析这些都没什么好说的了1、引入maven依赖,就一个七牛云的 <dependency> <groupId>com.qiniu</groupId> <artifactId>qiniu-java-sdk</artifactId> <version>[7.7.0, 7.7.99]</version>原创 2022-05-14 14:40:25 · 577 阅读 · 2 评论 -
微信小程tree组件,无限递归
原理:没什么原理就是无限递归,组件引用组件本身,如果在有子级的情况下才引用。* 此处对递归原理不是很熟悉的需要注意一个坑,就是在对组件展开和关闭时候。只需要拿到当前坐标对数组对象直接赋值,并不需要去获取所谓的多维坐标数组。不管你的对象在总数组的第几层,他永远在当前数组的第一层1.1、tree组件:wxml<view> <view wx:for="{{treeArr}}" wx:key="index"> <view class="view_ red" data原创 2022-05-11 18:29:33 · 2822 阅读 · 4 评论 -
深入浅出Vue插槽slot与slot-scope
slot:分为默认插槽(没名字),具名插槽(有名字的)slot-scope:作用域插槽?为什么要用插槽,这玩意儿有什么用,一段代码一目了然父组件:<template> <div> <div>父</div> <son> 这个就是插入的内容 </son> </div></template>子组件:<template> <div> <原创 2022-03-24 18:28:30 · 2796 阅读 · 0 评论 -
手写简易版贪吃蛇
逻辑梳理:1、画格子。固定xy(两个数组)长度,采用数组坐标[ [ { food:false,snake:false}, { }, { } ],[ ], ] 得到一个装有对象的二维数组。2、点击开始游戏,使用随机数生成食物与小蛇。随机数最大值为当前xy的值。生成小蛇与食物即将对应坐标对象的food和snake属性改为true,且将当前坐标对象{ x:" ", y:" "} 存入单独的小蛇数组。3、监听键盘按键。←↑→↓(键盘按钮code,左:37,上:38,右:39,下:40)。按下之后....原创 2022-03-21 11:10:58 · 180 阅读 · 1 评论 -
css3动画,实现正方体旋转
思路很简单,大div里面放6个小div,小div使用绝对定位脱离文档流,3D转换加transform-Origin更改元素位置拼成一个正方体。最后使大div转动起来。<template> <div class="flex jc_c ai_c" style="height: 800px;"> <div class="max_div"> <div class="box1">1</div> <div class="box2"原创 2022-03-11 11:34:47 · 1191 阅读 · 2 评论 -
Object.defineProperty实现vue双向绑定。小程序全局变量监听
1、众所周知,vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变。这段话应该每个面试找工作的前端都背过。但是究竟是如何实现的,我个人按照个人理解,简单的梳理一下。input触发input事件 >Object.defineProperty set() 赋值>回调直接传入值 或者 调用更新视图方法,利Object.defineProperty get()方法取值我觉得还是直接看代码,...原创 2021-11-05 13:33:57 · 514 阅读 · 0 评论 -
微信小程序WebSocket 同时连接多个
1、正常连接1个情况写法应该是const matching = (obj => { //可以把这段代码直接放到page的onLoad中,或者自己定义一个事件 wx.connectSocket({ url: `wss://www.***.com` }) wx.onSocketOpen(function(res) { console.log('WebSocket连接已打开!') wx.sendSocketMessage({ data: JSON.stringify({原创 2021-11-02 14:30:36 · 4078 阅读 · 2 评论 -
vueX+sessionStorage实现数据储存
前言:vueX5个属性简述state:vuex的基本数据,用来存储变量geeter:从基本数据(state)派生的数据,相当于state的计算属性mutations:提交更新数据的方法,同步actions:提交的是mutations,而不是直接改变状态,异步modules:模块化vueX,里面每个对象都有完整的vueX1、新建sessionStorage.jsexport default { setValue(key, value) { if (typeof valu原创 2021-07-30 18:26:11 · 1206 阅读 · 0 评论 -
elementui form表单resetFields()不生效
1、问题出现原因,form表单复用。多次试验结果如下:1.1、先打开新增弹出框(没有值)再打开修改弹出框(赋值),resetFields()方法可以生效!1.2、先打开修改弹出框(赋值),再打开新增弹出框(没有值),此时resetFields()方法不再生效!不管新增还是修改,resetFields()方法都不再生效!哪怕你手动删除值,再次打开依然会存在数据!2、原因是这个初始值是在form mounted生命周期被赋值上去的,解决办法使用 $nextTick()方法。注意顺序,弹出框要..原创 2021-05-20 17:05:26 · 988 阅读 · 2 评论 -
css实现简单的电影院选座功能
实现原理:把每个座位看成一个对象,可以添加自己要的属性。每一行是一个数组,有多个座位对象。总数也是一个数组,包含多行。<template> <div> 请输入宽度: <el-input v-model="rows" placeholder="请输入每行个数" type="number" :max="15" style="width: 200px;"></el-input> 请输入高度: <el-input v-model="co原创 2021-05-19 15:06:37 · 3973 阅读 · 4 评论 -
深拷贝与浅拷贝
前言:在JS中,数据类型只有两种,基本数据类型、引用数据类型。对于基本数据类型来说,它的值直接存储在栈内存中。而引用类型,它在栈内存中只是存储了一个引用地址,而真正的数据存储在堆内存中。1、浅拷贝(及 = 赋值),= 赋值只是引用地址而已,顾名思义指向相同。所以任意一个引用对象改变,都会改变引用地址的值。 let objA = { num:1, } let objB = {}; objB = objA; objB.num = 2; ...原创 2021-05-10 14:43:23 · 90 阅读 · 0 评论 -
记录elementui自带bug
1、弹出框,遮罩层在上面在el-dialog里面加上属性::modal-append-to-body="false"2、弹出框使用el-col乱样式直接全局改样式:<style lang="less" scoped> /deep/.el-dialog,/deep/.el-dialog__header,/deep/.el-dialog__body,/deep/.el-dialog__footer{ overflow: hidden }</style&.原创 2021-05-08 14:29:24 · 399 阅读 · 0 评论 -
elememt form表单二次封装,elform封装,很全很详细
详解:element的form表单二次封装也很简单,写一个form表单你会发现不一样的地方只是form-item里面的组件类型而已。所以把form-item里面的内容可变化就行了。父级也只需通过一个数组(form-item里面组件类型数组),一个对象(form表单数据对象)控制就行了!为什么要多一个对象,是为了方便数据提交,以及数据验证。这次封装多加了el-col,也没有直接放进弹出框,是为了更加灵活可变!1、form表单代码(子组件)<template> <el-form :原创 2021-05-06 11:42:23 · 10187 阅读 · 15 评论 -
el-table封装,elementtable封装,eltable封装详解(含分页)
前言:个人理解所谓封装,就是把经常都要公用的东西,拿出来,可以多次复用。公用方法,公用页面都可以封装。其实封装也并不是有多难,思路也很简单,就是用JS来控制页面。页面动态性越强,组件越灵活,适用范围越广。就vue+element的组件封装而言,先把所有功能在子页面实现。然后把js里面的动态值,拿到父组件里面去传过来,就完成了,其中技术也就掌握父子组件传值而已。1、下面就是el-table的一个简单封装:<!-- @author Zou Tiancong@version 创建时间:原创 2021-04-09 18:23:36 · 12946 阅读 · 19 评论 -
flex实现最简单的div水平垂直居中
父级flex,子级margin:auto.parent_div{ display:flex; width:100px; height:100px;}.children_div{ background-color: red width:20px; height:100px; margin:auto;}原创 2021-04-07 14:20:20 · 118 阅读 · 0 评论 -
Vue项目基本优化
1、路由懒加载,这个基本上每个项目必须。2、Ui框架按需引入,也就是要用哪些组件引入哪些组件3、关闭Map文件的生成,没关闭的vue项目打包后就会有很多的.map文件。这些文件主要是帮助我们线上调试代码,查看样式。脚手架2是在index.js。脚手架3就vue.config.js里面。将productionSourceMap 改为false。4、使用cdn...原创 2020-04-17 07:26:01 · 276 阅读 · 0 评论 -
vue高级篇——vue router之NavigationGuards(导航卫士)
最近无聊,就更新个路由的导航卫士吧vue-router官方文档:https://router.vuejs.org/1、全局前卫——router.beforeEach看名字就知道啦,beforeEach在路由跳转之前触发。router.beforeEach((to, from, next) => { })to:要导航到的目标Route对象,简单点说就是到哪里去。...原创 2019-10-23 15:11:21 · 2752 阅读 · 0 评论 -
笔记,js动态对象名赋值
对于一个玩前端的java弟弟来说,确实应该补基础。这个问题今天扣了我2小时。很简单,vue中this点对象,属性名动态。看图就知道我想干嘛了。但是很明显对象点属性,直接给我新建了一个属性。翻了翻w3c才知道,这里应该用中括号。object[name] = value;...原创 2019-09-18 16:56:48 · 773 阅读 · 0 评论 -
vue-cli 3构建项目
vue-cli3以后对很多命令做出了改动,但是为了用户平滑过渡,依然支持vuecli2的命令1、创建vue项目,到要创建的目录,打开cmd输入命令:vue create 项目名然后选择配置,你可以选择基本Babel + ESLint设置附带的默认预设,也可以手动选择功能配置。(按上下 ↑↓ 符切换)2、我先选手动配置,手动配置也是上下符切换,a键全选,i键切换默认,按空格选中你要勾...原创 2019-03-19 09:37:53 · 793 阅读 · 0 评论 -
npm,vue-cli版本更新
npm 更新命令:npm install -g npmvue-cli脚手架更新命令:npm install -g @vue/cli温馨提示,node在windows是不能使用命令更新的,乖乖去重新下载吧!更新之后就迫不及待的准备新建一个项目,但是看上面截图,好像并没有成功啊!vue init 要求加载全局项,请运行npm install-g@vue/cli init并重试。字面意思...原创 2019-03-18 17:10:40 · 4236 阅读 · 1 评论 -
BootstarpTable在IE11的兼容问题
关于IE11,bootstarp table 不兼容报错SCRIPT438: 对象不支持“bootstrapTable”属性或方法这个是bootstarp table 的官方下载的最新地址:https://unpkg.com/bootstrap-table@1.13.4/dist/locale/1、bootstarp table无法兼容,最重要的原因是他的版本问题,很明显目前官网最新版 ...原创 2019-02-13 18:30:13 · 1826 阅读 · 0 评论 -
MUI中的picker默认选中Bug
MUI的picker默认选中的时候有个傻x的bug,这是用框架送的。在设置默认选中值,以及动态赋值设置默认选中值的时候。第一级可以成功设置默认选中,但是第二级和第三级,并不能设置默认选中。1、这是应该算是大家常规的赋值方法吧2、但是这样赋值,好像是随缘赋值,第二级和第三级随缘赋值成功与失败。3、经过N轮恶战,才发现居然是MUI自带的bug,属实是坑啊4、对,也就是设置了...原创 2019-02-28 14:34:41 · 759 阅读 · 0 评论 -
Vue-axios的安装以及使用
1、在当前目录下打开cmd窗口,执行 npm install axios 命令2、在核心文件main.js中引入import Axios from 'axios'//引入axiosimport Qs from 'qs'//QS是axios库中带的,不需要我们再npm安装一个Vue.prototype.axios = Axios;//使用AxiosVue.prototype.qs...原创 2019-01-16 10:56:42 · 588 阅读 · 0 评论 -
浅谈vue-resource和vue-axios的区别
可能有的人对vue-resource 和vue-axios比较陌生,也可能用到了都不知道。vue-resourcevue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,jquery的 $.ajax 能做的事情,vue-resource一样也能做到,而且vue-resource的API更为简洁。另外,vue-reso...原创 2019-01-16 10:49:59 · 2767 阅读 · 1 评论 -
深入解析Vue项目每一个文件夹及文件
这里对Vue项目的每一个文件以及文件夹做一个详解,下面经常编辑、修改使用的文件夹会加粗标红 1、build 文件夹: 里面是对 webpack 开发和打包的相关设置,包括入口文件,输出文件,使用的模块等。2、config 文件夹: 主要是指定开发和打包中的静态资源路径,要压缩的文件类型,开发使用的端口号。2.1、dev.env.js文件是开发环境的变量,npm run dev ...原创 2019-01-02 16:51:24 · 2757 阅读 · 0 评论 -
Node Js+Vue+webpack+ElementUI 框架搭建从零开始
*温馨提示,这是vue-cli 2的版本,vue-cli3 以后对很多命令进行了更改,若需要创建脚手架3以后的项目,请查看我另外一篇博客https://blog.csdn.net/qq_37346639/article/details/886549231、NodeJs下载及安装http://nodejs.cn/download/,下载完成点击安装安装时可以选择自己常用的文件夹,然后配...原创 2019-01-02 13:25:03 · 3210 阅读 · 0 评论 -
Vue编译报警告—eslint代码检测
Vue在编译时报警告,就是因为很多人在创建项目时开启了eslint检测代码。想了解eslint的可以百度,配置过于繁琐,且规范要求过高,不建议使用。只需要去build文件下的webpack.base.conf.js把eslint配置删除或者注释就ok。...原创 2019-01-04 17:37:00 · 1845 阅读 · 0 评论 -
前端js常用符号的区别
今天就帮大家理一理前端常用符号的区别。1、 ,和 ;逗号和分号。在js里面逗号“ , ”是用来分隔参数什么的。而分号“ ; ”是用来分隔语句的。2、=,== 和 ===等于,双等于,全等于。等于“ = ”表示赋值。双等于“ ==”判断值是否相等。而全等于“ ===”既判断值是否相等,也判断类型是否相等。3、" "和 ' '单引号和双引号 。双引号" "会去检索内容里...原创 2019-05-08 11:08:44 · 1174 阅读 · 0 评论 -
js将html页面转图片
可以使用html2canvas,实现在用户浏览器端直接对整个或者指定模块进行截屏。html2canvas其渲染成一个Canvas图片,能让用户保存为图片。html2canvas官网地址:http://html2canvas.hertzen.com/1、可以使用npm和yarn进行安装,也可以直接下载原生js导入。命令:npm install --save html2canvas ...原创 2019-05-24 18:05:32 · 2933 阅读 · 0 评论 -
vue-cookies,在vue中安装及使用cookie
npm官方示列:https://www.npmjs.com/package/vue-cookies1、使用命令安装:npm install vue-cookies --save2、main.js里面引用import VueCookies from 'vue-cookies'Vue.use(VueCookies)3、页面js使用this.$cookies.set('ke...原创 2019-06-10 17:28:00 · 5002 阅读 · 0 评论 -
elementUi可编辑table
因为项目需要,很多时候,其实都需要用到table在线编辑。另外本人比较喜欢写注释,所以就不做过多的解释了,下面就直接看代码(复制可用的)element-ui官网:https://element.eleme.io/#/zh-CN/component/table1、html代码<el-table :data="tableData" border style="width: 100%...原创 2019-09-16 16:18:37 · 738 阅读 · 0 评论 -
vue-baidu-map常用控件,功能
看了几天百度地图,才发现这玩意儿虽然不是很难,但是东西真的是太多了,根本学不完,所以就先把目前能用上的先看了一下。很多值也是动态可变的,大家也要多参考一下官方文档。vue-baidu-map官方文档:https://dafrok.github.io/vue-baidu-map/#/zh/index1、先来个最基本的搜索功能大家先看html,看不懂没关系,我在js里面写了注释,写的很清楚...原创 2019-09-11 10:56:58 · 3884 阅读 · 2 评论 -
vue封装axios
记得看总结,划重点,考试要考1、先封装axios,新建一个request.js。因为个人编码习惯,注释已经写得很清楚了,这个就不做过多解释了,直接看代码,import axios from 'axios' //引入axiosimport router from '@/router/router'//引入路由import VueCookies from 'vue-cookies' //...原创 2019-09-11 10:04:27 · 1674 阅读 · 0 评论 -
vue-baidu-map,vue百度地图
1、首先你得有百度开发者账号,然后再使用账号创建你要的应用列表,会生成一个sk码百度地图首页地址(注册开发者账号,有的可以忽略):http://lbsyun.baidu.com/Vue百度地图API文档地址(百度地图控件、覆盖物):https://dafrok.github.io/vue-baidu-map/#/zh/index如果不添加控件,覆盖物,等等。地图就只有地图,没有任何操作...原创 2019-08-27 14:56:15 · 678 阅读 · 0 评论