基于ElementUI 登录密码强度和滑动验证码组件

在使用登录验证 的时候，可以使用滑动验证码，本组件是基于ElementUI套件中的Progress 进度条加以改造的，使用正则表达式去实时验证密码的强度，讲真话，效果体验还是不错的。项目中只需要引入该组件集成到自己的项目中即可，方便模块化使用，本文基于  ElementUI admin 登录 疆这2个放在一起使用，下面我们来看看效果图：

 

 

 好了，以上废话不多说了，我们来看看实现过程，这个里面包含2个组件，一个密码强度组件和一个滑动组件，文件结构如下：

1.密码强度组件，在components文件夹下的 password-strength.vue文件中，代码如下 ：

2.滑动组件，在components文件夹下的 slider-verify-code.vue文件中，代码如下 ：

3.模板文件index.vue,在模板文件中引入2面2个组件，代码如下 ：

4.login的样式框css

.login{
    width: 100%;
    height: 100%;
    background-image: url('~@/assets/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    &-con{
        position: absolute;
        right: 160px;
        top: 50%;
        transform: translateY(-60%);
        width: 420px;
        &-header{
            font-size: 16px;
            font-weight: 300;
            text-align: center;
            padding: 30px 0;
        }
        .form-con{
            padding: 10px 0 0;
        }
        .login-tip{
            font-size: 10px;
            text-align: center;
            color: #c3c3c3;
        }
        .login-icp{
			padding: 10px 0 0;
            font-size: 10px;
            text-align: center;
        }
        .login-icp a{
            color: #2d8cf0;
        }
        .login-reg{
            text-align: center;
            margin-bottom: 10px;
        }
    }
}

以上就是element ui admin 登录密码框轻度和滑动验证的一个例子，当然了，这种滑动验证是放在前段的 安全性也没有保障，一般都是放在后端动态生成，本案例可以学习一下这种组件使用