ElementUI Form:Input 输入框

news2025/7/9 2:48:30

ElementUI安装与使用指南

Input 输入框

点击下载learnelementuispringboot项目源码

效果图

在这里插入图片描述

el-input.vue (Input 输入框)页面效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

项目里el-input.vue代码

<script>
export default {
  name: 'el_input',
  data() {
    return {
      input: '',
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      textarea: '',
      textarea1: '',
      textarea2: '',
      input5: '',
      input6: '',
      input7: '',
      select: '',
      restaurants: [],
      state1: '',
      state2: '',
      restaurants2: [],
      state: '',
      state3: '',
      timeout:  null,
      text: '',
      textarea3: ''
    }
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },
        { "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },
        { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
        { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
        { "value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
        { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
        { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
        { "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },
        { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
        { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
        { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
        { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
        { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F" },
        { "value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层" },
        { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
        { "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },
        { "value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺" },
        { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
        { "value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
        { "value": "枪会山", "address": "上海市普陀区棕榈路" },
        { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
        { "value": "钱记", "address": "上海市长宁区天山西路" },
        { "value": "壹杯加", "address": "上海市长宁区通协路" },
        { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元" },
        { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
        { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
        { "value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
        { "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },
        { "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },
        { "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },
        { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
        { "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },
        { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
        { "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },
        { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
        { "value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
        { "value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部" },
        { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
        { "value": "浏阳蒸菜", "address": "天山西路430号" },
        { "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },
        { "value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室" },
        { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
        { "value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号" },
        { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
        { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
        { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
        { "value": "阳阳麻辣烫", "address": "天山西路389号" },
        { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
      ];
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
}

</script>

<!--
  https://element.eleme.cn/#/zh-CN/component/input#input-shu-ru-kuang
-->

<template>
  <div class="el_input_root">
    <h2>Input 输入框</h2>
    <h5>通过鼠标或键盘输入字符</h5>
    <p>
      Input 为受控组件,它总会显示 Vue 绑定值。<br/>

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

      不支持 v-model 修饰符
    </p>
    <div style="width: 300px;">
      <h3>一、基础用法</h3>
      <el-input v-model="input" placeholder="请输入内容"></el-input>

      <h3>二、禁用状态</h3>
      <h5>通过 disabled 属性指定是否禁用 input 组件</h5>
      <el-input
          placeholder="请输入内容"
          v-model="input"
          :disabled="true">
      </el-input>

      <h3>三、可清空</h3>
      <h5>使用clearable属性即可得到一个可清空的输入框</h5>
      <el-input
          placeholder="请输入内容"
          v-model="input"
          clearable>
      </el-input>

      <h3>四、密码框</h3>
      <h5>使用show-password属性即可得到一个可切换显示隐藏的密码框</h5>
      <el-input placeholder="请输入密码" v-model="input" show-password></el-input>
    </div>

    <div style="width: 600px;">
      <h3>五、带 icon 的输入框</h3>
      <h5>带有图标标记输入类型</h5>
      <h5>可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。</h5>
      <el-row :gutter="4" type="flex" justify="left" align="middle">
        <el-col :span="3">
          属性方式:
        </el-col>
        <el-col :span="8">
          <el-input
              placeholder="请选择日期"
              suffix-icon="el-icon-date"
              v-model="input1">
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="input2">
          </el-input>
        </el-col>


      </el-row>

      <el-row :gutter="4" type="flex" justify="left" align="middle">
        <el-col :span="3">
          slot 方式:
        </el-col>
        <el-col :span="8">
          <el-input
              placeholder="请选择日期"
              v-model="input3">
            <i slot="suffix" class="el-input__icon el-icon-date"></i>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-input
              placeholder="请输入内容"
              v-model="input4">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-col>
      </el-row>

      <h3>六、文本域</h3>
      <h5>用于输入多行文本信息,通过将 type 属性的值指定为 textarea。</h5>
      <h5>文本域高度可通过 rows 属性控制</h5>
      <div style="width: 300px">
        <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea">
        </el-input>
      </div>

      <h3>七、可自适应文本高度的文本域</h3>
      <h5>通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize
        还可以设定为一个对象,指定最小行数和最大行数。</h5>
      <div style="width: 400px">
        <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="textarea1">
        </el-input>
        <div style="margin: 20px 0;"></div>
        <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="textarea2">
        </el-input>
      </div>

      <h3>八、复合型输入框</h3>
      <h5>可前置或后置元素,一般为标签或按钮</h5>
      <h5>可通过 slot 来指定在 input 中前置或者后置内容。</h5>
      <div>
        <el-input placeholder="请输入内容" v-model="input5">
          <template slot="prepend">Http://</template>
        </el-input>
      </div>
      <div style="margin-top: 15px;">
        <el-input placeholder="请输入内容" v-model="input6">
          <template slot="append">.com</template>
        </el-input>
      </div>
      <div style="margin-top: 15px;">
        <el-input placeholder="请输入内容" v-model="input7" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <div style="width: 1000px">
      <h3>九、尺寸</h3>
      <h5>可通过 size 属性指定输入框的尺寸,除了默认的大小外,还提供了 medium、small 和 mini 三种尺寸。</h5>
      <el-row :gutter="4">
        <el-col :span="6">
          <el-input
              placeholder="请输入内容"
              suffix-icon="el-icon-date"
              v-model="input1">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-input
              size="medium"
              placeholder="请输入内容"
              suffix-icon="el-icon-date"
              v-model="input2">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-input
              size="small"
              placeholder="请输入内容"
              suffix-icon="el-icon-date"
              v-model="input3">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-input
              size="mini"
              placeholder="请输入内容"
              suffix-icon="el-icon-date"
              v-model="input4">
          </el-input>
        </el-col>
      </el-row>

      <h3>十、带输入建议</h3>
      <h5>根据输入内容提供对应的输入建议</h5>
      <p>
        autocomplete 是一个可带输入建议的输入框组件,fetch-suggestions 是一个返回输入建议的方法属性,如 querySearch(queryString, cb),
        在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
      </p>
      <el-row>
        <el-col :span="12">
          <div class="sub-title">激活即列出输入建议</div>
          <el-autocomplete
              class="inline-input"
              v-model="state1"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
          ></el-autocomplete>
        </el-col>
        <el-col :span="12">
          <div class="sub-title">输入后匹配输入建议</div>
          <el-autocomplete
              class="inline-input"
              v-model="state2"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              :trigger-on-focus="false"
              @select="handleSelect"
          ></el-autocomplete>
        </el-col>
      </el-row>
    </div>

    <h3>十一、自定义模板</h3>
    <h5>可自定义输入建议的显示</h5>
    <p>
      使用scoped slot自定义输入建议的模板。该 scope 的参数为item,表示当前输入建议对象。
    </p>
    <el-autocomplete
        popper-class="my-autocomplete"
        v-model="state"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        @select="handleSelect">
      <i
          class="el-icon-edit el-input__icon"
          slot="suffix"
          @click="handleIconClick">
      </i>
      <template slot-scope="{ item }">
        <div class="name">{{ item.value }}</div>
        <span class="addr">{{ item.address }}</span>
      </template>
    </el-autocomplete>

    <h3>十二、远程搜索</h3>
    <h5>从服务端搜索数据</h5>
    <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelect"
    ></el-autocomplete>

    <h3>十三、输入长度限制</h3>
    <h5>
      maxlength 和 minlength 是原生属性,用来限制输入框的字符长度,其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框,在使用 maxlength 属性限制最大输入长度的同时,可通过设置 show-word-limit 属性来展示字数统计。
    </h5>
    <div style="width: 600px">
      <el-row :gutter="4">
        <el-col :span="12">
          <el-input
              type="text"
              placeholder="请输入内容"
              v-model="text"
              maxlength="10"
              show-word-limit
          >
          </el-input>
        </el-col>
      </el-row>


      <div style="margin: 20px 0;"></div>
      <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="textarea"
          maxlength="30"
          show-word-limit
      >
      </el-input>
    </div>
  </div>
</template>

<style>
.el_input_root {
  margin-left: 300px;
  margin-right: 300px;
  text-align: left;
}

.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.sub-title{
  font-size: 14px;
  text-align: left;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}

</style>

Input Attributes

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Input Slots

在这里插入图片描述

Input Events

在这里插入图片描述

Input Methods

在这里插入图片描述

Autocomplete Attributes

在这里插入图片描述
在这里插入图片描述

Autocomplete Slots

在这里插入图片描述

Autocomplete Scoped Slot

在这里插入图片描述

Autocomplete Events

在这里插入图片描述

Autocomplete Methods

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

了解 WebSocket 和 TCP :有何不同

WebSocket — 双向通讯的艺术 简要概述 WebSocket 代表着WebSocket通讯协议&#xff0c;提供了一条用于客户端和服务器间实现实时、双向、全双工通信的渠道。在WebSocket引入之前&#xff0c;网页应用的数据更新依赖于频繁的轮询&#xff0c;这种做法不仅效率低下&#xff0c;…

上位机是什么?与下位机是什么关系

在工业自动化领域中&#xff0c;上位机是一项关键而引人注目的技术。许多人对上位机的概念感到好奇&#xff0c;想要深入了解其在工业智能中的作用。那么&#xff0c;上位机究竟是什么呢&#xff1f; 首先&#xff0c;上位机是一种用于工业控制系统的软件应用&#xff0c;通常…

elementUI中表单校验的清空校验以及手动校验

this.$refs.表单.clearValidate(),这个可以传入字符串或者字符串数组&#xff0c;字符串对应的是我们自定义的rule里面的属性名&#xff0c;rule的属性名对应的是el-form-item的prop。这个api目前遇到的场景是el-radio切换时v-if展示不同的表单内容&#xff0c;但是当有校验提示…

把成绩私发给家长

与家长保持及时、有效的沟通对于学生的成长至关重要。但有时候&#xff0c;我会选择将学生的成绩私发给家长&#xff0c;而不是在公共场合公布。这样做有以下几个原因。 保护学生的隐私。每个学生都拥有自己的个人信息&#xff0c;这包括学习成绩。在公共场合公布成绩&#xf…

前后端项目

文章目录 1.需求2.项目搭建2.1项目结构图2.2构建聚合工程2.2.1 zx-parent父工程2.2.2 zx-framework父工程2.2.2.1 zx-common工程2.2.2.2 zx-mybatisplus工程2.2.3 如上,同理创建其他父子工程2.3准备sql3.用户登录3.1 修改pom-依赖其他Module3.2 封装User1.需求 在线学习平台 …

vue3-深入组件-插槽

插槽 Slots 组件用来接收模板内容 插槽内容与出口 <slot> 元素是一个插槽出口 (slot outlet),&#xff0c;标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。 插槽内容可以是任意合法的模板内容&#xff0c;不局限于文本。例如我们可以传入多个元素&#xff0…

版本管理工具git: 谨慎使用git中的撤回操作

文章目录 一、背景二、解决方案1、步骤一2、步骤二 三、参考 一、背景 昨天代码分支提交错了&#xff0c;idea中使用了如下操作&#xff0c;结果代码不见了 二、解决方案 1、步骤一 使用git reflog命令&#xff0c;查看提交记录&#xff0c;找到之前commit操作的哈希值 …

二叉树顺序结构堆实现

目录 Test.c测试代码 test1 test2 test3 &#x1f387;Test.c总代码 Heap.h头文件&函数声明 头文件 函数声明 &#x1f387;Heap.h总代码 Heap.c函数实现 ☁HeapInit初始化 ☁HeapDestroy销毁 ☁HeapPush插入数据 【1】插入数据 【2】向上调整Adjustup❗ …

Java JVM类加载阶段 双亲委派模式

类加载阶段 加载 将类的字节码载入方法区中&#xff0c;内部采用 C 的 instanceKlass 描述 java 类&#xff0c;它的重要 field 有&#xff1a; _java_mirror 即 java 的类镜像&#xff0c;例如对 String 来说&#xff0c;就是 String.class&#xff0c;作用是把 klass 暴露…

中国2023年土地利用现状遥感监测数据

中国2023年土地利用现状遥感监测数据是以2023年美国Landsat 8遥感影像为主要数据源&#xff0c;在2020年通过2020年土地利用数据基础上&#xff0c;通过2020年和2023年两期遥感影像对比分析&#xff0c;人工目视解译生成。 改革开放以来&#xff0c;中国经济的快速发展对土地利…

Docker进阶篇-reids集群

一、集群存储算法 分布式存储的常见算法&#xff1a; 哈希取余分区 一致性哈希算法分区 哈希槽分区 1、哈希取余分区 描述&#xff1a;每次读写操作都是根据公式&#xff1a;Hash(key) % N&#xff08;其中&#xff0c;key是要存入Redis的键名&#xff0c;N是 Redis集群的…

编程实例分享,配件进销存进出库管理系统软件

编程实例分享&#xff0c;配件进销存进出库管理系统软件 一、前言 以下教程以 佳易王配件进出库管理系统软件V16.0为例说明 如上图&#xff0c;左侧为导航栏&#xff0c;分为 系统设置&#xff0c;用户信息设置&#xff0c;出入库开单&#xff0c;统计报表&#xff0c;财务管…

BPF 管理器 bpfman 简介

1. 背景 Fedora 40 提案建议将 bpfman 作为默认的程序管理器 &#xff0c;开源项目 bpfman 可以实现对 eBPF 运行状态的深入了解&#xff0c;从而实现更轻松地管理 eBPF 程序&#xff08;包括加载、卸载、运行状态查看等&#xff09;。该提案还需要 Fedora 工程和指导委员会 (…

1.31学习总结

1.31 1.线段树 2.Bad Hair Day S&#xff08;单调栈&#xff09; 3.01迷宫(BFS连通块问题剪枝)&#xff08;连通性问题的并查集解法&#xff09; 4.健康的荷斯坦奶牛 Healthy Holsteins&#xff08;DFS&#xff09; 线段树与树状数组 线段树和树状数组的功能相似&#xff0c;但…

社交买量:归因统计的核心要素与工具

在当今的社交App推广领域&#xff0c;广告买量已成为企业获取用户的重要手段。然而&#xff0c;如何准确衡量这些买量活动的成效&#xff0c;即用户从广告访问到安装后行为的完整转化路径&#xff0c;一直是运营人员关注的焦点。归因统计是一种评估营销效果的关键技术方案&…

制造业实施QMS质量管理系统的作用是什么?

QMS质量管理系统是一个关键的组织管理工具&#xff0c;用于确保产品和服务的质量符合预期标准&#xff1b;通过有效地实施万界星空科技QMS&#xff0c;组织可以确保产品和服务的质量符合预期标准&#xff0c;提升客户满意度&#xff0c;增强市场竞争力。 一、QMS系统的特点&…

找出最可疑的嫌疑人 - 华为机试真题题解

考试平台&#xff1a; 时习知 分值&#xff1a; 100分&#xff08;第一题&#xff09; 考试时间&#xff1a; 2024-01-31 &#xff08;两小时&#xff09; 题目描述 民警侦办某商场店面盗窃案时&#xff0c;通过人脸识别针对嫌疑人进行编号1-100000。 现在民警在监控记录中发…

Prometheus---图形化界面grafana(二进制)

前言 Prometheus是一个开源的监控以及报警系统。整合zabbix的功能&#xff0c;系统&#xff0c;网络&#xff0c;设备。 proetheus可以兼容网络&#xff0c;设备。容器的监控。告警系统。因为他和k8s是一个项目基金开发的产品&#xff0c;天生匹配k8s的原生系统。容器化和云原…

运动编辑学习笔记

目录 跳舞重建&#xff1a; 深度运动重定向 Motion Preprocessing Tool anim_utils MotionBuilder 跳舞重建&#xff1a; https://github.com/Shimingyi/MotioNet 深度运动重定向 https://github.com/DeepMotionEditing/deep-motion-editin 游锋生/deep-motion-editin…

Three.js学习1:threejs简介及文档本地部署

开一个天坑&#xff0c;Three.js 我觉得未来3D页面一定是一个趋势。 -----------------------------华丽的分割线------------------------- github&#xff1a;https://github.com/mrdoob/three.js/ 官网&#xff1a;Three.js – JavaScript 3D Library Threejs官网中文文…