- 博客(113)
- 收藏
- 关注
原创 前端代码规范
京东凹凸实验室前端代码规范 腾讯前端代码规范 百度前端代码规范文档 JavaScript standardstyle 风格指南 — Vue.js 阮一峰ES6编程风格 书籍:《代码简介之道》 Eslint代码规范检测工具
2024-07-31 15:38:29 286
转载 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 1071
原创 vue项目,程序控制台不报错,但是也没有达到预期
error里面不一定有msg,所以直接《error.msg.indexOf('cancelCache') > -1》就会报错,需要在前面再加一层判断:《error.msg && error.msg.indexOf('cancelCache') > -1》,这样程序就向下走了,至于为什么控制台不报错,我也不清楚。敲代码时,有时控制台不报错,但是也不如预期那样展示。
2023-10-25 15:35:47 511
原创 vue输入框axios请求传参undefined,自动过滤为空的参数
我门如果要传递值为undefined的参数,可以将该字段置为空字符串。参数中有值是undefined,传参时就自动过滤了该参数。
2023-04-26 12:04:47 1765 1
转载 ant design vue使用collapse默认展开全部;自定义切换图标expandIcon
ant design vue使用collapse默认展开全部;自定义切换图标expandIcon
2022-08-05 11:37:24 9957 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 3591
原创 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 4740
原创 这是一个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 1409
原创 点击触发其他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 828
原创 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 2294
原创 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 3153 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 353
转载 (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 128
转载 (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 163
原创 VUE递归引用自身组件
现在有一组数据,是json数组的格式,而且每个item里面都有可能有children,没有限制所以新建一个组件,用来递归显示,也就用到了自身组件按照百度的来说,引用自身组件不需要引用,只需要在组件中加上name这个属性即可...
2021-08-17 16:27:23 517
原创 Ant Design Vue :使用日历Calendar,中英文切换
官网地址:https://www.antdv.com/components/calendar-cn/#API官网中这么说故,使用时,没做特殊设置,显示的都是英文中英文切换仅在App.vue中设置即可,当然还需要对中英文切换的识别,在此可以使用vue-i18n即可...
2021-05-12 19:07:46 2598 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 241
原创 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 11051
原创 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 1165 1
转载 8张图让你一步步看清 async/await 和 promise 的执行顺序
转载:https://segmentfault.com/a/11900000172247998张图让你一步步看清 async/await 和 promise 的执行顺序为什么写这篇文章? 测试一下自己有没有必要看 需要具备的前置基础知识 主要内容 对于async await的理解 画图一步步看清宏任务、微任务的执行过程 为什么写这篇文章?说实话,关于js的异步执行顺序,宏任务、微任务这些,或者async/await这些慨念已经有非常多的文章写了。但是怎么说呢,简单来说,
2021-03-16 16:15:11 545 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 138
转载 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 384
原创 知识点整理:es6
es6新特性特别promise封装axios,promise,setTimeout,fn,宏任务和微任务,回调地狱事件循环机制,promise的使用,
2021-03-14 22:16:19 126 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 369 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 365
转载 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 451
转载 Vue 动态路由的实现(后台传递路由,前端拿到并生成侧边栏)
今天我们来讲讲用后台传递路由表实现动态路由的思路,因为公司的项目里路有部分用到了vuex,我就把路由部分脱离vuex整理了出来,让大家有个启发,并不是绝对的解决方案,只是思路github:https://github.com/Mrblackant...在线查看:http://an888.net/antRouter/#/...思路整理以下四步骤对应的代码都在下方会讲到,并且是对应的1.后台同学返回一个json格式的路由表,我用easymock造了一段:动态路由表,大家可参考;2.因为后端同学传回
2021-03-11 15:00:21 1526 2
转载 Vue动态菜单(路由)的实现方案(beforeEach+addRoutes+elementUI):前端写好路由表,根据后端返回角色实现
路由表写在前端,后端返回用户的角色,前端进行角色对应的菜单渲染在线预览:动态路由github(记的star哈):https://github.com/Mrblackant...开始之前,自己要大概懂写关于vue-router的beforeEach(路由拦截)、addRoutes,elementUI的菜单组件等方法,不然理解可能会有点吃力思路分以下几步:1.前端在本地写好路由表,以及每个路由对应的角色,也就是哪些角色可以看到这个菜单/路由;2.登录的时候,向后端请求得到登录用户的角色.
2021-03-11 14:59:07 1337
转载 关于webpack的面试题
问题一览webpack与grunt、gulp的不同? 与webpack类似的工具还有哪些?谈谈你为什么最终选择(或放弃)使用webpack? 有哪些常见的Loader?他们是解决什么问题的? 有哪些常见的Plugin?他们是解决什么问题的? Loader和Plugin的不同? webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全 是否写过Loader和Plugin?描述一下编写loader或plugin的思路? webpack的热更新是如何做到的?说明其原理? 如何利用w
2021-03-11 11:34:57 123
原创 知识点整理:css,html
响应式布局,弹性布局,百分比布局,流式布局这四种布局的区别flex布局和grid布局的区别css动画技术,Animate.css动画库的使用div+css布局重构??重绘,回流html的语义化canvaslocalStorage,sessionStorage,cookie,区别,异同media媒体查询...
2021-03-10 18:29:25 240 1
原创 知识点整理:JavaScript&&jquery
原型链的继承机制闭包的原理jsonp跨域请求w3c标准ECMA标准DOM,BOM操作掌握jQuery与DOM操作及事件处理,了解动态绑定事件的原理递归,也波那切数列防抖,节流HBuilder如何处理原生问题如何判断页面已经渲染完成?哪个事件?正则表达式http的状态码表示什么意思electron开发原理...
2021-03-10 16:38:34 210 1
原创 jquery选择器
基本选择器:名称 用法 描述 ID选择器 $("#id") 获得指定 类选择器 $(".class") 获取得同一类class的元素 标签选择器 $(''p'') 获取同一类标签的所有元素 并集选择器 $("div,p,i") 使用逗号分隔,只要符合条件之一即可 交集选择器 $("div.class") 注意选择器1和选择器2之间没有空格,都符合才可 层级选择器:名称 用法 描述 子代选.
2021-03-10 16:12:48 121
转载 前端浏览器兼容性问题总结
市场上浏览器种类很多,不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种,一是渲染引擎,另一个是js引擎,内核更加倾向于说渲染引擎。常见的浏览器内核可以分四种:Trident、Gecko、Blink、WebkitIE浏览器:Trident内核,也称为IE内核Chrome浏览器:Webkit内核,现在是Blink内核Firefox浏览器:Gecko内核,俗称Firefox内核Safari浏览器:Webkit内核Opera浏览器:最初是自己的Presto内
2021-03-09 16:40:34 468
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人