vue3 监听缓存session的变化

写在前面

这个作业属于哪个课程	<班级的链接>
这个作业要求在哪里	<作业要求的链接>
这个作业的目标	个人技术总结
作业正文	正文如下
其他参考文献	...

---

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('请输入正确的手机号'));
}

 

---