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>
相关推荐
white-persist15 分钟前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师1 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。1 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。1 小时前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
李白的故乡1 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端