- 博客(113)
- 收藏
- 关注
RSS订阅原创 前端代码规范
京东凹凸实验室前端代码规范 腾讯前端代码规范 百度前端代码规范文档 JavaScript standardstyle 风格指南 — Vue.js 阮一峰ES6编程风格 书籍：《代码简介之道》 Eslint代码规范检测工具
2024-07-31 15:38:29
275
转载 vue 可滑动的tab组件----vux插件tab的使用
原本vux的可滑动的tab是根据scrollWidth的长度来自动计算每一个tab-item的宽度的，因为包含这tab-item的tabBox这个div使用的是flex布局，而tab-item是它的子元素，它会自动沾满tabBox。当超出手机的可视宽度时,获取当前屏幕宽度，然后评分长度，计算之后，平均分给tab-item，因为每一个tab-item自己的样式中有设置的padding属性，所以间距相同，不需要额外为间距分配空间。1. 每个tab-item的间距是相同的，可定制。
2023-10-25 15:50:19
1048
原创 vue项目，程序控制台不报错，但是也没有达到预期
error里面不一定有msg，所以直接《error.msg.indexOf('cancelCache') > -1》就会报错，需要在前面再加一层判断：《error.msg && error.msg.indexOf('cancelCache') > -1》，这样程序就向下走了，至于为什么控制台不报错，我也不清楚。敲代码时，有时控制台不报错，但是也不如预期那样展示。
2023-10-25 15:35:47
490
原创 vue输入框axios请求传参undefined，自动过滤为空的参数
我门如果要传递值为undefined的参数，可以将该字段置为空字符串。参数中有值是undefined，传参时就自动过滤了该参数。
2023-04-26 12:04:47
1736
1
转载 ant design vue使用collapse默认展开全部；自定义切换图标expandIcon
ant design vue使用collapse默认展开全部；自定义切换图标expandIcon
2022-08-05 11:37:24
9821
1
转载 Vue组件实现数字滚动抽奖效果
以下我是根据该作者做的一点点得修改https://www.jb51.net/article/240059.htm<template> <div class="info-span04" style="color: #333333;"> <p @click="begin" style="cursor:pointer;padding:10px;border:1px solid red;display:inline-block;margin-right:10px"
2022-05-18 18:42:55
3577
原创 Iframe子父级传参
1，父页面给子页面（iframe）传参父级子页面（iframe）代码：// 父页面向子页面传递数据父级：<iframe id="ifm" ref="ifm" :src="interviewFeedBackUrl" frameborder="no" border="0" class="flexItem"></iframe>mounted () { // iframe加载完毕后再发送消息，否则子页面接收不到message this..
2022-04-20 16:34:33
4718
原创 这是一个CDN引入vue.js文件，httpVueLoader引用组件，不用webpack打包实现的vue demo
下载改压缩包，如果使用vscode编辑器，可以安装这个扩展，根据步骤打开就能展示（不能直接点击文件打开，路径不能是file://，需要是类似：http://127.0.0.1:7000/）免费压缩包，提供参考：链接：https://pan.baidu.com/s/1Md_XssZxWl8ubm5RHYuAlg?pwd=nfym提取码：nfym安装完扩展之后，可能需要重启vscode，根据情况而定即可然后在index.html文件中，就可以看到如图所示的图标和选项，选择你要打开的浏览器.
2022-04-13 18:40:05
1406
原创 点击触发其他dom元素：＜ $refs，$el ＞
要实现的效果是：点击图上的span，展示下拉框select结构展示：<div class="jobCon"> <a-select ref="selectCom" :value="jobIdItem.name" @change="changeStationName" style="width: 100%;opacity:0" :disabled="isNowOfferApproval"> <a-select-option :key="item.id"..
2022-01-21 18:31:07
821
原创 Ant Design 动态表单验证，手机邮箱二选一
效果图，如上图所示：手机号和邮箱未填写时，均提示必填，填写任意一个后，另一个动态不必填，然后提交代码如下：<template> <div class="position_box"> <a-modal :zIndex="120" title="修改候选人基本简历信息" :visible="editVis" @ok="handleOk" @cancel="editVis=false" :width="500"> <a-fo...
2022-01-10 15:02:01
2280
原创 Ant Design 表格：循环展示表头，表头添加图标icon
需求背景：用来统计房间里住户的信息实现效果：实现过程：表头：问题a，问题b，问题c，是从动态数据循环获取得到的，包括右侧的icon，和鼠标以上显示的效果：tooltip以下是代码实现：使用时，须引入Ant Design<template> <div style="margin-bottom:30px"> <div style="margin-bottom:20px">{{question.n..
2021-11-22 10:36:13
3122
1
转载 js对url进行编码和解码（三种方式区别）
*** 只有 0-9[a-Z] $ - _ . + ! * ' ( ) , 以及某些保留字，才能不经过编码直接用于 URL。***例如：搜索的中文关键字，复制网址之后再粘贴就会发现该URL已经被转码。1、escape 和 unescape原理：对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码。编码：escape('http://www.baidu.com?name=zhang@xiao@jie&order=1') 结果："ht...
2021-09-03 10:30:22
349
转载 （vue2.2.0以后的版本）Vue 子组件与父组件之间的 双向数据绑定
第一种：model作为属性的用法类型：｛prop?:string,event?:string｝参考官网API：model父组件<modelchild v-model="test"></modelchild>父的值{{test}}<button @click='fn'></button>……import modelchild from '@/component/modelchild'export default{ data(){
2021-08-19 18:18:36
126
转载 （VUE2.2.0以前的版本）Vue 子组件与父组件之间的 双向数据绑定
方法一（常规）父组件传递数据到子组件；子组件将数据转成本地数据props: ['name'],data() { return { iName: this.name }},但是此时，父组件如果更新了name 值，但是子组件中的 iName 不会随之更改；所以要监听父组件传入数据的变化，随之更新子组件；watch: { // 监听父组件传入的数据，更新到本地 name(newVal, oldVal){ this.iNa...
2021-08-19 18:05:17
161
原创 VUE递归引用自身组件
现在有一组数据，是json数组的格式，而且每个item里面都有可能有children，没有限制所以新建一个组件，用来递归显示，也就用到了自身组件按照百度的来说，引用自身组件不需要引用，只需要在组件中加上name这个属性即可...
2021-08-17 16:27:23
511
原创 Ant Design Vue ：使用日历Calendar，中英文切换
官网地址：https://www.antdv.com/components/calendar-cn/#API官网中这么说故，使用时，没做特殊设置，显示的都是英文中英文切换仅在App.vue中设置即可，当然还需要对中英文切换的识别，在此可以使用vue-i18n即可...
2021-05-12 19:07:46
2574
1
原创 引入echarts时报错： “TypeError: Cannot read property ‘init‘ of undefined“
导入echarts时，把import echarts from 'echarts'改成import * as echarts from 'echarts'安装 引入 echarts
2021-05-09 11:13:00
237
原创 css文字显示两行，溢出显示省略号，点击查看更多
效果图如下：初始化展示两行，超出显示省略号，点击查看全部，展示全部内容，点击收起，恢复初始化状态两行知识点：展示两行，用的css属性： display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:2; 利用clientHeight和scrollHeight的特性比较，来判断内容是否溢出摘自：https://blog.csdn.net/qq_35430000/article/det...
2021-04-20 15:11:59
10996
原创 leaflet+vue：格点图的实现大体步骤
这是色斑图的实现：https://blog.csdn.net/Crazy_GirlLL/article/details/109512629格点图的实现步骤和色斑图的实现步骤差不多，格点数据的格式是一个个包含经纬度，数据的对象数组下面是这个色斑图的具体代码在map组件里面：bus.$emit('loaded',this.id);初始化页面index.vue：将数据传给色斑图组件：Bus.$on('refreshPoint',(data)=>this.get...
2021-03-19 14:34:29
1141
1
转载 8张图让你一步步看清 async/await 和 promise 的执行顺序
转载：https://segmentfault.com/a/11900000172247998张图让你一步步看清 async/await 和 promise 的执行顺序为什么写这篇文章？ 测试一下自己有没有必要看 需要具备的前置基础知识 主要内容 对于async await的理解 画图一步步看清宏任务、微任务的执行过程 为什么写这篇文章？说实话，关于js的异步执行顺序，宏任务、微任务这些，或者async/await这些慨念已经有非常多的文章写了。但是怎么说呢，简单来说，
2021-03-16 16:15:11
540
1
转载 理解 JavaScript 的 async/await
2020-06-04 更新JavaScript 中的 async/await 是AsyncFunction 特性中的关键字。目前为止，除了 IE 之外，常用浏览器和 Node (v7.6+) 都已经支持该特性。具体支持情况可以在这里查看。我第一次看到 async/await 这组关键字并不是在 JavaScript 语言里，而是在 C# 5.0 的语法中。C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用，因此我还很悲伤了一阵——为了要兼容 XP...
2021-03-16 14:50:29
135
转载 js引擎的循环机制：同步，异步，事件循环
原作者：https://segmentfault.com/a/1190000012806637下面大部分是原作者的内容，有颜色的是我觉得原作者说的有点点不太对，自己的理解，有错欢迎指出深入理解JS引擎的执行机制1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout首先,请牢记2点:(1) JS是单线程语言(2) JS的Event Loop
2021-03-16 12:04:19
380
原创 知识点整理：es6
es6新特性特别promise封装axios，promise，setTimeout，fn,宏任务和微任务，回调地狱事件循环机制，promise的使用，
2021-03-14 22:16:19
122
1
原创 知识点整理：关于vue项目
1，vue-cli+webpack如何创建一个vue架子webpack2， 动态路由MVVM，MCV模块化设计模式和开发流程传值方式生命周期函数vuex的使用那5个属性的使用公共导出方法，创建a标签的方法？HBuilder完成微信分享的功能swiper.js滑动页面？虚拟domnexttick实现原理parent，child，调用子父组件参数？ssl服务器渲染用到过什么UI框架，优缺点，...
2021-03-12 18:10:35
363
1
转载 vuex：页面刷新之后数据丢失问题：vuex-persistedstate
插件vuex-persistedstatenpm install vuex-persistedstate --save引入及配置在store下的index.js中import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({ // ... plugins: [createPersistedState()]})存储到sessionStorage（cookie与
2021-03-12 16:52:49
342
转载 vuex的使用：state，actions，getters，mutations，mapState，mapGetters，mapMutations ，mapActions
转自：https://www.cnblogs.com/mica/p/10757965.html怎么安装 Vuex 我就不介绍了，官网上有 就是 npm install xxx 之类的。（其实就是懒~~~哈哈）那么现在就开始正文部分了众所周知 Vuex 是什么呢？是用来干嘛的呢？Vuex 是一个专为 Vue.js 应用程序开发的`状态管理模式`。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。例如：你有几个数据，几个操作，在多个组件上都需要使用，
2021-03-12 16:16:25
450
转载 Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)
今天我们来讲讲用后台传递路由表实现动态路由的思路，因为公司的项目里路有部分用到了vuex，我就把路由部分脱离vuex整理了出来，让大家有个启发，并不是绝对的解决方案，只是思路github:https://github.com/Mrblackant...在线查看:http://an888.net/antRouter/#/...思路整理以下四步骤对应的代码都在下方会讲到，并且是对应的1.后台同学返回一个json格式的路由表，我用easymock造了一段:动态路由表，大家可参考;2.因为后端同学传回
2021-03-11 15:00:21
1517
2
转载 Vue动态菜单(路由)的实现方案(beforeEach+addRoutes+elementUI)：前端写好路由表，根据后端返回角色实现
路由表写在前端，后端返回用户的角色，前端进行角色对应的菜单渲染在线预览：动态路由github(记的star哈):https://github.com/Mrblackant...开始之前，自己要大概懂写关于vue-router的beforeEach(路由拦截)、addRoutes,elementUI的菜单组件等方法，不然理解可能会有点吃力思路分以下几步：1.前端在本地写好路由表，以及每个路由对应的角色，也就是哪些角色可以看到这个菜单/路由；2.登录的时候，向后端请求得到登录用户的角色.
2021-03-11 14:59:07
1333
转载 关于webpack的面试题
问题一览webpack与grunt、gulp的不同？ 与webpack类似的工具还有哪些？谈谈你为什么最终选择（或放弃）使用webpack？ 有哪些常见的Loader？他们是解决什么问题的？ 有哪些常见的Plugin？他们是解决什么问题的？ Loader和Plugin的不同？ webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全 是否写过Loader和Plugin？描述一下编写loader或plugin的思路？ webpack的热更新是如何做到的？说明其原理？ 如何利用w
2021-03-11 11:34:57
121
原创 知识点整理：css,html
响应式布局，弹性布局，百分比布局，流式布局这四种布局的区别flex布局和grid布局的区别css动画技术，Animate.css动画库的使用div+css布局重构？？重绘，回流html的语义化canvaslocalStorage，sessionStorage，cookie，区别，异同media媒体查询...
2021-03-10 18:29:25
237
1
原创 知识点整理：JavaScript&&jquery
原型链的继承机制闭包的原理jsonp跨域请求w3c标准ECMA标准DOM，BOM操作掌握jQuery与DOM操作及事件处理，了解动态绑定事件的原理递归，也波那切数列防抖，节流HBuilder如何处理原生问题如何判断页面已经渲染完成？哪个事件？正则表达式http的状态码表示什么意思electron开发原理...
2021-03-10 16:38:34
206
1
原创 jquery选择器
基本选择器：名称 用法 描述 ID选择器 $("#id") 获得指定 类选择器 $(".class") 获取得同一类class的元素 标签选择器 $(''p'') 获取同一类标签的所有元素 并集选择器 $("div,p,i") 使用逗号分隔，只要符合条件之一即可 交集选择器 $("div.class") 注意选择器1和选择器2之间没有空格，都符合才可 层级选择器：名称 用法 描述 子代选.
2021-03-10 16:12:48
119
转载 前端浏览器兼容性问题总结
市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js引擎，内核更加倾向于说渲染引擎。常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器：Trident内核，也称为IE内核Chrome浏览器：Webkit内核，现在是Blink内核Firefox浏览器：Gecko内核，俗称Firefox内核Safari浏览器：Webkit内核Opera浏览器：最初是自己的Presto内
2021-03-09 16:40:34
453
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人