<template>
  <div></div>
</template>

<script>
import components from './_import-components/ext-input-area-after-import'

/**
 * 登录页用户名密码下方扩展，比如短信验证等功能
 * @displayName ExtInputAreaAfter 用户名密码下方扩展
 * @since 0.19
 */
export default {
  name: 'ExtInputAreaAfter',
  components,
  props: {
    /**
     * 用户名密码等信息，{key:value}的格式
     */
    loginData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    dosm() {
      // 为了生成文档
      /**
       * 扩展值变化时，主动触发
       * @property {object} context 扩展值和扩展状态{value:String,valid:Boolean}
       */
      this.$emit('change', {
        value: '扩展的值',
        valid: true,
      }) // eslint-disable-line no-unreachable
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>

<docs>
```[import](../include.md)

```

#### 基本样例

```html static
<template>
  <div style="display:flex">
    <sd-form ref="form" :init-values="values" style="flex:1">
      <sd-form-item name="code" :label="null" @change="setCode" />
    </sd-form>
    <a-button style="height:48px" @click="getCode">获取验证码</a-button>
  </div>
</template>

<script>
import components from './_import-components/ext-input-area-after-import'

export default {
  name: 'ExtInputAreaAfter',

  components,
  props: {
    loginData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      values: [
        {
          name: 'code',
          caption: '验证码',
          dataType: 'string',
          required: true,
        },
      ],
    }
  },
  created() {
    this.$emit('change', {
      valid: false,
    })
  },
  methods: {
    setCode() {
      this.$refs.form
        .validateFields()
        .then(() => {
          this.$emit('change', {
            // 告知登陆组件，验证码的值(必须为字符串格式)，和验证码是否正确填写
            value: this.$refs.form.getFieldValue('code'),
            valid: true,
          })
        })
        .catch(() => {
          this.$emit('change', {
            valid: false,
          })
        })
    },
    getCode() {
      console.log(this.loginData) // 根据用户账号，调用接口发送短信获取验证码
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>


```
</docs>
