ant design vue input框 加一个搜索图标

已于 2022-11-20 13:18:37 修改
阅读量2.3k 收藏 1
点赞数
分类专栏： VUE 文章标签： vue
于 2022-11-20 10:28:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48616345/article/details/127946040
版权

ant design vue input框 加一个搜索图标

把本来的 v-input 换成 a-input-search就可以了

<a-form-item  label="条码" >
          <a-input-search
            v-decorator="['code1', { rules: [{ required: true, message: '请选择条码!' }] }]" placeholder="请选择商品"
            v-model:value="param.code1" @search="onSearchLinkNumber" :readOnly="true"/>
        </a-form-item>

在这里插入图片描述

Java&Develop
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant-design表单处理和常用方法及自定义验证操作
01-22
首先要说一下antdesign这个框架API和demo丰富，而且开发环境提供对应的warning来纠正用户的错误。是一个很好的组件库。 关于表单验证方面是依赖于 async-validator 库。百度的san-xui组件库的表单验证也是依赖与async-validator。说明这个库的实用性还是比较高，可以多了解一下。 首先按照antDesign官网Demo。我们可以copy一个Form表单的demo。 LoginForm是表单的组件，下面代码，是React 高阶组件（Hoc）。 用于使组件获取 this.props.form 下面介绍一些常用的 this.props.form的方法。
vue2实现带表情输入框
weixin_52707625的博客
07-21 923
vue2实现带表情输入框
Ant-Design-Vue替换默认图标(AInputSearch)
全干攻城狮
06-30 1693
Ant-Design-Vue替换默认图标
Ant design vue 的组件禁用属性 disabled.pdf
12-16
Ant design vue 的组件禁用属性 disabled
解决ant Design Search无法输入内容的问题
01-21
我的问题：今天先根据手机号查询一个用户，根据文档引用Input中的Search，我添加了一个样式，发现输入框无法输入内容， 代码： return ( this.findAppUserByPhoneNo(value)} onChange={this.onChangePhoneNo} value={searchText} enterButto
搜索框输入内容同时搜索
weixin_53897605的博客
11-17 3252
需求：用户无需回车或者点击搜索按钮，而是在输入内容同时展示搜索结果 思路：给搜索栏添加onChange，当用户改变内容时发送请求获取搜索结果。 问题：用户输入内容是密集型操作，如果不加处理，用户键入一段较长内容会向后端短时发送大量请求，造成服务器负载增大。 解决：在前端设置时效，时效内用户没有新操作才发送请求，代码如下： <a-input-search v-model:value="searchString" @input="_autoSearch" /> export defaul
antd input组件，获取焦点时更改该组件的样式
逆风优雅的博客
01-21 3893
1. 首先给该组件注册一个失去焦点的事件 <a-input-search placeholder="请输入搜索产品名称" class="header_input" @search="onSearch" @focus="focusSearch" @input="searchValue" v-model="searchText" ref="a_input_se
带搜索图标的input
Ybittersweet的博客
03-31 908
【代码】带搜索图标的input。
全局搜索显示对话框
Larry的博客
12-24 391
<!-- 根据文件编号全局搜索--> <div class="globle_search"> <a-input-search v-model="search_key" placeholder="请输入文件编号进行搜索" allowClear @search="search " /> </div> <el-dialog :visible.sync="visible" ...
【Ant Design合集】自用总结
Allen_Sushi首页
11-20 225
ant使用总结合集
Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf
12-16
Ant design vue中的a-select在动态给option赋值之后，placeholder失效
Ant Design Vue 添加区分中英文的长度校验功能
01-21
所以想找一个可区分全角/半角字符的校验，而且要保证一定的可重用性。 百度搜了一圈都没找到合适的现成的解决方案，所以自己试着基于v-decorator的自定义校验validator实现了一下，核心代码如下： 校验插件 const ...
wangeditor-antd:基于ant-design风格重构的wangeditor富文本编辑器
05-01
风格统一为 ant-design-vue 2.0风格 修改部分说明 重构图标 重构下拉样式 重构input输入框 目录说明 dist ---主文件 -- fonts --- 图标文件 -- wangeditor.css -- wangeditor.js index --- 演示html 直接使用...
前端Mock的使用，用于构造动态数据
最新发布
04-29
适用于前端开发，前端构建动态数据
SQL语句的基本用法案例.pdf
04-29
“SQL语句的基本用法案例”的文档，是一份非常实用的学习资料，为初学者和进阶者提供了丰富的SQL操作示例。通过这份文档，读者可以系统地了解SQL语言在数据库管理中的应用，掌握从创建数据库到删除数据库的整个流程。 文档开篇便介绍了如何创建一个新的数据库，并详细说明了选择数据库、创建表以及插入数据的具体步骤。这不仅为读者展示了SQL语句的基础用法，也为后续的查询、更新和删除操作打下了坚实的基础。 在查询数据部分，文档通过多个示例展示了SQL查询的灵活性和强大功能。无论是查询所有学生信息，还是根据特定条件筛选数据，都能通过简单的SQL语句实现。此外，文档还介绍了如何计算学生的总数、平均年龄等统计信息，以及如何对数据进行排序和限制结果。 除了基础的增删改查操作，文档还深入介绍了子查询、连接表以及窗口函数等高级用法。这些功能在实际应用中非常常见，能够帮助用户解决更为复杂的数据处理问题。 此外，文档还提供了清晰的代码示例和注释，使得读者能够轻松理解每个步骤的含义和目的。同时，文档的语言简洁明了，逻辑清晰，使得学习过程更加轻松愉快。
node-v7.7.4-sunos-x86.tar.gz
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于QT+C++开发的球球大作战游戏+源码（毕业设计&课程设计&项目开发）
04-29
基于QT+C++开发的球球大作战游戏+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于QT+C++开发的球球大作战游戏+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于QT+C++开发的球球大作战游戏+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于QT+C++开发的球球大作战游戏+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~
浪潮CH5280H2海光服务器兼容vSphere集群服务方法
04-29
hygon-vmware_patch_v2.7
PHP开发虚拟资源在线交易平台程序源码 含多接口 支付功能.rar
04-29
PHP开发虚拟资源在线交易平台程序源码 含多接口 支付功能.rarPHP开发虚拟资源在线交易平台程序源码 含多接口 支付功能.rar
ant design vue input禁止输入空格
06-09
您可以监听 `input` 事件，在事件处理函数中检查输入的内容是否包含空格，如果包含则将空格删除掉。下面是一个示例代码： ```vue <template> <a-input v-model="inputValue" @input="handleInput"></a-input> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { handleInput(e) { // 检查输入的内容是否包含空格 if (/\s/.test(e.target.value)) { // 如果包含空格则将空格删除掉 this.inputValue = e.target.value.replace(/\s/g, ''); } } } }; </script> ``` 在上面的代码中，我们使用了正则表达式来检查输入的内容是否包含空格。如果包含，我们使用 `replace` 方法将空格删除掉，然后将处理后的值赋给 `inputValue`，这样就可以禁止输入空格了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值