感谢昨天大家的帮助，我的 vue 小项目上线了，给你们看看成品，然后继续提问

2019-09-03 21:42:42 +08:00
 Hopetree

接昨天的求助贴 https://www.v2ex.com/t/597355#reply42

昨天提问之后被批了一顿，但是也有很多人给出了非常好的建议和提示，经过这个求助贴，我对 vue 的一些属性和方法的用途还有应该使用的场景又有了新的认知和理解。

我这个小项目其实就是打算写一个导航页，包括一个搜索组件和一个网址列表，要说很简单，但是为了学习 vue，我把这个看似简单的项目尽量把 vue 全家桶用上，目前用到了下面这几个

  "dependencies": {
    "axios": "^0.19.0",
    "element-ui": "^2.12.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.1"
  },

昨天由于那个异步请求放到计算属性中的事故，被很多人教育了一番，让我好好看 js 的基础用法，其实我并不是搞前端的，但是想“掌握”一个前端框架，这个“掌握”的意思大概就是能了解基本用法，能写成实际的东西（只是会用），所以说，我并不想去深入 js，所以直接上手先写东西，边写边学，我倒觉得这种学习方式我很喜欢，因为你如果一直在学新东西但是根本没有去用，那你很难在实际中理解一个功能的用法，而如果是先有需求和问题，然后带着需求和问题去找解决办法，我觉得效果可能更好。

简单来说，我喜欢“用以致学”而非“学以致用”

然后，下面这个是我目前的搜索组件，基本完成我要的功能了，但是还有几个问题搞不定

项目上线了，调戏网址：https://hao.tendcode.com/

然后是 GitHub 项目代码： https://github.com/Hopetree/hao

如果有空，还请各位大佬继续指出问题，先感谢一波。

然后，现在是提问环节，还请有空的大佬继续帮忙看看啊(下拉用的 element-ui 的 el-autocomplete 组件)：

  1. [需求] 怎么让推荐词的下拉框缩回去的时候更快？最好是失去输入框焦点的时候下拉可以马上消失
  2. [需求] 怎么可以在 handleSelect 函数（下拉选择的回调函数）中直接触发 form 表单的 action 事件？或者说怎么触发 button 的点击事件？我目前是拼出了跳转的地址，然后进行跳转，如下
  3. [需求] 还有一个需求，就是百度的输入框里面是当你的输入还在输入法中，没有真正到输入框中的时候（就是中文输入的时候）就触发了 input 的变化事件，如何做到这一点？

5085 次点击
所在节点    Vue.js
14 条回复
zazalu
2019-09-03 22:37:50 +08:00
点 google 的时候会重复弹出下拉框
Hopetree
2019-09-03 22:48:41 +08:00
第二个需求，我用的.submit()，但是发现有个问题，提交的 input 的内容不是下拉框中的内容，而是 input 输入的内容，而且我就是让 sctext 变成了下拉选择的也不行，很奇怪

![nA7ZRI.png]( https://s2.ax1x.com/2019/09/03/nA7ZRI.png)
Hopetree
2019-09-03 22:52:12 +08:00
@zazalu 你说的下拉是指的左边那个还是推荐词，我都没有发现问题啊
VancleefL
2019-09-03 23:04:17 +08:00
需求 2：触发 button 的点击事件可以用$ref 把 button 的 dom 节点暴露出来，简单来说<button ref="submit"/>然后你就可以通过 this.$refs.submit.click()来触发点击
需求 3：用 watch 监听 input 输入框的 value 的变化，注意做防抖
我是菜鸡，以上回复如果没有帮到你可以再回复。
另外我觉得编程还是要知其所以然好一点，出了 bug 也可以根据自己的理解快速排查
Baymaxbowen
2019-09-03 23:48:26 +08:00
@Hopetree 左侧 select 选中后会再自动展开无论点哪个搜索引擎都一样的
Hopetree
2019-09-04 00:28:49 +08:00
@Baymaxbowen 这个本来就是这样的，左边选搜索引擎不是点击才会下拉，而是鼠标滑过就可以
zazalu
2019-09-04 06:53:56 +08:00
@Hopetree 左边选择搜索工具，选 google 放开手指后，自己又会弹一遍
LyleRockkk
2019-09-04 09:11:45 +08:00
需求 3，别人百度就是这样子，肯定是用户体验考验了的，不需要改吧
Kusoku
2019-09-04 09:14:25 +08:00
第一个可以取消过渡效果，transform
第二个用 ref
第三个监听键盘事件可以做到模拟但是没必要，实际要考虑的东西比较多
roryzh
2019-09-04 09:19:54 +08:00
...这是神恶魔项目
LeeSeoung
2019-09-04 09:57:02 +08:00
1、v-show
2、参考上面 ref
3、dispatchevent 或者直接调用函数啊，没太仔细看。
version0
2019-09-04 11:46:47 +08:00
提示词咋取的，所有搜索引擎都一样呢
eluotao
2019-09-04 15:28:16 +08:00
dogedoge 搜索没有 减 10 分 哈哈
Hopetree
2019-09-04 15:50:52 +08:00
@version0 提示词是百度的接口，不会根据选择的引擎去变动接口的（虽然可以实现，但没必要）
@eluotao 马上安排还不行吗

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/597669

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX