文件列表:

uni-App 登录\App.vue (1199, 2019-10-18)
uni-App 登录\components\watch-login\css\icon.css (72564, 2019-10-18)
uni-App 登录\components\watch-login\watch-button.vue (3001, 2019-10-18)
uni-App 登录\components\watch-login\watch-input.vue (4400, 2019-10-18)
uni-App 登录\main.js (159, 2019-10-18)
uni-App 登录\manifest.json (2562, 2019-10-18)
uni-App 登录\pages\login\css\main.css (1378, 2019-10-18)
uni-App 登录\pages\login\forget.vue (3196, 2019-10-18)
uni-App 登录\pages\login\login.vue (28119, 2019-10-18)
uni-App 登录\pages\login\register.vue (27242, 2019-10-18)
uni-App 登录\pages.json (571, 2019-10-18)
uni-App 登录\components\watch-login\css (0, 2019-10-22)
uni-App 登录\pages\login\css (0, 2019-10-22)
uni-App 登录\components\watch-login (0, 2019-10-22)
uni-App 登录\pages\login (0, 2019-10-22)
uni-App 登录\components (0, 2019-10-22)
uni-App 登录\pages (0, 2019-10-22)
uni-App 登录 (0, 2019-10-22)

# 登录模板说明 > 极简的登录模板,包含登录,注册,找回密码三个页面。 > 这里也写了个简单的项目运用了Vuex进行管理,可供学习使用。 > [喜欢可以star下,点击查看Github](https://github.com/AmosHuKe/Watch-Test) ## 使用组件 > 注:组件写得比较粗糙,更多的使用还得修改组件,后期再慢慢更新,目前主要提供一个样式。 > > 引入组件 ``` 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的使用 * 基本用法 ``` ``` * 密码文本 ``` ``` * 倒计时 ``` //自定义事件 getVerCode(){ //获取验证码 console.log("获取验证码") //触发倒计时(一般用于请求成功验证码后调用) this.$refs.runCode.$emit('runCode'); //终止倒计时(用于突然需要终止倒计时的场景) this.$refs.runCode.$emit('runCode',0); } ``` > Input参数说明 | 参数 | 默认 | 是否必选 | 说明 | |-----|----|----|----| | type | 无 | √ | Input类型 | | maxlength | 20 | × | 最大长度 | | placeholder | 无 | × | 占位符 提示性语句 | | isShowPass(与isShowCode二选一) | false | × | 开启 是否显示密码图标 | | isShowCode(与isShowPass二选一) | false | × | 开启 倒计时 | > 使用 `isShowCode(倒计时)` 参数 | 参数 | 默认 | 是否必选 | 说明 | |-----|----|----|----| | ref="runCode" (配合isShowCode使用) | 无 | √ | 触发倒计时:this.$refs.runCode.$emit('runCode');
终止倒计时:this.$refs.runCode.$emit('runCode',0); | | @setCode="自定义事件"(配合isShowCode使用) | 无 | √ | 设置绑定 点击触发的事件 | | codeText(配合isShowCode使用) | 获取验证码 | × | 自定义倒计时文字 | | setTime(配合isShowCode使用) | 60 | × | 设置倒计时时间(秒) | ### Button的使用 ``` ``` > Button参数说明 | 参数 | 默认 | 是否必选 | 说明 | |-----|----|----|----| | text | 无 | √ | 按钮文本 | | rotate | false | × | 是否开启加载动画 | | bgColor | linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6)) | × | 按钮背景颜色 | | fontColor | #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 //忘记密码页 ```

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：