当前位置: 首页 > 知识库问答 >
问题:

vue.js - 如何使用 Vue 和 Element-Plus 实现输入框聚焦时下拉按钮消失动画效果?

荀学文
2024-06-08

我想实现掘金网站输入框的效果

  • 当我聚焦输入框的时候,旁边的下拉按钮消失,输入框变长占据下拉框的位置。
  • 取消聚焦的时候,恢复原状

未聚焦
image.png

聚焦
image.png

尝试用vue + element-plus实现,并没有实现这种动画效果,只是简单的占据空间
stackblitz

<script setup>import HelloWorld from './components/HelloWorld.vue';import { ref, computed } from 'vue';const isFocus = ref(false);const basis = computed(() => {  return isFocus.value ? 'flex-full' : 'flex-60';});</script><template>  <div class="flex justify-between w-md">    <el-form :class="basis" class="transition">      <el-form-item class="mb-0">        <el-input          placeholder="搜索"          @focus="isFocus = true"          @blur="isFocus = false"        ></el-input>      </el-form-item>    </el-form>    <el-dropdown v-show="!isFocus" split-button type="primary" class="flex-40">      创作者中心      <template #dropdown>        <el-dropdown-menu>          <el-dropdown-item>Action 1</el-dropdown-item>          <el-dropdown-item>Action 2</el-dropdown-item>          <el-dropdown-item>Action 3</el-dropdown-item>          <el-dropdown-item>Action 4</el-dropdown-item>          <el-dropdown-item>Action 5</el-dropdown-item>        </el-dropdown-menu>      </template>    </el-dropdown>  </div></template><style scoped>.transition {  transition: width 2s ease-in;}.grow {  flex-grow: 1;}.flex-full {  flex-basis: 100%;}.flex-60 {  flex-basis: 60%;}.flex-40 {  flex-basis: 40%;}.mb-0 {  margin-bottom: 0px !important;}.flex {  display: flex;  background: red;}.gap-sm {  gap: 2px;}.justify-between {  justify-content: space-between;}.w-md {  width: 350px;}</style>

附:我感觉使用组件库虽然省事但是也会有很多的限制,可能我现在还没有活用这些组件库。

共有1个答案

慕冠宇
2024-06-08

因为你使用的是 flex 布局,进行伸缩的时候并不只是 width 宽度。

.transition {-  transition: width 2s ease-in;+  transition: all 2s ease-in;}

给你大概改了一个Demo �� Element Plus Playground

<script setup>import { ref, computed } from 'vue';const isFocus = ref(false);</script><template>  <div :class="['flex', 'justify-between', 'w-md', 'box', isFocus ? 'hidden' : 'show']">    <el-form class="flex-full my-form">      <el-form-item>        <el-input          placeholder="搜索"          @focus="isFocus = true"          @blur="isFocus = false"        ></el-input>      </el-form-item>    </el-form>    <el-dropdown split-button type="primary" class="my-dropdown">      创作者中心      <template #dropdown>        <el-dropdown-menu>          <el-dropdown-item>Action 1</el-dropdown-item>          <el-dropdown-item>Action 2</el-dropdown-item>          <el-dropdown-item>Action 3</el-dropdown-item>          <el-dropdown-item>Action 4</el-dropdown-item>          <el-dropdown-item>Action 5</el-dropdown-item>        </el-dropdown-menu>      </template>    </el-dropdown>  </div></template><style scoped>.box {  overflow-x: hidden;  padding-right: 145px;  transition: padding 1s;  box-sizing: border-box;  position: relative;}.box.hidden {  padding-right: 0;}.box.hidden .my-dropdown {  transform: translateX(100%);  opacity: 0}.my-dropdown {  width: 135px;  flex: 0 0 auto;  position: absolute;  right: 0;  transition: transform 1s, opacity .4s;}.grow {  flex-grow: 1;}.flex-full {  flex-basis: 100%;}.flex-60 {  flex-basis: 60%;}.flex-40 {  flex-basis: 40%;}.mb-0 {  margin-bottom: 0px !important;}.flex {  display: flex;}.gap-sm {  gap: 2px;}.justify-between {  justify-content: space-between;}.w-md {  width: 350px;}</style>
 类似资料:
  • 使用 vite 打包组件库,在新的项目中使用时报错 下面是打包后的产物 pe 和 dn 找不到导致项目启动时就报错, 手动再新起一个别名时会结局此问题 vite.config.ts 配置如下 请问这个问题该怎么解决

  • 本文向大家介绍HTML5 DataList实现输入框自动下拉提示,包括了HTML5 DataList实现输入框自动下拉提示的使用技巧和注意事项,需要的朋友参考一下 在Web设计中,经常会用到如输入框的自动下拉提示,这将大大方便用户的输入。比如在Google中进行搜索的时候,就会出现下拉的智能提示列表选择框。这样的下拉列表框称为AutoComplete。在以前,如果要实现这样的功能,必须要求开发者使

  • 本文向大家介绍vue.js实现单选框、复选框和下拉框示例,包括了vue.js实现单选框、复选框和下拉框示例的使用技巧和注意事项,需要的朋友参考一下 Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。 一、单选框   在传统的HTML中实现单选框的方法如下: 注:这里name属性值必

  • 问题内容: 单击复选框时,是否有一种更干净的方法将焦点委派给元素。这是我入侵的肮脏版本: 的HTML 的JavaScript JSFiddle:http : //jsfiddle.net/U4jvE/8/ 问题答案: 这个怎么样 ?矮人 @asgoth和@Mark Rajcok是正确的。我们应该使用指令。我只是懒惰。 这是指令版本。plunker我觉得一个好的理由将其作为指令是可以重用这件事。 因

  • 问题内容: 我正在使用Angular JS-ui.bootstrap.typeahead: 我想单击一个按钮并聚焦于一个输入字段,并自动显示预先输入建议下拉列表。我有一条指令,当单击按钮时,该指令会自动聚焦输入字段。如何自动显示下拉菜单,以便用户可以使用向下箭头或单击来快速选择用户? 我用可编辑的ui-bootstrap JS文件创建了一个Plunker: http://plnkr.co/edit

  • 这在当前版本的AngularJS中存在吗?我注意到代码中有一个BOOLEAN_ATTR,它获得AngularJS支持的所有attr。我不想修改它,因为害怕改变版本和忘记更新。

  • 问题:我想更改输入元素焦点上按钮的样式。 下面是模板代码: 以下是css代码: 预期输出:在输入框 1的焦点上。将1倍宽度的边框应用于输入框 2。更改按钮的背景颜色 实际输出: 1。边框应用于输入框 2。按钮的背景色没有变化 http://jsfiddle.net/6Y8GL/7/

  • aside里面套了el-menu 样式为 折叠动画显示正常,但是展开动画就不正常了,我看表象应该是aside正常展开,但是el-menu展开没有跟随aside。 有种解决办法就是直接把menu的border设成none,然后aside写个border,这样asider的border就可以跟着折叠一起了。但是不太理解,是因为折叠时间吗? 是因为展开的时候文字出现较晚的原因吗