WARNING

清除按钮绑定了touchstart事件，请在手机模拟器模式查看该功能

input props

属性	描述	类型	默认值
value	要绑定的值，可通过v-model绑定	_number ｜ string _	-
height	高度	number	40
type	input类型	string	text
placeholder	当value为空是展示的文案	string	-
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
autocomplete	是否允许浏览器自动填充（on, off）	string	off
autofocus	自动获取焦点 ios不支持	boolean	false
clearable	是否展示清除按钮	boolean	true
showEyes	是否展示密码眼睛	boolean	true
maxlength	最大长度	number	Infinity
hasBorder	是否显示border	boolean	true
integer	是否限制为整数	boolean	true

input slot

名称	描述
beforeInsert	在input之前的插槽
afterInsert	在input之后的插槽

input events

名称	描述	参数
input	input事件	value
change	change事件	value
blur	失去焦点触发	event
focus	获取焦点触发	event

例子代码

基础icon

<template>
  <div>
    <div class="items">
      <p class="item_title">基础用法, 关闭清除按钮</p>
      <vill-input
        v-model="inputValue"
        placeholder="请输入内容"
        :clearable="false"
      />
      <p class="item_change">{{inputValue}}</p>
    </div>
    <div class="items">
      <p class="item_title">不要边框且最大输入20个字符</p>
      <vill-input
        v-model="inputValue2"
        placeholder="请输入内容"
        :hasBorder="false"
        :maxlength="20"
      />
      <p class="item_change">{{inputValue2}}</p>
    </div>
    <div class="items">
      <p class="item_title">禁用input</p>
      <vill-input
        v-model="inputValue3"
        placeholder="禁用了"
        :disabled="true"
      />
    </div>
    <div class="items">
      <p class="item_title">只读input</p>
      <vill-input
        v-model="inputValue4"
        placeholder="只读"
        :readonly="true"
      />
      <p class="item_change">{{inputValue4}}</p>
    </div>
    <div class="items">
      <p class="item_title">自动获取焦点，ios下无效</p>
      <vill-input
        v-model="inputValue5"
        placeholder="请输入"
        :autofocus="true"
      />
      <p class="item_change">{{inputValue5}}</p>
    </div>
    <div class="items">
      <p class="item_title">支持数字,只允许整数</p>
      <vill-input
        type="number"
        v-model="inputValue6"
        placeholder="只允许整数"
      />
      <p class="item_change">{{inputValue6}}</p>
    </div>
    <div class="items">
      <p class="item_title">支持数字,允许小数</p>
      <vill-input
        type="number"
        v-model="inputValue7"
        placeholder="允许小数"
        :integer="false"
      />
      <p class="item_change">{{inputValue7}}</p>
    </div>
    <div class="items">
      <p class="item_title">密码</p>
      <vill-input
        v-model="inputValue8"
        type="password"
        placeholder="请输入密码"
        :height="38"
      >
      </vill-input>
       <p class="item_change">{{inputValue8}}</p>
    </div>
    <div class="items">
      <p class="item_title">前后插槽</p>
      <vill-input
        v-model="inputValue9"
        placeholder="请输入"
      >
        <template #beforeInsert>
          <vill-icon name="search" />
        </template>
        <template #afterInsert>
          <span>元</span>
        </template>
      </vill-input>
       <p class="item_change">{{inputValue9}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      inputValue: '',
      inputValue2: '',
      inputValue3: '',
      inputValue4: '啦啦啦',
      inputValue5: '',
      inputValue6: '',
      inputValue7: '',
      inputValue8: '',
      inputValue9: ''
    }
  }
}
</script>