添加Login组件文档

src/components/Login/index.vue → src/components/Login/Login.vue

@@ -1,8 +1,5 @@
 <script>
 import { Form, Tabs } from "ant-design-vue";
-import LoginSubmit from "./LoginSubmit";
-import LoginTab from "./LoginTab";
-import LoginItem from "./LoginItem";
 import LoginContext from "./LoginContext";
 
 const Login = {
@@ -63,8 +60,6 @@ const Login = {
           } else {
             active[type] = [activeItem];
           }
-          // this.active = active
-          console.log(this.active);
         }
       };
     }
@@ -114,11 +109,5 @@ const Login = {
   }
 };
 
-Login.Tab = LoginTab;
-Login.Submit = LoginSubmit;
-Object.keys(LoginItem).forEach(item => {
-  Login[item] = LoginItem[item];
-});
-
 export default Form.create()(Login);
 </script>

src/components/Login/LoginItem.vue

@@ -22,8 +22,14 @@ const WrapFormItem = {
     name: String,
     placeholder: String,
     type: String,
-    getCaptchaButtonText: String,
-    getCaptchaSecondText: String,
+    getCaptchaButtonText: {
+      type: String,
+      default: "captcha"
+    },
+    getCaptchaSecondText: {
+      type: String,
+      default: "second"
+    },
     onGetCaptcha: Function,
     countDown: Number
   },

src/components/Login/demo/basic.md

@@ -0,0 +1,144 @@
+---
+order: 0
+title:
+  zh-CN: 标准登录
+  en-US: Standard Login
+---
+
+Support login with account and mobile number.
+
+```html
+<template>
+  <div class="main">
+    <Login
+      :defaultActiveKey="type"
+      :onTabChange="onTabChange"
+      :onSubmit="handleSubmit"
+    >
+      <Tab key="tab1" tab="Account">
+        <a-alert
+          v-if="notice"
+          type="error"
+          :message="notice"
+          showIcon
+          closable
+        />
+        <UserName name="username" />
+        <Password name="password" />
+      </Tab>
+      <Tab key="tab2" tab="Mobile">
+        <Mobile name="mobile" />
+        <Captcha name="captcha" :onGetCaptcha="onGetCaptcha" />
+      </Tab>
+      <div>
+        <a-checkbox :checked="autoLogin" @change="changeAutoLogin">
+          自动登录
+        </a-checkbox>
+        <a style="float: right" href="">
+          忘记密码
+        </a>
+      </div>
+      <Submit>
+        登录
+      </Submit>
+      <div class="other">
+        Other login methods
+        <span class="icon icon-alipay" />
+        <span class="icon icon-taobao" />
+        <span class="icon icon-weibo" />
+        <a style="float: 'right'" href="">
+          Register
+        </a>
+      </div>
+    </Login>
+  </div>
+</template>
+
+<script>
+import Login from "@/components/Login";
+
+const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
+
+export default {
+  components: {
+    Login,
+    Tab,
+    UserName,
+    Password,
+    Mobile,
+    Captcha,
+    Submit
+  },
+  data() {
+    return {
+      notice: "",
+      type: "tab2",
+      autoLogin: true
+    };
+  },
+  methods: {
+    handleSubmit(err, values) {
+      console.log("value collected ->", {
+        ...values,
+        autoLogin: this.autoLogin
+      });
+      if (this.type === "tab1") {
+        if (
+          !err &&
+          (values.username !== "admin" || values.password !== "888888")
+        ) {
+          setTimeout(() => {
+            this.notice =
+              "The combination of username and password is incorrect!";
+          }, 500);
+        }
+      }
+    },
+    onTabChange(type) {
+      this.type = type;
+    },
+    changeAutoLogin(e) {
+      this.autoLogin = e.target.checked;
+    },
+    onGetCaptcha() {
+      console.log("Get captcha!");
+    }
+  }
+};
+</script>
+
+<style>
+#scaffold-src-components-Login-demo-basic .login-warp {
+  max-width: 360px;
+  margin: auto;
+}
+#scaffold-src-components-Login-demo-basic .icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background: url("https://gw.alipayobjects.com/zos/rmsportal/itDzjUnkelhQNsycranf.svg");
+  margin-left: 16px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+#scaffold-src-components-Login-demo-basic .icon-alipay {
+  background-position: -24px 0;
+}
+#scaffold-src-components-Login-demo-basic .icon-alipay:hover {
+  background-position: 0 0;
+}
+#scaffold-src-components-Login-demo-basic .icon-taobao {
+  background-position: -24px -24px;
+}
+#scaffold-src-components-Login-demo-basic .icon-taobao:hover {
+  background-position: 0 -24px;
+}
+#scaffold-src-components-Login-demo-basic .icon-weibo {
+  background-position: -24px -48px;
+}
+#scaffold-src-components-Login-demo-basic .icon-weibo:hover {
+  background-position: 0 -48px;
+}
+</style>
+
+```

