![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
experience
文章平均质量分 52
BUG、技巧、踩过的坑
Silent Land
你还有好多未完成的梦,你有什么理由停下脚步?
展开
-
vue JSX实现一个通用表单生成器
项目中有大量的简易表单,使用组件将其封装起来提高工作效率该组件封装不适用于太具有个性化的表单使用冻结优化配置信息。原创 2022-07-24 19:02:25 · 1258 阅读 · 0 评论 -
实现一个通用表单重置功能
vue2实现一个通用的表单重置与恢复功能原创 2022-07-07 11:09:35 · 406 阅读 · 0 评论 -
解决Antd输入框卡顿问题及Pubsub.js的使用
项目场景:项目中通过表单来填写校验大量复杂数据问题描述:项目中使用的是Ant Design of Vue这个组件库,使用FormModel 表单,数据字段和校验较多时,表单操作卡顿;eg: a-input输入框,等你输入完字及,几秒后才慢慢出现你输入的字符 原因分析:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象解决方案: 官方给出的解决办法,将 Form 相关的业务独立到一个单独的组件中,减少组件渲染的消耗,如果有很多校验项,可把它原创 2021-12-02 22:27:53 · 2580 阅读 · 0 评论 -
JavaScript单行程序代码片段
提效代码片段转载 2021-10-17 23:27:16 · 129 阅读 · 0 评论 -
Ant Design of Vue switch使用Popconfirm气泡确认框
在使用switch开关使用Popconfirm气泡确认框二次确认<template> <div> <a-popconfirm title="选择否将清除数据?" :visible="visible" ok-text="是" cancel-text="否" @visibleChange="handleVisibleChange" @confirm="confirm" @cancel=原创 2021-03-08 22:07:42 · 3983 阅读 · 0 评论 -
Ant Design of Vue DatePicker 日期选择框只选择年份
需求只改变年份问题Ant Design of Vue DatePicker 日期选择框通过mode = "year"控制,弹出面板以年份显示,但是无法选择,也无法关闭面板解决方案将控制面板打开/关闭的yearShow,需要在得到后台数据时将它添加到每条数据中,如果放在data中表格每行的日期面板将同时开/闭.<template> <div> <table class="table"> <thead>原创 2021-02-26 21:38:36 · 5392 阅读 · 0 评论 -
数组中的对象去重(es6方法)
需求将数据处理后产生的code相同的数据去除后返回给后端解决处理后产生的重复数据// 处理后产生的重复数据let tableList = [ { code: '001', name: 'aaa', age: '18', other: 'abc' }, { code: '002', name: 'bdfd', age: '28', other: 'abc' }, { code: '002', name: 'aasdf', age: '98', other: 'abc' },原创 2021-02-23 22:56:26 · 1794 阅读 · 0 评论 -
组件传值动态
组件父子传值单向数据流:父组件的给子组件传参之后子组件不能修改父组件中的数据发生改变会影响到子组件需求:1.在子组件中修改msg2.子组件中修改之后不会影响到父组件3.父组件中修改之后会影响到子组件解决方案将msg保存期起来,改变保存的那个属性,这样需求1和需求2就完成了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="原创 2020-11-30 12:24:37 · 564 阅读 · 1 评论 -
upload组件二次封装及回显功能的实现
需求:app.vue给上传组件一个图片地址,该组件能回显出来1:先通过父子传值将图片地址传过去在子组件标签定义一个属性 value=值子组件通过props接收 props:[“value”]子组件接收图片路径后,将上传组件的img标签上的imageUrl换成相应的props传参value2:修复上传功能(上传成功后,图片路径没有使用上)通过父组件修改value的值1:在子组件标签绑定一个方法 @input="父组件方法"2:在子组件内触发父组件方法,并传递图片路径在图片上传成功后.原创 2020-11-27 16:42:31 · 1443 阅读 · 0 评论 -
watch中的深度监听
watch只要被监听的数据发生改变,就会触发对应的逻辑代码如果被监听的数据是个对象(或数组),对象(或数组)中的属性发生改变时,监听是不会触发上的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2020-11-26 11:29:29 · 41324 阅读 · 1 评论 -
计算属性与全选逻辑实现
计算属性计算属性会将结果进行缓存下次使用时,会先从缓存中得到,如果没有才会执行逻辑代码当依赖发生改变时,缓存才会更新<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&原创 2020-11-25 10:33:33 · 390 阅读 · 2 评论 -
微信小程序网络请求 - 设置合法域名
微信小程序设置网络请求官方文档为什么要设置合法域名呢 ?每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile) 和 WebSocket 通信(wx.connectSocket)。解决方案方案一:配置 。服务器域名请在 「小程序后台-开发-开发设置-服务器域名」方案二:临时方案。在微信开发者工具里勾选不检验合法域名注意点:临原创 2020-11-19 22:20:45 · 5143 阅读 · 0 评论 -
小程序开发解决width=“100%“下padding无效问题
原因:我们给内容设置了width为100%,却在默认情况下它是标准盒模型,所以width只是指content的值,此时我们在给他加padding或者设置border宽度的时候,其实盒子的宽度就大于100%了。解决方法:给加了padding或border的盒子加box-sizing: border-box;实现的效果<template> <view class="my"> <view class="topbg"> <image src="../.原创 2020-11-16 22:12:35 · 1792 阅读 · 1 评论 -
使用HBuilder开发小程序Error: ENOENT: no such file or directory
删除页面的 bug表现在pages新建页面后 ,直接删除了该页面,总是名奇妙的报错HBuilder报错开发者工具报错分析原因:我们在 HBuilderX 中新建页面时,HBuilderX 会帮助我们做两件事:1.在 pages 下创建一个 .vue文件 & 文件夹2.将新建的页面信息配置到 pages.json 中如果此时,我们直接将这个页面删除只会删除 pages 下创建的内容而 pages.json 中的配置信息没有删除,所以会报错解决方案原创 2020-11-09 23:33:53 · 4118 阅读 · 0 评论 -
简单了解SPA、SEO及CSR和SSR渲染方式
SPASingle Page Application (单页面应用)概念:网站的效果都是显示在一个静态页面中的在页面切换时,其实并没有从一个页面中跳转到另一个页面中,只是通过 js 动态的将内容进行了修改在网站的源代码中是看不到任何数据(关键字)的特点:优点:用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;基于上面一点,SPA 相对对服务器压力小;前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理;缺点:初次加载原创 2020-11-09 22:57:54 · 876 阅读 · 0 评论 -
小程序实现左右两边滚动互不影响css布局
效果图布局思路:利用固定定位左边盒子 .c-left { position: fixed; top: 100rpx; bottom: 0; width: 200rpx; overflow: scroll; padding-top: 20rpx; }右边盒子 .c-right { position: fixed; top: 100rpx; bottom: 0; left: 200rpx; .原创 2020-11-03 15:09:36 · 1296 阅读 · 1 评论 -
在 uni-app 项目中没有配置 appid导致Cannot property ‘forceUpdate‘ of undefined错误
报错图片原因:在 uni-app 项目中没有配置 appid解决:原创 2020-11-03 10:52:52 · 1675 阅读 · 1 评论 -
mockjs简单使用
mockjs官方文档在项目开发过程中:前端:根据静态页面完成结构 & 样式 ,根据接口文档完成数据渲染后端:开发接口问题:前端的静态页面已经写完,后端的接口文档还没有开发完成mock.js 可以用来解决:当前端的静态页面写完,但是接口还没有出来,就可以使用 mock.js 来模拟后端的接口作用: 生成随机数据,拦截 Ajax 请求(模拟后端的接口)使用:生成随机数据下载mock npm i mockjs --save使用mo原创 2020-10-27 10:46:26 · 3758 阅读 · 1 评论 -
动态组件与异步组件
动态组件异步组件原创 2020-10-26 20:05:00 · 887 阅读 · 1 评论 -
Vue中的插槽
基本使用、具名插槽、默认插槽、作用域插槽原创 2020-10-25 20:38:47 · 345 阅读 · 0 评论 -
组件间的通信方式及页面传参总结
特性继承、inheritAttrs、$attr、$listeners、eventbus、组件中的通信方式总结及页面传参原创 2020-10-24 12:54:10 · 547 阅读 · 0 评论 -
webpack那些事
webpack中文官网英文官网webpack 基本概念为什么要学习webpackwebpack 它是 vue-cli 的底层实现原理,学习了它,可以更加方便的去使用 vue-cli(现在基本不用了)webpack 的作用vue-cli 搭建的项目有哪些功能:可以运行为一个服务器可以进行实时更新代码修改之后,保存,页面会自动更新可以解析 css 文件import 'xx.css'可以解析 .vue 文件…上述的这些功能,其实都是 webpack 来实原创 2020-10-22 22:47:53 · 290 阅读 · 0 评论 -
key值报错
bug产生较类似的组件在一个页面使用v-for渲染key值为index时解决方案将该组件用div包起来原创 2020-10-20 08:23:11 · 741 阅读 · 0 评论 -
ES6标准引入的新的数据类型generator(生成器)
Generator能让函数有暂停功能使用在函function后面加一个*在需要暂停的地方加一个yieldnext()恢复执行权<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &原创 2020-10-14 20:44:15 · 220 阅读 · 0 评论 -
路由重复跳转错误
问题:在登录页跳转至登录页产生的错误解决在路由页加以下代码const routerPath = VueRouter.prototype.pushVueRouter.prototype.push = function push (location) { return routerPath.call(this, location).catch(e => e)}原创 2020-10-11 23:21:09 · 484 阅读 · 0 评论 -
vue常见错误及注意点
初始值引起的错误原因:DOM加载了数据还未获得报404错误解决:用v-if判断让数据加载了再渲染DOMExpected Object,got Number with value 95el-option需要valueTypeError:Cannot read property ‘key’ of undefinedEXpected Object,got String with value “rules”不加冒号后面的即为字符串Object(…)is not a function原创 2020-10-01 10:16:56 · 886 阅读 · 0 评论 -
脚手架设置跨域代理
解决开发环境中的跨域问题在README同级目录下创建一个vue.config.js在vue.config.js使用下面代码将**.env.development** 内的基地址替换为 /public //vue-cli3.0 里面的 vue.config.js做配置module.exports = { devServer: { proxy: { '/public': { //这里最好有一个 / target: 'http://127.0原创 2020-09-22 20:20:40 · 435 阅读 · 0 评论 -
解决vue路由正常跳转,页面无任何变化
问题:点击跳转,地址正常跳转,但对应组件在对应位置没显示、也没报错解决浏览器弹出警告:意思是:非嵌套路由必须包含前导斜杠字符。将path中路径中的点去掉成功解决原创 2020-09-20 12:40:12 · 3919 阅读 · 0 评论 -
解决ajax请求解决缓存问题
一个接口在短时间内调用会报如下跨域错误:解决方案:在url后拼接随机字符原创 2020-09-18 20:47:39 · 386 阅读 · 0 评论