尺寸

按钮有大（large）、正常（normal）、小（small）通过size属性决定默认正常 三种尺寸使用时根据页面按钮权重，视情况而定

• large

<template>
  <higher-input size="large" v-model="value"> </higher-input>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>

Expand Copy Copy

• normal

<template>
  <higher-input size="normal" v-model="value"> </higher-input>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>

Expand Copy Copy

• small

<template>
  <higher-input size="small" v-model="value"> </higher-input>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>

Expand Copy Copy

禁用状态

• 通过 disabled 属性指定是否禁用 input 组件

<template>
  <higher-input placeholder="请输入内容" v-model="input" disabled>
  </higher-input>
</template>
<script>
export default {
  data() {
    return {
      input: "",
    };
  },
};
</script>

Expand Copy Copy

带 icon 的输入框

带有图标标记输入类型

属性方式：

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

<div class="demo-input-suffix">
  属性方式：
  <higher-input
    placeholder="请选择日期"
    suffix-icon="el-icon-date"
    v-model="input1">
  </higher-input>
  <higher-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="input2">
  </higher-input>
</div>
<!-- <div class="demo-input-suffix">
  slot 方式：
  <el-input
    placeholder="请选择日期"
    v-model="input3">
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
  </el-input>
  <el-input
    placeholder="请输入内容"
    v-model="input4">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
</div> -->

<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
      input4: "",
    };
  },
};
</script>

Expand Copy Copy

密码框

• 密码输入框/敏感信息输入框附加清空和查看操作

使用show-password属性即可得到一个可切换显示隐藏的密码框

<higher-input placeholder="请输入密码" v-model="input" show-password></higher-input>

<script>
export default {
  data() {
    return {
      input: "",
    };
  },
};
</script>

Expand Copy Copy

文本域

• 文本输入框可提供区域变动的输入条件
• 文字框高度和可变动与否取决于文字框所处模块，在弹窗等空间有限的场景尽量使用滚动条实现文本的浏览编辑；除了富文本编辑外，文本框编辑要考虑格式保留问题

用于输入多行文本信息，通过将 input-type 属性的值指定为 textarea。

文本域高度可通过 rows 属性控制

<higher-input
  input-type="textarea"
  :rows="3"
  placeholder="请输入内容"
  v-model="textarea">
</higher-input>

<script>
export default {
  data() {
    return {
      textarea: "",
    };
  },
};
</script>

Expand Copy Copy

带选择单位

• 该功能的所有选项都可以在from组件中的list数组中使用
• 1.5.8之后单位绑定在unit-value上不在使用options

设置unitOptions就可以快捷添加单位，key为添加slot的名称 目前有："append"， "prepend"两种

设置unit为list那么他就会标记成下拉单选

<template>
  <li class="demo-input-bottom">设置unitOptions就可以快捷添加单位，key为添加slot的名称 目前有："append"，  "prepend"两种</li>
  <higher-input
    size="large"
    v-model="value1"
    :unitOptions="unitOptions2"
    :unit-value="unitValue"
  >
  </higher-input>
  <li class="demo-input-bottom">设置unit为list那么他就会标记成下拉单选</li>
  <higher-input
    size="large"
    v-model="value"
    :unitOptions="unitOptions"
    :unit-value="unitValue"
  >
  </higher-input>
</template>
<script>
  export default {
    data() {
      return {
        value: '',
        value1: '',
        unitValue: {
          qunit: 'n',
          cunit: 's'
        },
        unitOptions2: {
          "append": {
            unit: '年'
          }
        },
        unitOptions: { 
          "append": {
            key: 'qunit',
            unit: [
              {
                label: '年',
                value: 'n'
              },
              {
                label: '月',
                value: 'y'
              }
            ]
          },
          "prepend": {
            width: '85px',
            key: 'cunit',
            unit: [
              {
                label: '时间',
                value: 's'
              },
              {
                label: '速度',
                value: 'n'
              }
            ]
          }
        }
      }
    }
  }
</script>

Expand Copy Copy

输入长度限制

maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。

<higher-input
  input-type="text"
  placeholder="请输入内容"
  v-model="text"
  maxlength="20"
  show-word-limit
  width="180px"
>
</higher-input>
<div style="margin: 20px 0;"></div>
<higher-input
  input-type="textarea"
  placeholder="请输入内容"
  v-model="textarea"
  maxlength="30"
  show-word-limit
>
</higher-input>

<script>
export default {
  data() {
    return {
      text: '',
      textarea: ''
    }
  }
}
</script>

Expand Copy Copy

带输入建议

根据输入内容提供对应的输入建议

• 通过component-name来修改当前输入框的组件类型，更改为autocomplete

• autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

激活即列出输入建议

输入后匹配输入建议

