技术总结——Vue页面刷新的方法
写在前面
| 这个作业属于哪个课程 | <班级的链接> |
|---|---|
| 这个作业要求在哪里 | <作业要求的链接> |
| 这个作业的目标 | 个人技术总结 |
| 作业正文 | 正文如下 |
| 其他参考文献 | ... |
Part1.技术分享
好像没有什么干货可以分享，就分享一下Vue框架中踩到的坑以及我的解决方法吧
一、Vue多次点击路由会报错
-
重复点击跳转按钮不起作用，浏览器报错如图
-
查阅了资料[1]，发现是router版本的bug，需要升级router，但是不知道为啥我试了之后没有效果，因采用了一个比较取巧的办法做页面刷新：每次刷新页面时先跳到空白页面，再从空白页面跳回来，具体方法如下。
首先创建一个空白页面，路由配置为 /refresh ，在空白页接收目标页面的路径和所需要的参数，然后再进行跳转，空白页具体代码如下
<script>
export default {
name: "refresh",
data() {
return{
Param: null,
Destination: null,
}
},
created() {
this.Destination = this.$route.query.destination; //接收目标页面路由
this.Param = this.$route.query.param; //接收目标页面所需要的参数，可空
this.$router.push({
path: this.Destination, //通过接收到的路由跳转到目标页面
query:{
param: this.Param, //传递参数
}
})
}
}
</script>
使用方法代码如下
this.$router.push({
path: '/refresh',
query:{
destination: '/GoodsDetails' //要刷新页面的路径
param: that.goodsId, //该页面要使用到的参数，根据需要添加，可为json格式，亦可空
}
})
用以上的方法就可以实现页面的刷新
我是快活的分割线
二、Element-UI使用时遇到的一点小问题
- 在给el-card绑定点击事件的时候发现 @click 不起作用，查阅资料[2]时发现， @click 等事件是经过 Vue 封装的，所以在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符。而 .native 就是给组件绑定原生事件采用的方法,因此需要在给el-button之外的组件绑定点击事件时要写成 @click.native=function()
我是快活的分割线
三、如何给按钮添加倒计时效果
- 在做发送邮件的功能时想要给按钮做个倒计时效果，防止用户频繁点击按钮，像后端发出请求，找了好久终于在一篇博客了找到了教程[3]，以下是实现的代码
data() {
return {
// 倒计时按钮相关
content: '获取验证码', //显示在按钮上的字样
totalTime: 60, // 倒计时，除了显示在按钮上，没有实际用处
isDisable: false, //控制按钮是否可点击
}
},
methods: {
submitEmail(formName) {
// 按钮倒计时事件
if (this.isDisable) return ;
this.isDisable = true;
this.content = this.totalTime + 's后重新获取'; //显示在按钮上的倒计时
let clock = window.setInterval(() => {
this.totalTime--; //改变倒计时数字
this.content = this.totalTime + 's后重新获取';
if (this.totalTime < 0) {
window.clearInterval(clock);
this.content = '重新获取验证码';
this.totalTime = 60;
this.isDisable = false; //这里重新开启
}
},1000) // 每次一秒
//点击按钮要触发的事件代码
...
},
使用代码如下
<el-button type="primary"
native-type="button"
:disabled="isDisable"
@click="submitEmail('emailForm')">{{content}}
</el-button>
效果图
我是快活的分割线
四、分享一段检验手机号码格式的js代码
const reg = /^((13[0-9])|(14[5-9])|(15[0-3])|(15[5-9])|(166)|(17[0-8])|(18[0-9])|(19[8-9]))\d{8}$/;
if (reg.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的手机号'));
}
Part2.参考资料
- [1]Element/vue router连续点击同一路由报错解决方法 作者：银鞍照白马
- [2]elementUI中的点击事件@click 作者：家住魔仙堡的大柠
- [3]vue实现按钮倒计时 作者：codeXml
