当前位置: 首页 > news >正文

CSS输入框动态伸缩动效

前言

  • 下面我们将会做出如下图输入框样式,并且附上组件代码,有特殊需求的可以自行优化
  • 同理,下拉框的话只要把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>
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>
.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>
import MyInput from "@/components/MyInput.vue";export default {components: {MyInput,},
};
</script>
<style lang="scss" scoped>
.test1 {height: 80vh;display: flex;/* justify-content: end; */
}
</style>
http://www.lryc.cn/news/501841.html

相关文章:

  • hbuilder 安卓app手机调试中基座如何设置
  • 探索视觉与语言模型的可扩展性
  • sock_recvmsg函数
  • HCIA笔记8--DHCP、Telnet协议
  • Scala的单例对象
  • 【笔记】分布式任务调度平台XXL-JOB
  • PDFMathTranslate,PDF多语言翻译,批量处理,学术论文,双语对照(WIN/MAC)
  • zerotier实现内网穿透(访问内网服务器)
  • Formality:set_svf命令
  • IDEA报错:无效的源发行版、无效的目标发行版
  • #渗透测试#红蓝对抗#SRC漏洞挖掘# Yakit插件使用及编写01
  • Scala中求斐波那契数列的第n项
  • ORACLE修改序列值为表内某字段(主键)最大值
  • 前端html,vue使用第三方地图详细教程,以百度地图为例,实现地图标注,导航,定位,路线规划,坐标转换
  • 【入门】加密四位数
  • [游戏开发] Unity中使用FlatBuffer
  • 云计算IaaS-PaaS-SaaS三种服务模式转至元数据结尾
  • 【数据结构——查找】二叉排序树(头歌实践教学平台习题)【合集】
  • 代码随想录第43天
  • LeetCode - #158 用 Read4 读取 N 个字符 II
  • C++(进阶) 第2章 多态
  • mac删除程序坞(Dock)中“无法打开的程序“
  • 【Linux】vi/vim 使用技巧
  • Python自动化办公(系统维护及开发任务状态自动推送)
  • CentOS7 Apache安装踩坑
  • OpenMMlab导出MaskFormer/Mask2Former模型并用onnxruntime和tensorrt推理
  • 若依微服务中配置 MySQL + DM 多数据源
  • 一些前端组件介绍
  • python学opencv|读取图像(九)用numpy创建黑白相间灰度图
  • AtCoder Beginner Contest 383