阅读 78

Vue+源生CSS实现根据输入调整输入框样式(vue 引入css)

实现结果

动画.gif

难点

1)用户名和密码框根据不同的输入切换样式
2)点击小眼睛按钮显示密码

实现方法

1)input框中书写placeholder是不行的,需要采用label标签

<div :class="{
     login_name: true,
     input_wrong: wrongInput,
     input_wrong_blur: wrongInputBlur,
     input_true: trueInput,
     input_true_blur: trueInputBlur,
}">
  <input type="text" v-model="user_name" @focus="changeWhenFocus" @blur="changeWhenBlur"/>
  <label :class="{
            label_default: true,
            label_wrong: wrongInputLabel,
            label_wrong_blur: wrongInputLabelBlur,
            label_true: trueInputLabel,
            label_true_blur: trueInputLabelBlur,
         }">邮箱/手机号码/小米ID
  </label>
</div>复制代码

思路:div和label都有默认的样式,并有数个初始未激活的样式;用户每次对input框进行focus(点击)和blur(不点击)时操作,都会触发methods中的方法,对data中的布尔值进行处理,随后div和label将根据这些布尔值激活需要的属性。
2)很巧妙的方法:<input :type="passwordOrText">
默认情况下,input框为<input type="password">
点击小眼睛按钮之后,input框更改为<input type="text">


作者:胡博润
链接:https://juejin.cn/post/7028858784445366280


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