用 vue+elemnet ui实现仿有赞首页搜索框点击放大input并展开下拉盒子的动画效果

已于 2022-05-07 11:11:42 修改
阅读量1.6k 收藏 2
点赞数 1
文章标签： vue.js javascript html css
于 2022-04-20 13:46:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57454052/article/details/124295549
版权

静止时
静止时
点击时展开动画
点击处于focus时

html结构

          <el-popover placement="bottom" title="最近搜过" width="280" trigger="focus" class='pop' :visible-arrow='false'
              style="top: 47px;" @show='show_z' @hide='hiden'>
              <div class="del">
                <i class="el-icon-delete delete"></i>
                <span>清除</span
最低0.47元/天 解锁文章
『减减』
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input输入框动画
宁芳颖的博客
11-21 486
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="./css/index.css" /> </head> <style type="text/css"&gt...
vue 购买弹出框 动画
weixin_30411997的博客
06-06 244
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/animate.css" /> <style type="t...
VUE：搜索框动态提示（使用了elementUi的提示组件）
干饭搬砖两不误。
03-26 2455
简介 VUE项目中，需要实现用户输入内容，然后边输入边动态查询是否要模糊匹配的值，并实时展示给用户。 注意：此处是引入了elementUI框架的。 具体实现 // HTML: <el-autocomplete v-model="hospitalName.hospitalName" placeholder="请输入搜索值" label-name="标题名称" :fetch-suggestio...
搜索框动画效果实现
purple_lumpy的博客
03-28 1804
呃，我们的搜索框，为了不让输入的字符串把放大镜遮住，我们给input 设置padding-right 为30px，如下。 export const NavSearch = styled.input` width: 160px; height: 38px; margin-top: 9px; margin-left: 20px; padding: 0 30px 0 20px; ...
css实现input搜索框展开动画
苏苏就是小苏苏的博客
09-02 2866
css实现三个input搜索框展开动画
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
10-17
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个具有行内编辑功能的简单表格。Element UI是基于Vue.js的组件库，提供了丰富的UI元素，包括表格（Table），使得开发者能够轻松创建出美观且功能...
vue3+vite+ts 仿淘宝放大镜效果
09-17
通常会使用CSS3的transform属性实现放大效果，并且可能需要创建一个浮动的放大镜元素来展示放大后的图像。 6. **项目配置**：`.gitignore` 文件定义了版本控制中忽略的文件和目录；`tsconfig.json` 和 `tsconfig....
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
01-19
使用Vue + Element UI，构建出最基本的树如下图所示： 现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。 下拉菜单 将下拉菜单嵌到树节点中，使操作更加简便、紧凑。 效果演示 效果如图： 图示1...
vue+element UI实现树形表格带复选框的示例代码
10-17
在Vue和Element UI框架中，实现树形表格带复选框功能可以极大地增强用户界面的交互性和数据管理能力。以下是一些关键知识点和步骤，详细解释如何构建这样的组件： 1. **数据转换**： 树形表格的数据通常不是直接以...
vue+Element-ui实现分页效果实例代码详解
10-17
Vue.js是一个轻量级的前端框架，它结合Element UI库可以轻松实现高效的分页效果。Element UI提供了丰富的组件，其中包括`Pagination`分页组件，使得开发者能够快速实现美观且功能完善的分页功能。 在Vue+Element UI...
仿哔哩哔哩(bilibili)搜索框动画效果
01-14
meterial design 使用circularReveal仿哔哩哔哩(bilibili)搜索框动画
vue+elementui实现el-input动画效果
Aa12364567的博客
07-21 1028
vue+elementui实现el-input动画效果
Vue2.0组件实现动态搜索引擎（二）
不会指弹的厨子不是好Coder
07-13 3608
接上一篇，完成logo部分我们就要开始整个项目的核心——panel组件。
input框获取焦点点击 横线动画效果实现
weixin_43343144的博客
04-18 340
参考：https://blog.csdn.net/yaw_chen/article/details/85071062
js点击input弹出一个框div，点击输入框和div之外的地方隐藏弹出框
LiuPangZi6的博客
11-10 2061
利用了阻止冒泡的方法实现，先上样式 <input type="text" name="" id="" placeholder="请输入"> <div class="box"> <div class="box1"> 戳我 </div> </div> &...
22.图标动画搜索框
粉丝们务必加入微信粉丝群
09-25 334
在HTML和CSS中使用图标的动画搜索框
自定义element ui动画
qq_45505241的博客
02-03 427
// 修改的是css /* 修改loading动画 */ .el-loading-spinner .circular{ display: none; } .el-loading-spinner{ background: url(../../public/loading.gif) center no-repeat;height: 68px;background-size: auto 68px; margin-top: -34px !important; }
vue 派送区域 地图 可自选
qq_31889029的博客
05-12 2289
<template> <div class="delivery-index"> <el-dialog :title="(!rowData.storeName ? '' : rowData.storeName) + '配送设置'" :visible.sync="showEditRange" center width="50%"> <div>配送区域设置：<span style="color: #FF3333;">如果不
vue + iview 地址选择器（100%实现有赞后台地址选择器）
CherryCola_zjl的博客
07-21 978
记得点赞+评论+关注~~ 接触到有赞地址选择器，感觉不错，他是react + zentUI 。项目是vue，所以用vue + iview 2.0做了个一模一样的，效果图： iview 2.0使用 首先下载 npm install view-design --save main.js全局引用 import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; Vue.use(ViewUI); 组件源码
vue+element实现点击按钮新增一个盒子里面有两个input框
最新发布
05-31
好的，我可以帮你解答。 首先，在 Vue 中，你需要使用组件来实现 UI，Element UI 是一个非常流行的 UI 组件库，可以方便地实现你的需求。下面是一个示例代码： ```vue <template> <div> <el-button @click="addBox">新增盒子</el-button> <div v-for="(box, index) in boxes" :key="index"> <el-input v-model="box.name" placeholder="请输入名称"></el-input> <el-input v-model="box.value" placeholder="请输入值"></el-input> </div> </div> </template> <script> export default { data() { return { boxes: [] // 盒子数组 } }, methods: { addBox() { this.boxes.push({ name: '', value: '' }) } } } </script> ``` 这个示例代码中，我们使用了 Element UI 的 `el-button` 和 `el-input` 组件，通过 `v-for` 指令来循环渲染盒子数组中的每个盒子。在点击新增盒子按钮时，会向盒子数组中添加一个新的盒子对象，它有两个属性：`name` 和 `value`，分别表示盒子中的两个输入框的值。 希望这个示例能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值