Input 输入框

基础用法

<template>
  <plv-input
    placeholder="请输入内容"
    v-model="value" />
</template>

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

显示代码

禁言 & 只读状态

<template>
  <div>
    <plv-input
      disabled
      placeholder="禁用输入框"
      v-model="value"></plv-input>
    <plv-input
      readonly
      placeholder="只读输入框"
      v-model="value"></plv-input>
  </div>
</template>

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

<style lang="scss" scoped>
.plv-input {
  width: 250px;
  display: inline-block;
  margin-right: 20px;
}
</style>

显示代码

显示长度

通过 showLengthLimit 显示长度，enLengt为 ASCII 字符串单位长度，默认0.5，cnLength 为非 ASCII 字符的单位长度，默认计算为 1 个字符。

<template>
  <plv-input
    show-length-limit
    placeholder="请输入内容"
    :maxlength="10"
    :length-mode="2"
    v-model="value" />
</template>

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

显示代码

带有icon的输入框

可以通过prefixIcon、suffixIcon或相应的插槽插入icon图标，通过属性插入图标不需要带 plv-icon- 前缀。

<template>
  <div>
    <div class="input-icon">
      <span class="title">属性方式：</span>
      <plv-input
        prefix-icon="search"
        placeholder="请输入搜索内容"
        v-model="value"></plv-input>
      <plv-input
        suffix-icon="check"
        placeholder="请输入搜索内容"
        v-model="value"></plv-input>
    </div>
    <div class="input-icon">
      <span class="title">slot方式：</span>
      <plv-input
        placeholder="请输入搜索内容"
        v-model="value">
        <span slot="prefix" class="plv-icon-search"></span>
      </plv-input>
      <plv-input
        placeholder="请输入搜索内容"
        v-model="value">
        <span slot="suffix" class="plv-icon-check"></span>
      </plv-input>
    </div>
  </div>
</template>

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

显示代码

前置内容与后置内容

通过`prepend`和`append`的插槽插入元素，若插入select组件会调整相应的样式。

<template>
  <div class="input-prepend-append">
    <plv-input
      placeholder="请输入地址"
      v-model="value1">
      <template slot="prepend">地址：</template>
      <template slot="append">这是一段文字</template>
    </plv-input>
    <plv-input
      placeholder="请输入地址"
      v-model="value2">
      <plv-select
        slot="prepend"
        :options="citys"
        v-model="value3"></plv-select>
      <plv-select
        slot="append"
        :options="register"
        v-model="value4"></plv-select>
    </plv-input>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        citys: [{
          label: '广东省',
          value: 'guangdong'
        }, {
          label: '湖北省',
          value: 'hubei'
        }, {
          label: '河南省',
          value: 'henan'
        }],
        register: [{
          label: '农村',
          value: 'nongcun'
        }, {
          label: '城市',
          value: 'chengshi'
        }]
      };
    }
  };
</script>

显示代码

尺寸

<template>
  <div class="input-size">
    <plv-input placeholder="默认尺寸" v-model="value"></plv-input>
    <plv-input placeholder="中型尺寸" v-model="value" size="medium"></plv-input>
    <plv-input placeholder="小型尺寸" v-model="value" size="small"></plv-input>
    <plv-input placeholder="超小尺寸" v-model="value" size="mini"></plv-input>
  </div>
</template>

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

显示代码

Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	String Number	-	-
type	类型	String	-	text
placeholder	输入框占位文本	String	-	-
size	尺寸	String	medium small mini	-
tabindex	即 input 元素的 tabindex	Number	-	-
autocomplete	即 input 元素的 autocomplete	String	-	off
maxlength	输入内容的最大长度	Number	-	-
show-length-limit	是否显示字符数统计	Boolean	-	false
en-length	ASCII 字符的单位长度	Number	-	0.5
cn-length	非 ASCII 字符的单位长度	Number	-	1
disabled	是否禁用输入框	Boolean	-	false
readonly	输入框是否只读	Boolean	-	false
clearable	是否可以清空	Boolean	-	false
prefixIcon	输入框头部图标	String	-	-
suffixIcon	输入框尾部图标	String	-	-
status	输入框状态	String	-	-
blur-to-enter	按下回车后是否自动失焦	Boolean	-	false

Events

事件名称	说明	回调参数
focus	在 Input 获得焦点时触发	(event: Event)
blur	在 Input 失去焦点时触发	(event: Event)
input	在 Input 值改变时触发	value
clear	点击清空按钮后触发	-
enter	输入框按下 Enter 回车键后触发	-

Slot

name	说明
prepend	输入框前置内容
append	输入框后置内容
prefix	输入框头部内容
suffix	输入框尾部内容