更新记录

1.0.5（2022-04-20）

1,修复NVUE中多行文本自适应高度问题

1.0.4（2021-12-13）

1,新增type类型,支持多行文本输入

1.0.3（2021-12-01）

1,增加输入框绑定事件 2,修复vue3问题

平台兼容性

xl-input 高亮输入框

**组件名：xl-input

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

暂不支持通过npm方式使用组件

代码演示

在 template 中使用组件

基本用法

如正常使用input输入框一样使用:

    <xl-input
        v-model="inputText" 
        placeholder="请输入"
    />

输入时边框高亮

    <xl-input
        v-model="inputText" 
        placeholder="请输入"
        highColor="#F759AB"
    />

输入时闪烁

    <xl-input
        v-model="inputText" 
        unit="单位"
        placeholder="请输入"
        highColor="#F759AB"
        animalStyle="twink"
    />

事件

    <xl-input
        class="xl-input" 
        v-model="inputText" 
        type="text"
        unit="单位"
        placeholder="请输入"
        highColor="#F759AB"
        animalStyle="none"
        :disabled="false"
        textAlign="right"
        height="100"
        radius="20"
        leftSpace="40"
        rightSpace="20"
        unitSize="30"
        font="10"
        @input="inputAction"
        @focus="focusAction"
        @blur="blurAction"
        @confirm="confimAction"
    />

多行文本输入框

    <xl-input
        v-model="inputText" 
        placeholder="请输入"
        type="textarea"
        highColor="#F759AB"
        animalStyle="twink"
    />

API

xl-input Props

xl-input Action

注:

1,input 组件上有默认的 min-height 样式，如果 min-height 的值大于 height 的值那么 height 样式无效