Element组件（input输入框）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element组件（input输入框）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

格式：

<template>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
</template>
<script>
    export default{
        data(){
            return{
                input:''
            }
         }
    }
</script>

input Attributes

type	类型	type=""	默认text
value	绑定值	value=""
maxlength	最大输入长度	maxlength="number"
show-word-limit	显示剩余输入字数		默认false
minlength	最小输入长度	minlenght="number"
placeholder	输入框占位文本	placeholder=""
clearable	是否可清空		默认false
disabled	禁用		默认false
auto-complete	自动补全	auto-complete="on\|off"	默认off
name
readonly	是否只读		默认false
max	设置最大值
min	设置最小值
step	设置输入字段的合法数字间隔
resize	控制是否能被用户缩放	resize="none\|both\|horizontal\|vertical
autofocus	自动获取焦点		默认false
form
label	输入框关联的label文字	label=""
tabindex	输入流的tabindex

文本域textarea：

<template>
    <el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="textarea"></el-input>
    <el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea2"></el-input>
    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea3"></el-input>
</template>
<script>
export default {
  data() {
    return {
      textarea: ''，
      textarea2: '',
      textarea3: ''
    }
  }
}
</script>

attribute：

type	类型	type="textarea"	类型为文本域，默认text
rows	文本域显示行数	:rows="number"
autosize	使文本域行数根据文本内容自动进行调整		默认false
		:autosize="{minRows:number,maxRows:number}"	最小行数和最大行数

带icon的输入框

el-input,Element组件,vue.js,elementui,前端

prefix-icon	在input组件首部增加显示图标	<el-input prefix-icon="所需图标"></el-input>
suffix-icon	在input组件尾部增加显示图标	<el-input suffix-icon="所需图标"></el-input>
slot	在input组件首部增加显示图标	<el-input><i slot="suffix" class="所需图标"></i></el-input>
slot	在input组件尾部增加显示图标	<el-input><i slot="prefix" class="所需图标"></i></el-input>

复合型输入框

在输入框中前置或后置一个元素（标签|按钮）

通过slot来指定在input中分发的前置或者后置的位置

el-input,Element组件,vue.js,elementui,前端

<template>
  <div>
    <el-input v-model="input1" placeholder="Please input">
      <template #prepend>Http://</template>
    </el-input>
  </div>
  <div class="mt-4">
    <el-input v-model="input2" placeholder="Please input">
      <template #append>.com</template>
    </el-input>
  </div>
  <div class="mt-4">
    <el-input
      v-model="input3"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <el-select v-model="select" placeholder="Select" style="width: 115px">
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
        </el-select>
      </template>
      <template #append>
        <el-button :icon="Search" />
      </template>
    </el-input>
  </div>
  <div class="mt-4">
    <el-input
      v-model="input3"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #prepend>
        <el-button :icon="Search" />
      </template>
      <template #append>
        <el-select v-model="select" placeholder="Select" style="width: 115px">
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
        </el-select>
      </template>
    </el-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const select = ref('')
</script>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>

input Slots

name	说明
prefix	输入框头部内容，只对type="text"有效
suffix	输入框尾部内容，只对type="text"有效
prepend	输入框前置内容，只对type="text"有效
append	输入框后置内容，只对type="text"有效

格式化

formatter和parser

<template>
  <el-input
    v-model="input"
    placeholder="Please input"
    :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
    :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
  />
</template>

密码框

type="password" show-password显示是否可见

el-input,Element组件,vue.js,elementui,前端

<template>
  <el-input
    v-model="input"
    type="password"
    placeholder="Please input password"
    show-password
  />
</template>

Input Event

blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
input	在 Input 值改变时触发	(value: string \| number)
clear	在点击由 clearable 属性生成的清空按钮时触发	—
change	仅在输入框失去焦点或用户按下回车时触发	(value: string \| number)

Input Methods

focus	使 input 获取焦点
blur	使 input 失去焦点
select	选中 input 中的文字文章来源地址https://www.toymoban.com/news/detail-734499.html