第十五节 密码框优化、axios响应拦截器

 系列文章目录

---

目录

系列文章目录

前言

操作方法

总结

---

前言

完善登录页面密码框输入的细节

响应拦截器

---

操作方法

密码框输入优化

回到登录页面，我们可以看到密码输入框为明文输入，并不友好。现在我们实现暗文输入并且加入小图标可点击切换明暗文查看，小图标也随之变化。

1.  回到login下的index.vue。给password的input加入type=“password”并加入小图标给小图标绑定切换事件
    

   <el-input v-model="form.password" type="password" />
           <svg-icon
           color="#555"
           @click="onChangeType"
           ></svg-icon>
   
   const onChangeType = () => {
     console.log("onChangeType")
   }

2. 定义passwordType变量值点击进行切换，并且icon也随之改变

   <el-input v-model="form.password" :type="passwordType" />