Input

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 值：visible 和 blurHidden 分别代表是否展示以及当 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 配置

插槽

事件

实例方法