# 文本框 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>
# 带 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 |
# HcTextbox事件
| 名称 | 说明 | 参数 |
|---|---|---|
change | 值改变事件，仅在失去焦点时触发 | event.value：当前输入值 |
keyup | keyup事件 | event |
keypress | keypress事件 | event |
keydown | keydown事件 | event |
focus | 获取焦点时触发事件 | event |
blur | 失去焦点时触发事件 | event |
登录