<template>
    <van-field 
      :value="phone"
      @input="input"
      placeholder="手机号"
      label-align="right"
      :disabled="!canEditPhone"
      clearable
    />
</template>
<script lang="ts">
import { Component, Vue, Model, Emit, Prop } from 'vue-property-decorator';
import { Field } from 'vant';
import { isPhone } from '@/const/pattern';
/**
 * 手机号输入框
 */
@Component({
  name: 'PhoneInput',
  components: {
    [Field.name]: Field,
  },
})
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">
</style>