CSS输入框动态伸缩动效

ops/2024/12/13 1:37:00/

前言

  • 下面我们将会做出如下图输入框样式,并且附上组件代码,有特殊需求的可以自行优化
  • 同理,下拉框的话只要把el-input标签修改掉即可

在这里插入图片描述

在这里插入图片描述

MyInput组件

<template><div class="my-input" @click.stop="showInput = !showInput"><i class="el-icon-search my-icon"></i><!-- 注意:必须要加上  @click.native.stop 事件,不然会点击输入框也会出发父组件的点击事件--><el-inputclass="my-input-iput"placeholder="请输入内容"v-model="input"clearable@click.native.stop:class="showInput ? 'show-input' : 'hidden-input'"></el-input></div>
</template>
<script>javascript">
export default {data() {return {input: "",showInput: false,};},mounted() {window.addEventListener("click", this.hideInput);},beforeDestroy() {window.removeEventListener("click", this.hideInput);},methods: {hideInput() {if (!this.input) {this.showInput = false;}},},
};
</script>
<style lang="scss" scoped>css">
.my-input {display: flex;align-items: center;height: 50px;overflow: hidden;padding: 0 10px;cursor: pointer;&:hover {background-color: #f5f7fa;}
}.my-input-iput {transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);overflow: hidden;vertical-align: middle;
}.show-input {width: 200px;margin-left: 10px;
}.hidden-input {/* 这里必须写 0,不然宽度依然会占位 */width: 0;
}
</style>

应用组件

<template><div class="test1"><MyInput /></div>
</template>
<script>javascript">
import MyInput from "@/components/MyInput.vue";export default {components: {MyInput,},
};
</script>
<style lang="scss" scoped>css">
.test1 {height: 80vh;display: flex;/* justify-content: end; */
}
</style>

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

相关文章

搭建人工智能多模态大语言模型的通用方法

上一篇&#xff1a;《理解多模态大语言模型&#xff0c;主流技术与最新模型简介》 序言&#xff1a;动手搭建建多模态LLM的两大通用主流方法是&#xff1a;统一嵌入-解码器架构和跨模态注意力架构&#xff0c;它们都是通过利用图像嵌入与投影、跨注意力机制等技术来实现的。 …

深度学习视频编解码开源项目介绍【持续更新】

DVC (Deep Video Compression) 介绍:DVC (Deep Video Compression) 是一个基于深度学习的视频压缩框架,它的目标是通过深度神经网络来提高视频编码的效率,并降低比特率,同时尽可能保持视频质量。DVC 是一个端到端的神经网络模型,它在压缩视频时利用了视频帧之间的时间冗余…

63 基于单片机的四个速度比较

所有仿真详情导航&#xff1a; PROTEUS专栏说明-CSDN博客 目录 一、主要功能 二、硬件资源 三、主程序编程 四、资源下载 一、主要功能 基于51单片机&#xff0c;采用四个滑动变阻器连接数模转换器模拟四个速度值&#xff0c;通过LCD1602显示&#xff0c;然后检测出最高的…

SpringBoot3

1. 配置文件 1. 基本使用 使用 配置文件classpath:application.properties spring.jdbc.drivercom.mysql.cj.jdbc.Driver spring.jdbc.urljdbc:mysql://localhost:3306/batis spring.jdbc.usernameroot spring.jdbc.password123456使用配置文件的值&#xff1a;Value("…

鸿蒙分享(五):axios网络请求+简单封装

代码仓库&#xff1a;share_harmonyos: 鸿蒙分享 鸿蒙api:12 axios开源库地址&#xff1a;OpenHarmony三方库中心仓 1.axios使用 1.安装 ohpm install ohos/axios 2.添加网络权限 common--src--module.json5 添加如下: "requestPermissions": [{"name&quo…

ZED相机应用

下载SDK wget https://stereolabs.sfo2.cdn.digitaloceanspaces.com/zedsdk/3.6/ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run 安装 ./ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run skip_python 测试 cd /usr/local/zed/tools ls ZED_Calibration ZED_Depth_Viewer ZED_Diagnostic ZED_E…

C++设计模式(建造者、中介者、备忘录)

一、建造者模式 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 示例&#xff1a; //房子&#xff08;产品类&#xff09; class House { private:int rooms;int windows;string decoration; public:void setRooms(int r) {rooms …

单片机+Qt上位机

目录 一、引言 通信方式 优势 案例 常见问题及解决方法 二、单片机与 Qt 上位机的通信方式 &#xff08;一&#xff09;使用 QT 上位机和 STC 单片机实现串口通信 三、单片机 Qt 上位机的优势 &#xff08;一&#xff09;高效便捷的 USB 通信上位机解决方案 &#xf…