Hawthorn-Api

# HtInput 输入框

HtInput 自定义输入框组件，基于el-input实现;
Author andy.ten@tom.com & xukaixing@hotmail.com

# 示例

<template>
  <div>
    <label>标准输入：</label> <ht-input vref="refId" v-model="inputVal" placeholder="请输入" style="width:200px" />
    <label>禁用输入：</label> <ht-input vref="refId" v-model="inputVal" placeholder="请输入" style="width:200px" :disabled="true" />
    <p/>
    <label>不可清空：</label> <ht-input vref="refId" v-model="inputVal" placeholder="请输入" style="width:200px" :clearable="false" />
    <p/>
    <label>控制长度：</label> <ht-input vref="refId" v-model="inputVal" placeholder="200px" style="width:200px" />
    <p/>
    <label>控制长度：</label> <ht-input vref="refId" v-model="inputVal" placeholder="500px"  style="width:500px" />
    <p/>
    <label>文本输入：</label> <ht-input vref="refId"  type="textarea" v-model="inputVal" placeholder="rows:2"  style="width:500px" />
  </div>
</template>
<script>
export default {
  data() {
    return {
       inputVal:''
    } 
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Expand Copy

# API

# Input Attributes

参数 说明 类型 可选值 默认值
vref 设置input的ref属性 String — —
type 设置type属性 String text / textarea text
name 设置input的name属性 String — —
value 设置input的value属性 String — —
placeholder 设置placeholder属性 String — 请输入
size 设置input的大小属性 String medium / small / mini small
prefix-icon 设置前缀icon String — —
suffix-icon 设置后缀icon String — —
disabled 设置disabled属性 Boolean,String true / false false
maxlength 设置maxlength最大长度 Number — 30
clearable 设置是否可清除内容 Boolean true / false true
visible 设置是否可见 Boolean true / false true
readonly 设置readonly属性 Boolean true / false false
rows textarea框设置rows属性 Number — 2
autosize textarea框设置自适应属性 Boolean, Object — false
biz-type 业务属性：tableedit-表格输入框 String tableedit tableedit
columnProp 当是表格编辑input时列属性值 String — —

# Input Event

方法名 说明 参数
input 值改变时响应方法 (inputValue)
blur 焦点失去响应方法 (event,inputValue,field)
focus 获取焦点响应方法 (event,inputValue,field)
clear 获取清空响应方法 (event)
keydown 获取按键按下响应方法 (event)

# 版本

  • v1.1.0

← HtInputNumber输入框 →