- 博客(177)
- 资源 (12)
- 收藏
- 关注
原创 vue强制刷新组件的三种方式:$forceupdate、v-if、key
项目中遇到父组件给封装子组件传值,传的值改变后,页面显示没有进行相对的更改,针对解决这个问题进行三种组件刷新方式的使用记录。
2024-09-24 16:28:44 935
原创 npm ERR! request to https://registry.npm.taobao.org/fastclick failed, reason: certificate has expire
npm报错:request to https://registry.npm.taobao.org failed, reason certificate has expired
2024-02-25 14:07:27 338
原创 This method should not be called on the main thread as it may lead to UI unresponsiveness报错
ios加载H5显示This method should not be called on the main thread as it may lead to UI unresponsiveness报错
2024-01-12 17:35:53 2666
原创 vant List组件实现上拉加载中 首次进行load事件执行两次的问题
list组件上拉加载第一次加载去执行load事件时,该事件执行两次的问题解决
2023-07-06 15:22:21 2565
原创 关于IE11的样式兼容问题记录
1、布局如下<div class="map-label" :class="{active:isActive}" :style="{marginTop:`${marTopVal}px`}"> <transition name="slide-fade"> <div class="transition-out" v-if="show"> <div class="circle-out" :style="{left:circleLeft,top:circleTo
2023-06-28 15:07:09 875
原创 修改elementUI carousel组件源码实现轮播图卡片化宽度自适应及样式调整
项目中要实现下图效果三说明:效果二和效果三是说明不同宽度达到的组件的效果纯css实现宽度自定义并居中通过elementUI API中发现没有暴露出轮播图卡片化的自定义的宽度,通过查看样式得知是固定的50%的宽度,那么要实现修改宽度可以进行样式覆盖,代码如下:.el-carousel__container { .el-carousel__item--card { width: 850px !important; background: #fff; } .el-carousel__ite
2023-05-29 14:12:37 3189
原创 axios get请求 (failed)net::ERR_CERT_AUTHORITY_INVALID
问题描述:vue项目,使用axios.get请求一个接口,出现如下图所示错误点开详情:但是在地址栏内输入完整的链接进行请求,可以成功返回数据。定位问题:1、首先根据CORS error这个错误定位接口是跨域;2、用跨域浏览器重新加载页面请求接口后返回:axios (failed)net::ERR_CERT_AUTHORITY_INVALID这个错误,定位:因为https请求,谷歌浏览器认为是不安全的链接,可重新在跨域浏览器中输入完整的接口地址,跳出需要确认跳往这个不安全链接后,就可以正常进行
2023-02-28 10:21:07 2452
原创 vue computed内计算属性方法传参及使用
项目中有需求对某些字段进行处理,vue中computed内计算属性无法直接传参进行使用,想要对字段进行动态过滤。html:<div class="order-card" v-for="item in xcDataList" :key="item.orderId"> <div class="info-date"> <div class="date-left">05月13日 周五</div> <div class="date-right">
2023-02-06 17:15:46 1274
原创 vue升级报错:[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead
vue升级报错:[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead
2022-12-19 09:50:28 1861
原创 vue el-select搜索功能--区分输入内容后得到的是否是下拉框选择数据
区分elementui使用select组件,进行输入后得到的值是输入的值还是通过下拉框选取的值
2022-11-22 18:02:44 2197
原创 vue npm install报错:post install error, please remove node_modules before retry!
报错:× Install fail! RunScriptError: post install error, please remove node_modules before retry!
2022-10-24 17:31:42 12009 3
原创 vue 运行项目浏览器页面显示“该网页无法正常运作”
项目运行成功并自动弹出但是页面上显示:确定问题:检查build/webpack.dev.conf.js文件中是否存在下面代码:disableHostCheck: true,https: true,如果有的话,确定一下是否用的https进行的访问,如果用https进行访问进行信任后,出现以下页面:则需要把鼠标在空白处点击,输入:thisisunsafe相当于告诉谷歌这个是不安全的即可正常打开页面进行访问。......
2022-06-18 11:28:46 3575 1
原创 Git项目的整体迁移
工作需要把一个老项目,完整的迁移到另一个新的git地址上,包括代码及提交记录等,具体操作如下:1、克隆老项目的裸版本库 git clone --bare 旧的git地址此时会在当前的文件夹下产生一个老项目名称.git的文件夹,这个文件夹内就是克隆的老项目的提交记录,只是一个记录,跟本地的代码没有任何关系。2、推送裸版本库记录到新项目cd 老项目名称.git //进入裸版本库文件夹内git push --mirror 新的git地址 //推送记录到新的git项目上结束,完成项目...
2022-05-20 14:58:19 1274
原创 引入vuex报错:“export ‘reactive‘ was not found in ‘vue‘
用vue-cli进行新建项目时没有同步安装vuex,是后续另外用命令加上的,引入后报如下错误提示在vue中未找到这些,比较原来的项目(也是使用的vue2,里面的vuex是3.X的版本,猜测是否是因为版本的问题,尝试后重新安装3.X版本的vuex进行测试,可以运行),发现是版本问题;先删除已经安装的vuex,运行命令:npm uninstall vuex安装指定版本的vuex:npm install vuex@3.X可以选择安装3.4.0版本的...
2022-04-01 16:45:16 2430
原创 vue解决报错问题:Module build failed: TypeError: this.getOptions is not a function
vue项目执行报错
2022-03-09 11:15:20 2001
原创 通过background-position位移效果实现类似阿里云tab切换动画
直接上代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title><style>* { padding: 0px; margin: 0px;}body,html { width: 100%; height: 100%; margin: 0px; padding: 0px;}body { posit
2022-02-14 14:58:11 640
原创 使用vue-awesome-swiper实现轮播图异形卡片化两侧切换显示一半的遮挡效果
vue 可以直接使用插件效果如图:主要设置如下:<swiper class="service-advantage" ref="carouselSwiper" :options="swiperOptions"> <swiper-slide v-for="(item,index) in serviceAdvantageData" :key="`item${index}`"> <div class="card-area"> 第{{index}}张swiper
2022-01-14 11:01:42 4626
原创 elementUI中NavMenu点击二级导航el-submenu无效
项目中需要用到elementUI的NavMenu 导航菜单,需求是除了要进行下拉选中的操作外需要点击二级菜单时要触发绑定的点击事件,但是直接加@click是没有效果的,这时候可以直接用修饰符实现:@click.native使用js的原生点击事件即可...
2021-12-02 09:41:18 3009
原创 js 实现控制input框内只能输入大于0且最多两位小数的数字
控制input框内只能输入大于0、最多两位小数的值<el-input @input="ruleFormlogin.name=clearNoNumTwo(ruleFormlogin.name)" placeholder="@input控制" v-model="ruleFormlogin.name"></el-input>methods:// 处理输入框小数点两位问题clearNoNumTwo(obj) { obj = obj.replace(/[^\d.]/g, '');
2021-11-15 09:53:00 3002
原创 解决elementUI el-form resetFields()方法重置表单无效
问题:表单操作中resetFields()方法在编辑后再次新增失效。在开发过程中新增和编辑功能往往使用一个el-form,在新增完成时,执行 resetFields()方法(即:this.$refs[formName].resetFields();),这样再次打开页面时,不会保留原来的数据,但是先给form赋值执行编辑操作,完成时执行resetFields()方法,再次打开进行新增时,会发现数据依然存在,感觉像是resetFields()方法没有起作用。原因:el-form提供的resetField
2021-10-24 23:55:54 6607 3
原创 echarts 折线图上标记独立坐标点
实现下图所示功能:在多条折线图中,给定一个独立的点坐标,在图上进行显示(图一),点击该坐标点显示该坐标的位置信息(图二)具体实现代码:html:<div id="main" style="width: 600px;height:400px;"></div>jsvar myChart = echarts.init(document.getElementById('main')); let option = { tooltip: { trigger:
2021-10-11 14:19:21 8207 1
vue实现表头固定、表体可下拉刷新上拉加载
2019-04-26
vue项目分环境打包配置不同命令
2018-06-26
vue项目(基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子)
2018-06-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人