Field 输入框

用户可以在文本框内输入或编辑文字。

代码演示

基础用法

title 输入框左侧label文案，v-model 输入框内容，placeholder 输入框占位符。

<hd-field title="title" v-model="value" placeholder="placeholder"></hd-field>

export default {
  data() {
    return {
      title: '密码',
      value: '',
      placeholder: '请输入密码',
    }
  }
}

密码类型输入框

password 是否为密码类型，为true时暗文显示输入框内容。

<hd-field title="密码" v-model="value" :password="password"></hd-field>

export default {
  data() {
    return {
      value: '',
      password: true
    }
  }
}

输入框清空

clearable 是否显示清除按钮，默认false。

<hd-field title="密码" v-model="value" :clearable="clearable"></hd-field>

export default {
  data() {
    return {
      value: '',
      clearable: true
    }
  }
}

输入框禁用

disabled 输入框是否禁用，默认false。

<hd-field title="密码" v-model="value" :disabled="disabled"></hd-field>

export default {
  data() {
    return {
      value: '',
      disabled: true
    }
  }
}

输入文字最大长度

maxlength 限制输入框最大输入字符数量。

<hd-field title="密码" v-model="value" :maxlength="maxlength"></hd-field>

export default {
  data() {
    return {
      value: '',
      maxlength: 20
    }
  }
}

事件

input 当输入框内容发生变化时触发。

<hd-field title="密码" v-model="value" @input="input"></hd-field>

export default {
  data() {
    return {
      value: ''
    }
  }
  methods: {
    input() {
      console.log(this.value)
    }
  }
}

Props

Name	Description	Type	Required	Default
title	输入框title	String	false	默认值是：title
value	输入框的值	String	false	-
type	输入框类型，可选值为：text（文本输入键盘）、number（数字输入键盘）、idcard（身份证输入键盘）、digit（带小数点的数字键盘）、tel（电话输入键盘）	String	false	'text' / 'number' / 'idcard'/ 'digit'/ 'tel'
password	是否为密码类型	Boolean / String	false	默认值是：false
placeholder	占位符	String	false	-
clearable	是否显示清除按钮	Boolean / String	false	默认值是：false
disabled	是否为禁用	Boolean / String	false	默认值是：false
maxlength	输入文字最大长度	Number	false	默认值是：-1

Events

Event Name	Description	Parameters
input	-	-

Slots

Name	Description	Default Slot Content
default	自定义右侧内容	-