# 文本框 Textbox

通过鼠标或键盘输入字符

# 基础用法

基础用法

基础的输入框使用

<title>基础用法</title>
<describe>基础的输入框使用</describe>
<template>
    <hc-textbox v-model="value" placeholder="请输入值" style="width: 200px;"  @focus="keypress"/>
</template>
<script>
export default {
    data: function () {
      return {
        value: '测试'
      }
    },
    methods:{
      keypress: function (e){
        console.log(e)
      }
    }
}
</script>

#

最大长度限制

使用maxlength限制输入框内容的最大长度,并且使用show-maxlength可以控制是否显示计数文本

<title>最大长度限制</title>
<describe>使用maxlength限制输入框内容的最大长度,并且使用show-maxlength可以控制是否显示计数文本</describe>
<template>
    <hc-textbox v-model="value" placeholder="请输入值" style="width: 300px;" :maxlength="128"  :show-maxlength="true"/>
</template>
<script>
export default {
    data: function () {
      return {
        value: '测试'
      }
    }
}
</script>

# 带 icon 的输入框

icon用法

带有图标标记输入类型

<title>icon用法</title>
<describe>带有图标标记输入类型</describe>
<template>
    <hc-textbox v-model="value" placeholder="请输入值" style="width: 200px;"  icon="mp-icon-date-03"  @@icon-click="iconClick"/>
</template>
<script>
export default {
    data: function () {
      return {
        value: '测试'
      }
    },
    methods:{
      iconClick: function (e){
        console.log('点击图标')
      }
    }
}
</script>

# 输入框查看

禁用
输入框查看

输入框禁用和使用

<title>输入框查看</title>
<describe>输入框禁用和使用</describe>
<template>
      <hc-button @click='handleClick' type="primary" style="margin-bottom: 10px;">{{viewable?'启用':'禁用'}}</hc-button>
      <hc-textbox v-model="value" placeholder="请输入值" style="width: 200px;" :viewable="viewable"/>
</template>
<script>
export default {
    data: function () {
      return {
        value: '测试',
        viewable:false
      }
    },
    methods:{
      handleClick: function(){
        this.viewable = !this.viewable
      }
    }
}
</script>

# 输入框清空

输入框可清空

输入框可清空输入框值

<title>输入框可清空</title>
<describe>输入框可清空输入框值</describe>
<template>
      <hc-textbox v-model="value" placeholder="请输入值" style="width: 200px;" clearable/>
</template>
<script>
export default {
    data: function () {
      return {
        value: '测试',
      }
    }
}
</script>

# 加密文本

加密文本

可以指定为密码型的输入框,输入的内容在界面不可见

<title>加密文本</title>
<describe>可以指定为密码型的输入框,输入的内容在界面不可见</describe>
<template>
    <hc-textbox :value="value" type="password" style="width: 200px;"/>
</template>
<script>
export default {
    data: function () {
      return {
        value: '测试'
      }
    }
}
</script>

# 多行文本

多行文本

可换行的输入框,通常处理大量文本

<title>多行文本</title>
<describe>可换行的输入框,通常处理大量文本</describe>
<template>
    <hc-textbox :value="value" type="textarea" :height="120" style="width: 200px;"/>
</template>
<script>
export default {
    data: function () {
      return {
        value: ''
      }
    }
}
</script>

# 输入框回车事件

输入框回车事件

通过keyup、keydown中事件修饰符enter,处理输入框回车事件

<title>输入框回车事件</title>
<describe>通过keyup、keydown中事件修饰符enter,处理输入框回车事件</describe>
<template>
    <hc-textbox :value="value" @keyup.enter.native="handelEnter"/>
</template>
<script>
export default {
    data: function () {
      return {
        value: ''
      }
    },
    methods: {
        handelEnter: function(e){
            console.log('回车')
        }
    }
}
</script>

# 输入框输入事件

输入框回车事件

通过input事件,输入框输入事件

<title>输入框回车事件</title>
<describe>通过input事件,输入框输入事件</describe>
<template>
    <hc-textbox :value="value" @input.native="handelInput"/>
</template>
<script>
export default {
    data: function () {
      return {
        value: ''
      }
    },
    methods: {
        handelInput: function(e){
            console.log('输入')
        }
    }
}
</script>

# 属性及事件

# HcTextbox属性

参数 说明 类型 可选值 默认值
value 当前输入值,可绑定v-model使用 string -- --
type 类型 string text / textarea / password text
viewable 是否查看状态 boolean -- false
maxlength 最大输入长度 number -- 128
icon 输入框尾部图标 string -- --
height 界面显示高度,仅 textarea类型有效 number -- 90px
auto-height 界面自动高度,仅 textarea类型有效 boolean -- false
autosize 最大行数和最小行数,仅 textarea类型有效 object -- {minRows: 2,maxRows: 6}
clearable 能否清空,仅 text 类型有效 boolean -- false
disabled 是否禁用 boolean -- false
resize 是否支持高度拖拽,仅 textarea类型有效(IE浏览器不支持该属性) boolean -- false
show-maxlength 是否显示文本长度计数 boolean -- false

# HcTextbox事件

名称 说明 参数
change 值改变事件,仅在失去焦点时触发 event.value:当前输入值
keyup keyup事件 event
keypress keypress事件 event
keydown keydown事件 event
focus 获取焦点时触发事件 event
blur 失去焦点时触发事件 event