云服务器 199 / 年,新老同享,开发者力荐特惠渠道
阿里云推广

使用mui实现密码框的小眼睛(点击小眼睛实现密码框的可见和隐藏)

  • 内容
  • 评论
  • 相关

1.下载mui的源码

https://github.com/dcloudio/mui

2.把dist目录拷贝到项目里面

3.引入mui的css以及js文件,需要注意dist里面是有字体文件的不要丢掉。

4.具体实现源码,下面标红的部分是重点,必须得有的

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> 
  <title>我要兑换</title> 
  <script src="__ROOT__/Public/dist/js/mui.min.js"></script> 
  <link rel="stylesheet" href="__ROOT__/Public/dist/css/mui.min.css" /> 
 </head> 
 <body> 
  <div class="mui-input-row mui-password"> 
   <input type="password" class="mui-input-password" /> 
  </div>  
 </body>
</html>


本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:使用mui实现密码框的小眼睛(点击小眼睛实现密码框的可见和隐藏) - http://www.wlphp.com/?post=317

发表评论

电子邮件地址不会被公开。 必填项已用*标注