vue之Element-Ui输入框显示与隐藏方式

目录
  • Element-Ui输入框显示与隐藏
    • 使用element-ui比较简单,添加show-password即可
  • Element el-input 输入框详解
    • 1. 用途
    • 2. 输入框
    • 3. 文本域
  • 总结

Element-Ui输入框显示与隐藏

使用element-ui比较简单,添加show-password即可

效果展示:

1. 隐藏展示

2. 显示

<el-input placeholder="请输入账号密码" v-model="input" show-password></el-input>

Element el-input 输入框详解

1. 用途

输入框是使用非常多的元素,用来输入用户名、密码等等信息。Element提供了功能和样式丰富的输入框,本篇就来了解下。

2. 输入框

输入框为el-input,其编译后生成的HTML元素为input,样式class中包含el-input,所以我们首先设定下统一样式,便于演示。

.el-input {
  width: 200px;
}

2.1 输入框基本功能

输入框可以与js变量双向绑定,代码为:

    输入框基本功能:双向绑定
    <el-input v-model="input1"></el-input> 输入内容为:{{input1}}
    <el-divider></el-divider>

效果如下:

2.2 显示占位文本

占位文本可以在输入框内容未输入时显示提示信息。

  	输入框功能1:显示占位文本
    <el-input v-model="input1" placeholder="请输入姓名"></el-input>
    <el-divider></el-divider>

2.3 禁用

可以使用disabled属性禁用输入框。

 	输入框功能2:禁用
    <el-input v-model="input1" disabled></el-input>
    <el-divider></el-divider>

2.4 可清空的输入框

可以使用clearable属性提供可清空功能,当输入框中已有内容时即显示一个清空按钮,点击清空按钮后直接清空文本框。

    输入框功能3:可清空
    <el-input v-model="input1" clearable></el-input>
    <el-divider></el-divider>

2.5 显示密码框

可以通过show-password属性将输入框显示为密码框。

  	输入框功能4:显示为密码框
    <el-input v-model="input1" show-password></el-input>
    <el-divider></el-divider>

2.6 显示图标

可以通过prefix-icon或suffix-icon属性为输入框设置显示在前方/后方的图标。

    输入框功能5:显示图标
    <el-input v-model="input1" prefix-icon="el-icon-search"></el-input>
    <el-input v-model="input1" suffix-icon="el-icon-search"></el-input>
    <el-divider></el-divider>

2.7 输入长度限制

可以设置输入长度的上限。

 	输入框功能6:输入长度限制
    <el-input v-model="input1" maxlength="10" show-word-limit></el-input>
    <el-divider></el-divider>

3. 文本域

可以使用type="textarea"将输入框转换为文本域,注意文本域编译后对应HTML类型为<textarea>,对应样式为el-textarea,所以我们CSS部分设置为:

.el-textarea {
  width: 400px;
}

HTML代码:

  	文本域基本功能:显示多行文本
    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="input1"></el-input>
    <el-divider></el-divider>

