更新记录

v1.1.3（2020-11-08）

【新增】wInput组件focus聚焦
【优化】wButton组件在ios出现默认边框

v1.1.2（2020-08-08）

【新增】wButton组件text支持slot
【修复】wInput组件高度问题
【修复】部分事件失效

v1.1.1（2020-07-10）

【修复】在微信小程序下wInput下 @input 错误问题
【修复】部分Bug及样式细节调整
【修改】组件所有upx改为rpx
【新增】wInput、wButton大部分常用的原生事件，如：@input、@blur等

平台兼容性

登录模板说明

极简的登录模板，包含登录，注册，找回密码三个页面。
这里也写了个简单的项目(无实际功能)，可供学习使用。
喜欢可以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="请输入用户名" //占位符 提示性语句（选填）
    focus                   //是否默认聚焦
></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参数说明

使用 isShowCode（倒计时） 参数

Button的使用

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

<wButton
    rotate="false"                  //是否开启加载动画
    bgColor="#333333"               //按钮背景颜色（可选）
    fontColor="#FFFFFF"             //字体颜色（可选）
    @click.native="startRePass()"   //触发自定义点击事件
>
    <view slot="text">
        按钮文本另一种用法
    </view>
</wButton>

Button参数说明

目录结构

├── 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    //忘记密码页