第15周收获

最新推荐文章于 2024-06-21 15:14:18 发布

格物致知0919

最新推荐文章于 2024-06-21 15:14:18 发布

阅读量394

点赞数 7

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_73838148/article/details/134655268

版权

1.input事件和change事件的区别

input事件是实时触发的，也就是说只要输入框的内容发生改变，就会立即触发该事件

change事件是在回车或者失焦时触发

2.关于e.target的使用

<template>
  <div class="test">
    <input type="text" @change='fn'><!--只有这个能正确打印-->
    <input type="text" @change='fn()'><!--会报错-->
    <input type="text" @change='fn(e)'><!--会报错-->
  </div>
</template>

<script>
export default {
methods:{
    fn(e){
        console.log(e.target);
    }
}
}
</script>

<style>

</style>

3.v-model实现父子组件之间数据绑定

4.添加购物车拦截功能

(1)首先判断vuex中是否有token信息，如果有则加入购物车，如果没有，则进行弹窗提示，即dialog.confirm（这个是有两个选项键的）（vant）

if (!this.$store.state.user.token) {
        this.$dialog
          .confirm({ title: "温馨提示", message: "此操作需要先登录",confirmButtonText:'去登录',cancelButtonText:'再逛逛' })
          .then(() => {
            //点击去登录之后的操作
          })
          .catch(() => {
            //点击再逛逛之后的操作
          });
        return;
      }

(2)点击去登录时，进行页面跳转，进行页面跳转，这里不用$router.push而用$router.replace是为了不添加历史

this.$router.replace("/login");

原本的登录页面登录成功之后会跳转到home页，为了让其跳回商品详情页，需要在跳转时携带参数（当前路径地址，并且是要带fullpath而不是path，因为fullpath还带着商品id信息）

this.$dialog
  .confirm({ title: "温馨提示", message: "此操作需要先登录",confirmButtonText:'去登录',cancelButtonText:'再逛逛' })
  .then(() => {
    this.$router.replace({
      path:'/login',
      query:{
        backUrl:this.$route.fullPath
      }
    })
  })
  .catch(() => {});

那么跳转之后的效果为：

登录成功之后，因为之前完成了登录成功就跳转至首页的功能，所以会直接跳转到首页，所以需要先在login页判断有没有backUrl这个参数，如果没有，正常跳转至home页，如果有，跳转至backUrl对应地址，代码如下：

const backUrl=this.$route.query.backUrl||'/home'
this.$router.replace(backUrl)

//而原本是：
//this.$router.replace('home')

(3)加入到购物车中——axios请求

还需要添加header参数，原本是：

request.post(路径,data,header)

但因为涉及用户的很多请求都需要添加header参数，所以直接在请求拦截其中添加，代码如下：

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    Toast.loading({
        message: '加载中...',
        forbidClick: true,//禁止背景点击
        loadingType: 'spinner',//自定义loading图标
        duration: 0,//不会自动消失，而是在响应拦截器中关闭
    })
    // 在发送请求之前做些什么
    // 这里是添加的内容
    const token = $store.state.user.token
    if (token) {
        // 有特殊字符，因此用中括号的形式
        config.headers['Access-Token'] = token
        config.headers.platform = H5
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});