【Uniapp-Vue3】表单focus和blue事件的用法

ops/2025/1/12 15:45:52/

focus就是input框聚焦时触发,blue就是input框失去焦点时触发。

分别用@focus和@blue触发事件。

下面这个例子中,就用@focus和@blur来改变Image的class样式。

触发函数时可以设置参数来获取输入框的值: 

获取输入框的值就是e.detail.value 

该案例完整代码如下:

<template><view class="iptbox"><input type="text" :value="iptvalue" @focus="onFocus" @blur="onBlur"><image src="../../static/chicken.gif" :class="isActive?'active':''"></image></view>
</template><script setup>import {ref} from "vue";let isActive = ref(false);// 聚焦function onFocus(e) {console.log(e);isActive.value = true;}// 失去焦点function onBlur() {isActive.value = false;}
</script><style lang="scss" scoped>.iptbox {position: relative;}input {border: 1px solid #ccc;width: 80vw;height: 40px;margin: auto;margin-top: 50px;background-color: #fff;z-index: 2;}image {width: 24px;height: 24px;position: absolute;top: 0;left: calc(50% - 12px);z-index: -1;transition: top .3s;}image.active {top: -24px;}
</style>

案例中用到的图片:


http://www.ppmy.cn/ops/149489.html

相关文章

GPT解释联合训练中的颜色映射概念

1. 理解颜色映射的概念 在深度学习的语义分割任务中&#xff0c;模型输出的是一个每个像素类别的预测结果&#xff08;通常是一个二维的类别索引图&#xff09;&#xff0c;每个像素的值代表该位置的类别。为了在视觉上展示这些预测结果&#xff0c;我们会将每个类别映射到一种…

【k8s】用户和服务账户联系(user、serviceaccount、sa)

文章目录 概述**用户&#xff08;User&#xff09;****服务账户&#xff08;ServiceAccount&#xff09;****用户与服务账户的区别****Pod 的身份来源&#xff1a;用户 vs 服务账户** 总结 相关文章&#xff1a; 【k8s】serviceAccount、role、RoleBinding入门示例 【k8s】pod和…

【AIGC-ChatGPT进阶提示词指令】命运之轮:一个融合神秘与智慧的对话系统设计

引言 在人工智能与用户交互的发展历程中&#xff0c;如何创造一个既能提供实质性帮助&#xff0c;又能带来独特体验的对话系统&#xff0c;一直是一个充满挑战的课题。本文将介绍一个别具一格的对话系统设计——“命运之轮”&#xff0c;它通过将传统的塔罗牌占卜元素与现代技…

js策略模式

定义一组算法&#xff0c;将每个算法封装成一个独立的类&#xff0c;并使它们可以互相替换。策略模式使得算法的变化不会影响到使用算法的客户。 const priceProcessor {pre(originPrice) {if (originPrice > 100) {return originPrice - 20;}return originPrice * 0.9;}…

Linux 环境下编译安装 OpenCV 4.8.x

在 Linux 环境下编译安装 OpenCV 4.8.x 需要安装一系列依赖库。以下是详细的步骤说明&#xff0c;并附上每个依赖库的作用解释。 1. 环境准备 操作系统 推荐使用 Ubuntu 20.04/22.04 或其他基于 Debian 的 Linux 发行版。 编译器 GCC 9 或更高版本&#xff08;默认已安装&a…

基于ADAS 与关键点特征金字塔网络融合的3D LiDAR目标检测原理与算法实现

一、概述 3D LiDAR目标检测是一种在三维空间中识别和定位感兴趣目标的技术。在自动驾驶系统和先进的空间分析中&#xff0c;目标检测方法的不断演进至关重要。3D LiDAR目标检测作为一种变革性的技术&#xff0c;在环境感知方面提供了前所未有的准确性和深度信息. 在这里&…

【spark源码修改】hive3.1.3 spark3.5.4编译,需要修改源码,最终编译成功

【spark源码修改】hive3.1.3 spark3.5.4编译,需要修改源码,最终编译成功 1. 准备安装包与maven编译环境1.1 安装环境准备1.2 修改pom1.3 打包命令2. 编译与问题解决2.1 开始编译 失败, 缺包pentaho-aggdesigner-algorithm:pom:5.1.5-jhyde2.2 Hive Spark Remote Client 模块…

IOS界面传值-OC

1、页面跳转 由 ViewController 页面跳转至 NextViewController 页面 &#xff08;1&#xff09;ViewController ViewController.h #import <UIKit/UIKit.h>interface ViewController : UIViewControllerend ViewController.m #import "ViewController.h" …