Vue ElementPlus Input输入框

Input  输入框


通过鼠标或键盘输入字符

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

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

基础用法

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

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

  export default defineComponent({
    setup() {
      return {
        input: ref(''),
      }
    },
  })
</script>
<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属性即可得到一个可清空的输入框

<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属性即可得到一个可切换显示隐藏的密码框 

<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 来放置图标。 

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506005.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Oracle 低代码平台 Apex 最新版本 23.2 安装过程

趁春节快结束前&#xff0c;安装了一把APEX &#xff0c;到目前为此&#xff0c;APEX最新版本为23.2&#xff0c;23.2和21版本有一些变化&#xff0c;只是用于验证&#xff0c;我 是使用的单独模式&#xff0c;没有安装TOMAT&#xff0c;下面列一下安装过程&#xff1a; 1.环境…

机器学习——最优化模型

最优化模型的概述&#xff1a; 从某种程度上说&#xff0c;我们的世界是由最优化问题组成的。每一天&#xff0c;我们的生活都面临无数的最优化问题&#xff1a;上班怎么选择乘车路线&#xff0c;才能舒服又快速地到达公司&#xff1b;旅游如何选择航班和宾馆&#xff0c;既省…

[flink 实时流基础] 转换算子

flink学习笔记 数据源读入数据之后&#xff0c;我们就可以使用各种转换算子&#xff0c;将一个或多个DataStream转换为新的DataStream。 文章目录 基本转换算子&#xff08;map/ filter/ flatMap&#xff09;聚合算子&#xff08;Aggregation&#xff09;按键分区&#xff08;…

【隐私计算实训营006隐语PIR介绍及开发实践】

1. 隐语实现PIR总体介绍 隐匿查询&#xff08;Private Information Retrieval PIR&#xff09;定义 按服务器数量分类 单服务器方案&#xff08;Single Server&#xff09;多服务器方案&#xff08;Multi-Server&#xff09; 按查询类型分类 Index PIRKeyword PIR 隐语目前…

基于两个单片机串行通信的电子密码锁设计

1.功能 电子号码锁在实际应用中应该有两部分&#xff0c;一部分在外部&#xff0c;有键盘部分和密码显示&#xff1b;另一部分内部&#xff0c;设置密码、显示密码。使用单片机自身带有的串口可以很方便的实现单片机之间的通信&#xff0c;使输入的密码值传送到主机检验是否是…

nginx的https与动态负载均衡

nginx的https 证书可以根据你的域名和服务器服务商去进行签发 , 比如 : 阿里云 腾讯云 百度云 华为云等 这里使用的是腾讯云 : 下载证书 : 选择 nginx: 下载之后传递到服务器上。 下面开始配置nginx的https: 1. 解压下载的证书包 cd /etc/ssl unzip xxcc.dwa_nginx.zip mv…

【A-010】基于SSH的宠物狗商城系统(含论文)

【A-010】基于SSH的宠物狗商城系统&#xff08;含论文&#xff09; 开发环境&#xff1a; Eclipse/MyEclipse、Tomcat8、Jdk1.8 数据库&#xff1a; MySQL 项目介绍&#xff1a; 在科学技术飞速发展的今天&#xff0c;互联网成为人们快速获取、发布和传递信息的重要渠道&am…

Cesium实现渐变面

一、效果图 二、实现思路 使用着色器&#xff0c;通过纹理坐标和其他参数计算出材质的颜色和透明度。通过给定的颜色、漫反射强度和透明度&#xff0c;计算出最终的反射颜色和透明度&#xff0c;并且根据给定的中心点位置和当前像素的纹理坐标&#xff0c;计算出距离中心的距离…

怎么快速上手虚拟化(容器)技术——以 Docker 为例

Docker 整体介绍 Docker 是一种使用 Go 语言开发的容器工具。所谓容器&#xff0c;实际上是一种虚拟化技术&#xff0c;用于为应用提供虚拟化的运行环境&#xff0c;相较于虚拟机具有轻量级、低延迟的特性。 下面是对上述介绍的说明&#xff1a; 应用程序运行需要一定的依赖…

在 C#和ASP.NET Core中创建 gRPC 客户端和服务器