src/components/Login/index.en-US.md

@@ -0,0 +1,49 @@
+---
+title: Login
+cols: 1
+order: 15
+---
+
+Support multiple common ways of login with built-in controls. You can choose your own combinations and use with your custom controls.
+
+## API
+
+### Login
+
+| Property         | Description                           | Type                  | Default |
+| ---------------- | ------------------------------------- | --------------------- | ------- |
+| defaultActiveKey | default key to activate the tab panel | String                | -       |
+| onTabChange      | callback on changing tabs             | (key) => void         | -       |
+| onSubmit         | callback on submit                    | (err, values) => void | -       |
+
+### Login.Tab
+
+| Property | Description               | Type      | Default |
+| -------- | ------------------------- | --------- | ------- |
+| key      | key of the tab            | String    | -       |
+| tab      | displayed text of the tab | ReactNode | -       |
+
+### Login.UserName
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| name | name of the control, also the key of the submitted data | String | - |
+| rules | validation rules, same with [option.rules](getFieldDecorator(id, options)) in Form getFieldDecorator(id, options) | object[] | - |
+
+Apart from the above properties, Login.Username also support all properties of antd.Input, together with the default values of basic settings, such as _placeholder_, _size_ and _prefix_. All of these default values can be over-written.
+
+### Login.Password, Login.Mobile are the same as Login.UserName
+
+### Login.Captcha
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| onGetCaptcha | callback on getting a new Captcha | () => (void \| false \| Promise) | - |
+| countDown | count down | number | - |
+| buttonText | text on getting a new Captcha | ReactNode | '获取验证码' |
+
+Apart from the above properties, _Login.Captcha_ support the same properties with _Login.UserName_.
+
+### Login.Submit
+
+Support all properties of _antd.Button_.

src/components/Login/index.js

@@ -0,0 +1,12 @@
+import Login from "./Login";
+import LoginSubmit from "./LoginSubmit";
+import LoginTab from "./LoginTab";
+import LoginItem from "./LoginItem";
+
+Login.Tab = LoginTab;
+Login.Submit = LoginSubmit;
+Object.keys(LoginItem).forEach(item => {
+  Login[item] = LoginItem[item];
+});
+
+export default Login;

src/components/Login/index.zh-CN.md

@@ -0,0 +1,50 @@
+---
+title: Login
+subtitle: 登录
+cols: 1
+order: 15
+---
+
+支持多种登录方式切换，内置了几种常见的登录控件，可以灵活组合，也支持和自定义控件配合使用。（所有API都是参照ant-design-pro来实现的，文档中删除线标记部分为暂时还没有实现的特性）
+
+## API
+
+### Login
+
+| 参数             | 说明                    | 类型                  | 默认值 |
+| ---------------- | ----------------------- | --------------------- | ------ |
+| defaultActiveKey | 默认激活 tab 面板的 key | String                | -      |
+| onTabChange      | 切换页签时的回调        | (key) => void         | -      |
+| onSubmit         | 点击提交时的回调        | (err, values) => void | -      |
+
+### Login.Tab
+
+| 参数 | 说明             | 类型      | 默认值 |
+| ---- | ---------------- | --------- | ------ |
+| key  | 对应选项卡的 key | String    | -      |
+| tab  | 选项卡头显示文字 | String | -      |
+
+### Login.UserName
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 控件标记，提交数据中同样以此为 key | String | - |
+| rules | 校验规则，同 Form getFieldDecorator(id, options) 中 [option.rules 的规则](getFieldDecorator(id, options)) | object[] | - |
+
+除上述属性以外，Login.UserName ~~还支持 antd.Input 的所有属性~~，并且自带默认的基础配置，包括 `placeholder` `size` `prefix` 等，~~这些基础配置均可被覆盖~~。
+
+## Login.Password、Login.Mobile 同 Login.UserName
+
+### Login.Captcha
+
+| 参数         | 说明                     | 类型                             | 默认值       |
+| ------------ | ------------------------ | -------------------------------- | ------------ |
+| onGetCaptcha | 点击获取校验码的回调     | () => (void \| false \| Promise) | -            |
+| countDown    | 倒计时                   | number                           | -            |
+| buttonText   | 点击获取校验码的说明文字 | String                        | '获取验证码' |
+
+除上述属性以外，Login.Captcha 支持的属性与 Login.UserName 相同。
+
+### Login.Submit
+
+~~支持 antd.Button 的所有属性。~~

src/views/User/Login.vue

@@ -100,14 +100,7 @@ import { mapActions, mapState, mapMutations } from "vuex";
 import { Modal } from "ant-design-vue";
 import Login from "@/components/Login";
 
-const {
-  Tab,
-  UserName,
-  Password,
-  Mobile,
-  Captcha,
-  Submit
-} = Login.WrappedComponent;
+const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
 
 export default {
   components: {