<template>
  <van-field
    class="phone-input"
    :value="phone"
    @input="input"
    placeholder="请输入手机号"
    :maxlength="11"
    label-align="right"
    :disabled="!canEditPhone"
    clearable
  />
</template>
<script lang="ts">
import { Component, Vue, Model, Emit, Prop } from 'vue-property-decorator';
import { isPhone } from '@/const/pattern';
/**
 * 手机号输入框
 */
@Component({
  name: 'PhoneInput',
})
export default class PhoneInput extends Vue {
  @Model('input', { type: String, required: true })
  private readonly phone!: string;
  @Prop({ type: Boolean, default: true })
  private readonly canEditPhone!: boolean;

  @Emit('input')
  private input(e: string) {
    return e;
  }
}
</script>
<style scoped lang="scss">
.phone-input {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1f292d;
}
</style>