效果:

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue+elementUi 实现密码显示/隐藏+小图标变化功能

    vue+elementUi 实现密码显示/隐藏+小图标变化(js一共三行代码,其中一行为了美观)...,先给大家展示下效果图,感觉不错可以参考实现代码. [效果图] [html] // 前后代码[略] <el-form-item label="密码" prop="pwd"> <el-input v-model="ruleForm.pwd" :type="pwdType" placeholder="请

  • vue elementUI表格控制显示隐藏对应列的方法

    本文实例为大家分享了vue elementUI表格控制显示隐藏对应列的具体代码,供大家参考,具体内容如下 需求:后端返回全部列数据.前端根据选项来显示对应的列,如果不勾选,默认全部隐藏. 效果图 勾选后显示对应的列 上代码 html部分 这里用v-if来显示隐藏,因为这个elementul组件的原因,v-show不生效,要用v-if <el-table-column         v-if="lists[0].ispass"           label="Uppe

  • elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

    在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容 当状态为显示的时候, 该行第一个按钮为隐藏; 当状态为隐藏的时候, 该行第一个按钮为显示; 具体代码如下: <!-- 数据表格 --> <el-table :data="tableData" class="table" stripe border v-loading="loading"> <el-table-column type="ind

  • vue之Element-Ui输入框显示与隐藏方式

    目录 Element-Ui输入框显示与隐藏 使用element-ui比较简单,添加show-password即可 Element el-input 输入框详解 1. 用途 2. 输入框 3. 文本域 总结 Element-Ui输入框显示与隐藏 使用element-ui比较简单,添加show-password即可 效果展示: 1. 隐藏展示 2. 显示 <el-input placeholder="请输入账号密码" v-model="input" show-pa

  • vue项目element UI input框扫码枪扫描过快出现数据丢失问题及解决方案

    目录 项目需求: 解决方案探索 错误代码: 问题就出在 解决方法 完整代码 如下 项目需求: 输入框要掉两个接口,根据第一个验证接口返回的code,弹不同的框,点击弹框确认再掉第二个接口 根据客户现场反应,扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题.于是开始了测试之路. 解决方案探索 1.首先考虑 ,可能是因为扫描过快,服务端接口还没返回过来,输入框就已经清空了值 导致条码有丢失字符的现象,所以我这边做了一个缓存,将输入框的值存到一个数组中去,定时上传到接口. [x]2.考虑到可能是

  • vue.js 左侧二级菜单显示与隐藏切换的实例代码

    废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type

  • vue.js使用v-if实现显示与隐藏功能示例

    本文实例讲述了vue.js使用v-if实现显示与隐藏功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

  • vue+axios+element ui 实现全局loading加载示例

    实现全局loading加载 分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对? import axios from 'axios'; import { Message, Loading } from 'element-ui'; import Cookies from 'js-cookie'; import router from '@/router/index' let loading //定义loading变量 function st

  • Vue中子组件的显示与隐藏方式

    目录 子组件的显示与隐藏 第一步 使用v-show 1.1 父组件 1.2 子组件 2 第二步 父子组件传参 2.1 父组件 2.2 子组件 子组件的显示与隐藏 在使用Vue开发前端页面的过程中,经常都会遇到需要在父组件中控制子组件的显示/隐藏,比如弹出窗口.最简单的方法就是:通过父子组件间的数据双向绑定来实现.这种方法虽然简单,但只是针对于父与子组件这种关系来实现的.如果是子组件与子组件之间,可以考虑使用Vuex来完成. 另外我自己也是一个前端小白,为了更方便大家理解,我将代码拆分成了两个步骤

  • vue3.0安装Element ui及矢量图使用方式

    在此只关注v3的安装及使用,如果想了解v2可移步到其官网:https://element.eleme.io/#/zh-CN/component/installation v3官网:https://element-plus.org/zh-CN/guide/installation.html 使用element ui时vue2和vue3的区别 安装命令 main.js中引入文件有所不同 使用icon时v2不需要安装,v3需安装 v2和v3在vue文件中使用icon时编写方式有所不同 icon在v2中

  • 关于element ui中el-cascader的使用方式

    目录 element ui中el-cascader使用 例→ 代码 element中el-cascader使用及自定义key名 element ui中el-cascader使用 要想实现进入页面直接选中选择器中的选项 例→ 那v-model绑定的值必须是数组形式的!!(element ui官方文档中没提到这一点好像,我也是试了很多次才发现的) 代码 <el-form-item label="分类:" prop="region" class="regi

  • 解决Vue的项目使用Element ui 走马灯无法实现的问题

    1.在vue项目中引入element ui http://element.eleme.io/#/zh-CN/component/carousel 引入后,HTML部分 <el-carousel height="150px"> <el-carousel-item v-for="item in imgList" :key="item" height="300px" > <h3><img :

  • vue基于input实现密码的显示与隐藏功能

    前言 大家都知道,一般情况下,输入框的密码我们是看不到密码的,只有当我们点击查看密码的小图标时,密码才会显现出来,实现起来也非常简单,通过点击图标让input的type属性变化即可.但是隐藏的密码一般是 "•" 展示,那我们想要用 "*" 或者其他的符号显示该怎么办呢,今天就教大家用其他的符号代替 "•" 在密码隐藏时展示. 实现效果 实现思路 1.首先我们要先在data中定义一个变量用来控制小图标的显示与隐藏:2.在页面中循环遍历data中的p

随机推荐