Input

优质
小牛编辑
124浏览
2023-12-01

1.5.0 新增

输入框组件。支持使用v-model对数据双向绑定,支持一键清空内容。

示例

  • 基本用法

    使用v-model对输入内容双向绑定。

    <cube-input v-model="value" ></cube-input>
    
    export default {
      data() {
        return {
          value: ''
        }
      }
    }
    
  • 控制最大长度

    通过 watch 组件的 value 值的长度可实现手工控制值长度。

    <cube-input v-model="value"></cube-input>
    
    export default {
      data() {
        return {
          value: ''
        }
      },
      watch: {
        value(newV) {
          if (newV.length > 10) {
            newV = newV.slice(0, 10)
            this.$nextTick(() => {
              this.value = newV
            })
          }
        }
      }
    }
    

    上述代码就是控制输入内容长度不得超过10位。

  • 清空按钮

    可通过clearable配置清空按钮。

    在 1.11.0 版本之前 clearable 的值是布尔类型的,表示是否展示清除按钮;

    在 1.11.0 版本之后 clearable 可配置为布尔类型,还可以配置为对象。

    <cube-input
      v-model="value"
      :clearable="clearable"
    ></cube-input>
    
    export default {
      data() {
        return {
          value: '',
          clearable: {
            visible: true,
            blurHidden: true
          }
        }
      }
    }
    

    clearable 配置的对象可以包含两个 key 值:visibleblurHidden 分别代表是否展示以及当 Input 元素离焦的时候是否隐藏。

  • 密码配置

    可通过eye设置密码眼睛。

    <cube-input
      v-model="value"
      :placeholder="placeholder"
      :type="type"
      :maxlength="maxlength"
      :readonly="readonly"
      :disabled="disabled"
      :autofocus="autofocus"
      :autocomplete="autocomplete"
      :eye="eye"
    ></cube-input>
    
    export default {
      data() {
        return {
          value: '',
          placeholder: '请输入内容',
          type: 'password',
          readonly: true,
          maxlength: 100,
          disabled: true,
          autofocus: true,
          autocomplete: true,
          eye: {
            open: true,
            reverse: false
          }
        }
      }
    }
    

    如同上边展示的,除了上述配置,还支持原生 Input 元素的大部分配置。

Props 配置

参数说明类型可选值默认值
typeinput类型Stringtext/number/password/datetext
v-model绑定的值String-
disabled禁用状态Booleantrue/falsefalse
readonly只读状态Booleantrue/falsefalse
maxlength最大输入长度Number-60
placeholder占位文本String-
autofocus自动对焦Booleantrue/falsefalse
autocomplete自动补全Booleantrue/falsefalse
clearable是否使用清空按钮,1.11.0 后可配置为对象形式 {visible: true, blurHidden: true},其中 visible 控制是否显示,blurHidden 控制离焦后是否隐藏Boolean/Object1.11.0+true/false/{visible: true, blurHidden: true}false
eye默认 false,密码眼睛不可见;如果是 true ,则相当于配置为对象 { open: true, reverse: false }。对象形式表示使用密码眼睛。其中 open 控制眼睛张开还是闭合。reverse 控制密码可见和眼睛开闭是否相反。Boolean/Objecttrue/false/{open: true/false, reverse: true/false}false

插槽

名字说明
prepend前置内容
append后置内容

事件

事件名说明参数
focus输入框聚焦后触发此事件,如果禁用状态,则不触发e - 事件对象
blur输入框失焦后触发此事件e - 事件对象
change绑定值改变且输入框失去焦点后触发e - 事件对象
input绑定值变化时触发更新后的绑定值

实例方法

方法名说明
focus1.12.10+获得焦点
blur1.12.10+离焦

最后更新:

类似资料

  • 值的立方体只是值与自身相乘的三倍。 For example, 2的立方体是(2 * 2 * 2)= 8。 算法 (Algorithm) 该程序的算法简单易行 - START Step 1 → Take integer variable A Step 2 → Multiply A three times Step 3 → Display result as Cube STOP 伪

  • Cube 是一个开源的基于 MongoDB 的数据分析工具 Cube 的收集器接收事件并将这些事件保持在 MongoDB 中。你可通过 UDP、HTTP POST 或者 WebSockets 来发送事件。同时 Cube 内置支持接受来自 collectd 的事件。

  • 在前面的章节中,我们已经看到了如何绘制三角形并旋转它。 现在,在本章中,您可以了解如何使用3D立方体,如何旋转它,如何在其上附加图像。 同样,本章提供了绘制3D立方体并为其应用颜色并将图像附加到其上的示例。 下面给出了绘制三维立方体并为其应用颜色的程序。 import java.awt.DisplayMode; import javax.media.opengl.GL2; import javax

  • 找到给定数字是偶数或奇数,是一个经典的C程序。 我们将在C中学习使用条件语句if-else 。 算法 (Algorithm) 这个程序的算法很简单 - START Step 1 → Take integer variable A Step 2 → Assign value to the variable Step 3 → Perform A modulo 2 and check

  • cube-flowable 工作流引擎旨在打造一套零代码、领先、且快速实用的引擎工具,助力开发者在面对工作流开发任务时,除去学习工作流框架知识和API的学习成本且不去关心工作流是什么技术,无需了解学习,安装使用cube-flowable工作流引擎并应用落地。 此工作流引擎是零代码或低代码的工作流引擎,安装配置开箱即可使用,完全适用于中国国情的工作流引擎。主要特点包括: 在线拖拽可视化业务表单,并自

  • cube-ui 是由滴滴开源的基于 Vue.js 实现的移动端组件库。 功能特性 质量可靠 由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。 体验极致 以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。 标准规范 遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。 扩展性强 支持按需引入和后