更新记录

v1.0.9(2019-07-31)

[修复] 倒计时Bug

极简登陆模板,包含登陆,注册,找回密码三个页面。
这里也写了个简单的项目运用了Vuex进行管理,可供学习使用。
喜欢可以star下,点击查看Github

v1.0.8(2019-07-15)

[修复] placeholder错位

极简登陆模板,包含登陆,注册,找回密码三个页面。
这里也写了个简单的项目运用了Vuex进行管理,可供学习使用。
喜欢可以star下,点击查看Github

查看更多

# 登录模板说明

极简的登录模板,包含登录,注册,找回密码三个页面。
这里也写了个简单的项目运用了Vuex进行管理,可供学习使用。
喜欢可以star下,点击查看Github

使用组件

注:组件写得比较粗糙,更多的使用还得修改组件,后期再慢慢更新,目前主要提供一个样式。
Icon提取的是 ColorUi的Icon库,地址:链接

引入组件

import wInput from './components/watch-login/watch-input.vue' //input
import wButton from './components/watch-login/watch-button.vue' //button

export default {
    components:{
        wInput,  //input
        wButton  //button
    }
}

Input的使用

  • 基本用法
<wInput
    v-model="username"        //绑定值
    type="text"               //Input文本类型
    maxlength="11"            //最大长度(默认20)(选填)
    placeholder="请输入用户名" //占位符 提示性语句(选填)
></wInput>
  • 密码文本
<wInput
    v-model="password"        //绑定值
    type="password"           //Input密码类型
    placeholder="请输入密码"   //占位符 提示性语句(选填)
    isShowPass                //开启 是否显示密码图标(选填)
></wInput>
  • 倒计时
<wInput
    v-model="verCode"        //绑定值
    type="number"            //Input数字类型
    placeholder="验证码"      //占位符 提示性语句(选填)

    isShowCode               //开启 倒计时
    codeText="获取重置码"     //自定义倒计时文字,默认 获取验证码(选填)
    setTime="30"             //设置倒计时时间,默认60秒,(选填)
    ref="runCode"            //注册用于触发验证码倒计时
    @setCode="getVerCode()"  //设置绑定 点击触发的事件
></wInput>

//自定义事件
getVerCode(){
    //获取验证码
    console.log("获取验证码")
    //触发倒计时(一般用于请求成功验证码后调用)
    this.$refs.runCode.$emit('runCode');

    //终止倒计时(用于突然需要终止倒计时的场景)
    this.$refs.runCode.$emit('runCode',0);
}

Input参数说明

参数 类型 默认 是否必选 说明
type String Input类型
maxlength Number 20 × 最大长度
placeholder String × 占位符 提示性语句
isShowPass(与isShowCode二选一) Boolean false × 开启 是否显示密码图标
isShowCode(与isShowPass二选一) Boolean false × 开启 倒计时

使用 isShowCode(倒计时) 参数

参数 类型 默认 是否必选 说明
ref="runCode" (配合isShowCode使用) Type 触发倒计时:this.$refs.runCode.$emit('runCode');
终止倒计时:this.$refs.runCode.$emit('runCode',0);
@setCode="自定义方法"(配合isShowCode使用) Function 设置绑定 点击触发的事件
codeText(配合isShowCode使用) String 获取验证码 × 自定义倒计时文字
setTime(配合isShowCode使用) Number 60 × 设置倒计时时间(秒)

Button的使用

<wButton
    text="重置密码"                  //按钮文本
    rotate="false"                  //是否开启加载动画
    bgColor="#333333"               //按钮背景颜色(可选)
    fontColor="#FFFFFF"             //字体颜色(可选)
    @click.native="startRePass()"   //触发自定义点击事件
></wButton>

Button参数说明

参数 类型 默认 是否必选 说明
text String 按钮文本
rotate Boolean false × 是否开启加载动画
bgColor String linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6)) × 按钮背景颜色
fontColor String #FFFFFF × 字体颜色

目录结构

├── components    //组件
│   └── watch-login    //登录组件
│   │   └── css    //css
│   │   │   ├── Icon.css    //从ColorUi提取的Icon
│   │   └── watch-input.vue    //Input组件
│   │   └── watch-button.vue    //button组件
├── pages    //页面文件夹  
│   └── login
│   │   └── css    //样式/Icon
│   │   │   ├── main.css    //主样式
│   │   ├── login.vue    //登录页
│   │   ├── register.vue    //注册页
│   │   ├── forget.vue    //忘记密码页

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问