- 博客(2)
- 收藏
- 关注
RSS订阅原创 Vue验证码输入框组件
今天在项目中需要使用一个验证码输入框，上图：由于压缩了，GIF不太清晰，补个原图：刚开始想的是使用四个input，输入时聚焦到下一个，删除则聚焦到上一个，仔细一想太麻烦，放弃了。之后想就使用一个input，把letter-spacing调大，再去控制四个div的CSS，不优雅，而且下次复用直接完蛋，也放弃了。这个输入框最大的难点就在于光标位置切换，一直转进input聚焦的死胡同里了，后来灵光一闪：给一个active类，利用伪元素结合动画模拟光标，动态切换四个div的active类即可。..
2021-03-23 03:02:04
1763
原创 使用v-model双向绑定子组件
在项目中经常会遇到子组件向父组件传递值的情况。例如封装一个ih-input组件，需要把他的值传递给父组件，通常的做法是利用$emit去触发某一事件，把值作为参数传递出去。这种做法是最基本的，但不好的就是在父组件中需要写一个方法作为事件的调用，用起来觉得繁琐！还有一个更干脆的办法就是利用v-model，在父组件中声明一个变量，直接绑定子组件，无需再去另写方法接收，如下：<template> <ih-input v-model="content" type="text">&
2021-03-21 17:41:58
1072
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人