# input

# 基础用法

ykc-input 的基础用法。

<template>
  <!-- ykc-input 组件 -->
  <ykc-input v-model="val"></ykc-input>
</template>

<script>
  export default {
    data() {
      return {
        val: ''
      };
    }
  };
</script>

复制代码

# 可清空

<template>
  <!-- ykc-input 组件 -->
  <ykc-input v-model="val" clearable></ykc-input>
</template>

<script>
  export default {
    data() {
      return {
        val: ''
      };
    }
  };
</script>

复制代码

# 密码框

<template>
  <!-- ykc-input 组件 -->
    <div class="input-wrap">
      <ykc-input v-model="val1" type="password"></ykc-input>
      <ykc-input v-model="val2" show-password></ykc-input>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        val1: '123456',
        val2: '123456'
      };
    }
  };
</script>

复制代码

# 禁用状态

<template>
  <!-- ykc-input 组件 -->
  <ykc-input v-model="val" :disabled="true"></ykc-input>
</template>

<script>
  export default {
    data() {
      return {
        val: ''
      };
    }
  };
</script>

复制代码

# 复合型输入框

ykc-input 可前置或后置元素

满

元

<template>
  <!-- ykc-input 组件 -->
  <div class="input-wrap">
    <ykc-input v-model="prependVal">
      <template slot="prepend">满</template>
    </ykc-input>
    <ykc-input v-model="appendVal">
      <template slot="append">元</template>
    </ykc-input>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        prependVal: '',
        appendVal: '',
      };
    }
  };
</script>
<style>
  .input-wrap .ykc-input{
    margin-top: 20px;
  }
</style>

复制代码

# 文本域

ykc-input autosize 还可以设定为一个对象，指定最小行数和最大行数如，{ minRows: 2, maxRows: 6 }。

<template>
  <!-- ykc-input 组件 -->
  <ykc-input v-model="textarea" type="textarea"></ykc-input>
</template>

<script>
  export default {
    data() {
      return {
        textarea: '',
      };
    },
    methods:{
      handleClick(v) {
        console.log('v', v)
      }
    }
  };
</script>
<style>
  .input-wrap .ykc-input{
    margin-top: 20px;
  }
</style>

复制代码

# Attributes

参数	必填	说明	类型	可选值	默认值
type	否	input类型	string	text，textarea 和其他原生 input 的 type 值 (opens new window)	text
value / v-model	是	绑定值	string / number	—	—
maxlength	否	最大输入长度	string / number	—	—
minlength	否	最小输入长度	string / number	—	—
minlength	否	最小输入长度	string / number	—	—
placeholder	否	输入框占位文本	string	—	—
clearable	否	是否可清空	boolean	true / false	false
disabled	否	禁用	boolean	true / false	false
readonly	否	是否只读	boolean	true / false	false
autofocus	否	自动获取焦点	boolean	true / false	false
label	否	输入框关联的label文字	string	—	—
rows	否	输入框行数，只对 type="textarea" 有效	number	—	2
autosize	否	自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }	boolean / object	—	—
showPassword	否	是否显示切换密码图标	boolean	true / false	false

# Slots

name	说明
prepend	输入框前置内容
append	输入框后置内容

# Events

事件名称	说明	回调参数
blur	失去焦点时触发	(event: Event)
focus	获得焦点时触发	(event: Event)
change	在Input 值改变时触发	(value: string / number)
clear	在点击由 clearable 属性生成的清空按钮时触发	—

← button switch →