Vue3使用vant检索组件van-search的坑

当清空按钮与检索按钮同时居右时,点击clear清空按钮事件时会同时触发click-right-icon事件,如下配置:

<van-searchv-model="form.search"show-actionshape="round"left-icon=""right-icon="search"placeholder="请输入站点名称"@search="onClickSearch()"@clear="() => onClickSearch(true)"@click-right-icon="onClickSearch()">
</van-search>

建议检索按钮放到右侧,防止与清空按钮出现同一侧。

且清空按钮点击无效,层叠样式排版有问题,需重新使用样式更改位置偏移

.van-field__body {.van-field__control[type='search'] {margin-right: 25px;}.van-field__control[type='search'] + .van-field__clear {position: absolute;right: 20px;z-index: 9999;width: 40px;flex-shrink: unset !important;}
}

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

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

相关文章

Python(19)Excel表格操作Ⅰ

目录 导包 读取EXCEL文件 1、获取worksheet名称 2、设定当前工作表 3、输出目标单元格数据 4、工作表.rows&#xff08;行&#xff09; 5、工作表.columns&#xff08;列&#xff09; 小结 导包 要想使用 python 操作 Excel 文件&#xff0c;应当导入 openpyxl 包。在…

03:华为云管理|云主机管理|云项目实战

华为云管理&#xff5c;云主机管理&#xff5c;云项目实战 安全组配置部署跳板机配置yum源&#xff0c;安装软件包优化系统服务安装配置ansible管理主机 模版镜像配置配置yum源&#xff0c;安装软件包优化系统 网站云平台部署实战华为云的负载均衡 安全组配置 设置安全组 云…

【Docker】docker安装jenkins

一、执行命令 下载jenkins镜像 #下载jenkins 镜像 docker pull jenkins/jenkins:latest-jdk8 启动jenkins容器 #启动jenkins 容器 #挂载 如果不挂载 每次启动jenkins的配置、插件、用户等信息都没有了 #jenkins_home 包含jenkins配置、插件、用户等信息。 要指定必须配置用…

【AI视野·今日NLP 自然语言处理论文速览 第七十六期】Fri, 12 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Fri, 12 Jan 2024 Totally 60 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Axis Tour: Word Tour Determines the Order of Axes in ICA-transformed Embeddings Authors Hiroaki Yamagi…

linux离线升级openssh方法

检查openssh版本&#xff1a; 升级前openssh 版本为7.4 openssl 版本为1.0.2k Openssh9.6 所需openssl >1.1.1 因此openssl也需要升级。 为了防止升级失败&#xff0c;无法使用SSH登录&#xff0c;首先安装telnet 预防。查看是否安装了telnet 客户端及服务 未安装tel…

Java - JDBC

Java - JDBC 文章目录 Java - JDBC引言JDBC1 什么是JDBC2 MySQL数据库驱动3 JDBC开发步骤4 具体介绍 引言 思考: 当下我们如何操作数据库&#xff1f; 使用客户端工具访问数据库&#xff0c;手工建立连接&#xff0c;输入用户名和密码登录。编写SQL语句&#xff0c;点击执行…

Vue(十九):ElementUI 扩展实现树形结构表格组件的勾父选子、半勾选、过滤出半勾选节点功能

效果 原理分析 从后端获取数据后,判断当前节点是否勾选,从而判断是否勾选子节点勾选当前节点时,子节点均勾选全勾选与半勾选与不勾选的样式处理全勾选和全取消勾选的逻辑筛选出半勾选的节点定义变量 import {computed, nextTick, reactive, ref} from vue; import {tree} f…

解剖 Python 代码,深入学习 interpret 库的功能和应用!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com Python是一门广泛应用的编程语言&#xff0c;拥有丰富的标准库和第三方库&#xff0c;可以用于各种应用场景。在Python中&#xff0c;有一个名为interpret的库&#xff0c;它提供了一种强大的方式来处理和执行Py…

【大数据】Flink 架构(三):事件时间处理

《Flink 架构》系列&#xff08;已完结&#xff09;&#xff0c;共包含以下 6 篇文章&#xff1a; Flink 架构&#xff08;一&#xff09;&#xff1a;系统架构Flink 架构&#xff08;二&#xff09;&#xff1a;数据传输Flink 架构&#xff08;三&#xff09;&#xff1a;事件…

基于C#制作一个俄罗斯方块小游戏