关于gRPC和Google protobuf gRPC 是一种可以跨语言运行的现代高性能远程过程调用 (RPC) 框架。gRPC 实际上已经成为 RPC 框架的行业标准&#xff0c;Google 内外的组织都在使用它来从微服务到计算的“最后一英里”&#xff08;移动、网络和物联网&#xff09;的强大用例。 gRP…

canvas画图,画矩形可拖拽移动,可拖拽更改尺寸大小

提示&#xff1a;canvas画图&#xff0c;画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖拽移动 文章目录 前言一、画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖拽移动总结 前言 一、画矩形&#xff0c;圆形&#xff0c;直线&#xff0c;曲线可拖…

壁纸小程序Vue3(分类页面和用户页面基础布局)

1.配置tabBar pages.json "tabBar": {"color": "#9799a5","selectedColor": "#28B389","list": [{"text": "推荐","pagePath": "pages/index/index","iconPath&quo…

6.6物联网RK3399项目开发实录-驱动开发之LED灯的使用(wulianjishu666)

90款行业常用传感器单片机程序及资料【stm32,stc89c52,arduino适用】 链接&#xff1a;https://pan.baidu.com/s/1M3u8lcznKuXfN8NRoLYtTA?pwdc53f LED 使用 前言 AIO-3399J 开发板上有 2 个 LED 灯&#xff0c;如下表所示&#xff1a; 可通过使用 LED 设备子系统或者直…

EXCEL-VB编程实现自动抓取多工作簿多工作表中的单元格数据

一、VB编程基础 1、 EXCEL文件启动宏设置 文件-选项-信任中心-信任中心设置-宏设置-启用所有宏 汇总文件保存必须以宏启动工作簿格式类型进行保存 2、 VB编程界面与入门 参考收藏 https://blog.csdn.net/O_MMMM_O/article/details/107260402?spm1001.2014.3001.5506 二、…

云计算探索-剖析虚拟化技术

引言 虚拟化技术&#xff0c;作为现代信息技术架构的核心构成元素&#xff0c;以其独特的资源抽象与模拟机制&#xff0c;成功地瓦解了物理硬件与操作系统间的刚性连接&#xff0c;开创了一个资源共享、灵活调配的崭新天地。本文将详细解析虚拟化技术的内涵、发展历程、分类及特…

Android 天气APP(二)获取定位信息

<LinearLayout xmlns:android“http://schemas.android.com/apk/res/android” xmlns:app“http://schemas.android.com/apk/res-auto” xmlns:tools“http://schemas.android.com/tools” android:gravity“center” android:layout_width“match_parent” android:la…

编曲知识16:贴唱混音思路 录音 对轨 降噪

贴唱混音思路 录音 对轨 降噪小鹅通-专注内容付费的技术服务商https://app8epdhy0u9502.pc.xiaoe-tech.com/live_pc/l_6607f17ae4b092c1684f438a?course_id=course_2XLKtQnQx9GrQHac7OPmHD9tqbv 混音思路 贴唱混音、分轨混音 贴唱:由翻唱混音发展而来,指仅处理人声和伴奏…

二期 1.1 微服务是什么?微服务与分布式架构的区别是什么?SpringBoot与Spring Cloud的区别是什么?

文章目录 前言一、单体架构二、微服务是什么?三、微服务与分布式的区别四、SpringBoot与Spring Cloud的区别?前言 欢迎大家来到二期Spring Cloud 微服务项目实战,首先我们应了解 单体架构是什么?它有哪些问题? 微服务是什么,与分布式架构的区别,Java中微服务框架Spring…

Spark学习

目录 一&#xff0c;Spark是什么 二&#xff0c;Spark的运行模式 三&#xff0c;Spark运行的角色有四类&#xff1a; 四&#xff0c;用户程序从最开始的提交到最终的计算执行&#xff0c;需要经历以下几个阶段&#xff1a; 五&#xff0c;存在Master单点故障&#xff08;SPO…

SOC内部集成网络MAC外设+ PHY网络芯片方案:PHY芯片基础知识

一. 简介 本文简单了解一下 "SOC内部集成网络MAC外设 PHY网络芯片方案" 这个网络硬件方案中涉及的 PHY网络芯片的基础知识。 二. PHY芯片基础知识 PHY 是 IEEE 802.3 规定的一个标准模块。 1. IEEE规定了PHY芯片的前 16个寄存器功能是一样的 前面说了&#xf…