otway-ui

业务组件说明

YbLogin 是一个基于Vue2+Vant的业务组件，用于通用的登录组件，适用于多个场景，如病例征集、运营后台等。提高了开发效率，减小了bug率。

使用示例

vue项目入口文件 main.js

import otwayUI from 'otway-ui'  // 引入组件
import 'otway-ui/lib/otway-ui.css' // 引入样式

Vue.use(otwayUI); // 本地vue项目注册组件

YbLogin组件使用

<template>
  <otway-login 
   findPasswordPath="/find-password"
   tokenKey="kangsaidiToken"
   :login="login"
   :submitFunByProp="submitFunByProp"
  />
</template>

<script>
import { login } from "@/api/user";  // 针对login api的返回数据格式参考下面组件参数说明
import { mapMutations } from "vuex";
export default {
 name: 'App',
 components: {
 },
 methods: {
   ...mapMutations(["setUserInfo", "setToken"]),
   login,
   async submitFunByProp(res) {
     await this.setUserInfo(res.data);
     await this.setToken(res.data.token);
   }
 }

}
</script>

API说明

Props

| 属性名 | 类型 | 必填 | 默认值 | 说明 | | :----------------: | :------: | :---: | :-------------: | :-------------------------------------------------------: | | login | Function | true | -- | 登录函数，({username: '', password: ''}) => {return Promise()} | | title | String | false | "欢迎来到Login登录系统" | 描述登录表单的title | | homePath | String | false | “/add-case” | 登录之后跳转页面 | | findPasswordPath | String | false | -- | 找回密码，有值才会显示 | | tokenKey | String | false | "token" | 本地用于localStorage中用于存储token的key | | submitFunByProp | Function | false | -- | 登录之后要做的额外函数 async (data) => {} |