目录 引言游戏背景介绍游戏规则游戏设计与实现开发环境与工具游戏界面设计游戏逻辑实现游戏优化和测试性能优化测试工具和流程说明引言 俄罗斯方块是一款经典的益智游戏,深受玩家喜爱。本文将介绍如何使用C#编程语言制作一个简单的俄罗斯方块小游戏,并探讨其设计与实现过程。…

【蓝桥杯日记】复盘篇二:分支结构

前言 本篇笔记主要进行复盘的内容是分支结构&#xff0c;通过学习分支结构从而更好巩固之前所学的内容。 目录 前言 目录 &#x1f34a;1.数的性质 分析&#xff1a; 知识点&#xff1a; &#x1f345;2.闰年判断 说明/提示 分析&#xff1a; 知识点&#xff1a; &am…

如何使用 Google 搜索引擎保姆级教程(附链接)

前言 需要挂梯子 一、介绍 "Google语法"通常是指在 Google 搜索引擎中使用一系列特定的搜索语法和操作符来精确地定义搜索查询。这些语法和操作符允许用户过滤和调整搜索结果&#xff0c;提高搜索的准确性。 二、安装 Google 下载 Google 浏览器 Google 官网ht…

自动化测试——selenium工具(web自动化测试)

1、自动化测试 优点&#xff1a;通过自动化测试有效减少人力的投入&#xff0c;同时提高了测试的质量和效率。 也用于回归测试。随着版本越来越多&#xff0c;版本回归的压力越来越大&#xff0c;仅仅通过人工测试 来回归所以的版本肯定是不现实的&#xff0c;所以…

如何在 Ubuntu 中安装 Microsoft Edge 浏览器

微软终于聪明了一回&#xff0c;也学会了「打不过就加入」。Microsoft Edge 浏览器的 Linux 稳定版已经于 2020 年 10 月 23 日发布&#xff0c;并提供给 Linux 发行版使用。除了官方 Edge APT 源以外&#xff0c;还提供了.deb和.rpm格式的安装包。 Microsoft Edge 基于 Chrom…

【Linux操作系统】:Linux开发工具编辑器vim

目录 Linux 软件包管理器 yum 什么是软件包 注意事项 查看软件包 如何安装软件 如何卸载软件 Linux 开发工具 Linux编辑器-vim使用 vim的基本概念 vim的基本操作 vim正常模式命令集 插入模式 插入模式切换为命令模式 移动光标 删除文字 复制 替换 撤销 跳至指…

Python爬虫解析库安装

解析库的安装 抓取网页代码之后&#xff0c;下一步就是从网页中提取信息。提取信息的方式有多种多样&#xff0c;可以使用正则来提取&#xff0c;但是写起来相对比较烦琐。这里还有许多强大的解析库&#xff0c;如 lxml、Beautiful Soup、pyquery 等。此外&#xff0c;还提供了…

备战蓝桥杯---数据结构与STL应用(基础实战篇1)

话不多说&#xff0c;直接上题&#xff1a; 当然我们可以用队列&#xff0c;但是其插入复杂度为N,总的复杂度为n^2,肯定会超时&#xff0c;于是我们可以用链表来写&#xff0c;同时把其存在数组中&#xff0c;这样节点的访问复杂度也为o(1).下面是AC代码&#xff1a; 下面我们来…

Shell中sed编辑器

1.简介 sed是一种流编辑器&#xff0c;流编辑器会在编辑器处理数据之前基于预先提供的一组规则来编辑数据流。 sed编辑器可以根据命令来处理数据流中的数据&#xff0c;这些命令要么从命令行中输入&#xff0c;要么存储在一个 命令文本文件中。 2.sed编辑器的工作流程 sed…

《元梦之星》bug层出不穷,逼得玩家研发“自救套路”?

对于bug&#xff0c;想必喜爱游戏的玩家都不会陌生&#xff0c;在各类软件或者游戏中偶尔会出现一些影响正常运行的bug&#xff0c;但是并不会引起很大的反响。大家之所以能以平常心看待是因为各大游戏或者是应用软件中的bug都会因为玩家的及时发现而进行修复&#xff0c;在出现…

软件价值3-A*算法寻路

A*算法&#xff08;A-star算法&#xff09;是一种启发式搜索算法&#xff0c;主要用于在图或网络中找到从起始节点到目标节点的最佳路径。它结合了Dijkstra算法的广度优先搜索和贪婪最优优先搜索的特点&#xff0c;通过估算从起始节点到目标节点的代价来指导搜索方向。 A*算法…