Vue ElementPlus Input 输入框

Input 输入框


通过鼠标或键盘输入字符

input 为受控组件,它总会显示 Vue 绑定值。

通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变,不支持 v-model 修饰符。

基础用法

javascript 复制代码
<template>
  <el-input v-model="input" placeholder="请输入内容"></el-input>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input: ref(''),
      }
    },
  })
</script>
javascript 复制代码
<el-input 
v-model="user.name" 
prefix-icon="UserFilled" 
placeholder="请输入账号" 
clearable
>
</el-input>

<el-input 
v-model="user.password" 
prefix-icon="Lock" 
placeholder="请输入密码" 
clearable 
show-password
>
</el-input>

<script>
export default ({
    data() {
        return{
           user:{
             name: '',
             password: '' 
           }
        }
    },
   methods:{
    
   }
})
</script>

可清空


使用clearable属性即可得到一个可清空的输入框

html 复制代码
<template>
  <el-input placeholder="请输入内容" v-model="input" clearable> </el-input>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input: ref(''),
      }
    },
  })
</script>

密码框


使用show-password属性即可得到一个可切换显示隐藏的密码框

html 复制代码
<template>
  <el-input placeholder="请输入密码" v-model="input" show-password></el-input>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input: ref(''),
      }
    },
  })
</script>

带 icon 的输入框


带有图标标记输入类型

可以通过 prefix-icon 和 suffix-icon 属性在input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。

html 复制代码
<template>
  <div class="demo-input-suffix">
  属性方式:
  <el-input
    placeholder="请选择日期"
    suffix-icon="el-icon-date"
    v-model="input1"
  >
  </el-input>
  <el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="input2"
  >
  </el-input>
</div>
<div class="demo-input-suffix">
  slot 方式:
  <el-input placeholder="请选择日期" v-model="input3">
    <template #suffix>
      <i class="el-input__icon el-icon-date"></i>
    </template>
  </el-input>
  <el-input placeholder="请输入内容" v-model="input4">
    <template #prefix>
      <i class="el-input__icon el-icon-search"></i>
    </template>
  </el-input>
</div>
</template>

<script>
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    setup() {
      return {
        input1: ref(''),
        input2: ref(''),
        input3: ref(''),
        input4: ref(''),
      }
    },
  })
</script>
<style>
  .demo-input-label {
    display: inline-block;
    width: 130px;
  }
</style>
相关推荐
mCell9 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip9 小时前
Node.js 子进程:child_process
前端·javascript
excel12 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel13 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping14 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙15 小时前
[译] Composition in CSS
前端·css
白水清风15 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix16 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780016 小时前
new、原型和原型链浅析
前端·javascript