<div class="demo-autocomplete">
  <div class="sub-title">激活即列出输入建议</div>
  <higher-input
    component-name="autocomplete"
    class="inline-input"
    v-model="state1"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @select="handleSelect"
  ></higher-input>
  <div class="sub-title">输入后匹配输入建议</div>
  <higher-input
    component-name="autocomplete"
    class="inline-input"
    v-model="state2"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    :trigger-on-focus="false"
    @select="handleSelect"
  ></higher-input>
</div>
<script>
  export default {
    data() {
      return {
        restaurants: [],
        state1: '',
        state2: ''
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
          { "value": "枪会山", "address": "上海市普陀区棕榈路" },
          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
          { "value": "钱记", "address": "上海市长宁区天山西路" },
          { "value": "壹杯加", "address": "上海市长宁区通协路" },
          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
          { "value": "浏阳蒸菜", "address": "天山西路430号" },
          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
          { "value": "阳阳麻辣烫", "address": "天山西路389号" },
          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
        ];
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>

Expand Copy Copy

Input Attributes

参数	说明	类型	可选值	默认值
inputType	类型	string	text，textarea 和其他 原生 input 的 inputType 值 (opens new window)	text
value / v-model	绑定值	string / number	—	—
maxlength	原生属性，最大输入长度	number	—	—
minlength	原生属性，最小输入长度	number	—	—
show-word-limit	是否显示输入字数统计，只在 inputType = "text" 或 inputType = "textarea" 时有效	boolean	—	false
placeholder	输入框占位文本	string	—	—
clearable	是否可清空	boolean	—	false
show-password	是否显示切换密码图标	boolean	—	false
disabled	禁用	boolean	—	false
size	输入框尺寸，只在 inputType!="textarea" 时有效	string	medium / small / mini	—
prefix-icon	输入框头部图标	string	—	—
suffix-icon	输入框尾部图标	string	—	—
rows	输入框行数，只对 inputType="textarea" 有效	number	—	2
autosize	自适应内容高度，只对 inputType="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }	boolean / object	—	false
autocomplete	原生属性，自动补全	string	on, off	off
auto-complete	下个主版本弃用	string	on, off	off
name	原生属性	string	—	—
readonly	原生属性，是否只读	boolean	—	false
max	原生属性，设置最大值	—	—	—
min	原生属性，设置最小值	—	—	—
step	原生属性，设置输入字段的合法数字间隔	—	—	—
resize	控制是否能被用户缩放	string	none, both, horizontal, vertical	—
autofocus	原生属性，自动获取焦点	boolean	true, false	false
form	原生属性	string	—	—
label	输入框关联的label文字	string	—	—
tabindex	输入框的tabindex	string	-	-
validate-event	输入时是否触发表单的校验	boolean	-	true

Input Slots

name	说明
prefix	输入框头部内容，只对 inputType="text" 有效
suffix	输入框尾部内容，只对 inputType="text" 有效
prepend	输入框前置内容，只对 inputType="text" 有效
append	输入框后置内容，只对 inputType="text" 有效

Input Events

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
change	仅在输入框失去焦点或用户按下回车时触发	(value: string | number)
input	在 Input 值改变时触发	(value: string | number)
clear	在点击由 clearable 属性生成的清空按钮时触发	—
keydown	在键盘按下时候触发	(event: Event)

Input Methods

方法名	说明	参数
focus	使 input 获取焦点	—
blur	使 input 失去焦点	—
select	选中 input 中的文字	—

Autocomplete Attributes

参数	说明	类型	可选值	默认值
placeholder	输入框占位文本	string	—	—
disabled	禁用	boolean	—	false
value-key	输入建议对象中用于显示的键名	string	—	value
value	必填值，输入绑定值	string	—	—
debounce	获取输入建议的去抖延时	number	—	300
placement	菜单弹出位置	string	top / top-start / top-end / bottom / bottom-start / bottom-end	bottom-start
fetch-suggestions	返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它	Function(queryString, callback)	—	—
popper-class	Autocomplete 下拉列表的类名	string	—	—
trigger-on-focus	是否在输入框 focus 时显示建议列表	boolean	—	true
name	原生属性	string	—	—
select-when-unmatched	在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件	boolean	—	false
label	输入框关联的label文字	string	—	—
prefix-icon	输入框头部图标	string	—	—
suffix-icon	输入框尾部图标	string	—	—
hide-loading	是否隐藏远程加载时的加载图标	boolean	—	false
popper-append-to-body	是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false	boolean	-	true
highlight-first-item	是否默认突出显示远程搜索建议中的第一项	boolean	—	false

Autocomplete Slots

name	说明
prefix	输入框头部内容
suffix	输入框尾部内容
prepend	输入框前置内容
append	输入框后置内容

Autocomplete Scoped Slot

name	说明
—	自定义输入建议，参数为 { item }

Autocomplete Events

事件名称	说明	回调参数
select	点击选中建议项时触发	选中建议项
change	在 Input 值改变时触发	(value: string | number)

Autocomplete Methods

方法名	说明	参数
focus	使 input 获取焦点	-