接昨天的求助贴 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
zazalu 2019-09-03 22:37:50 +08:00 via Android
点 google 的时候会重复弹出下拉框
|
2
Hopetree OP 第二个需求,我用的.submit(),但是发现有个问题,提交的 input 的内容不是下拉框中的内容,而是 input 输入的内容,而且我就是让 sctext 变成了下拉选择的也不行,很奇怪
![nA7ZRI.png]( https://s2.ax1x.com/2019/09/03/nA7ZRI.png) |
4
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 也可以根据自己的理解快速排查 |
5
Baymaxbowen 2019-09-03 23:48:26 +08:00 via Android
@Hopetree 左侧 select 选中后会再自动展开无论点哪个搜索引擎都一样的
|
6
Hopetree OP @Baymaxbowen 这个本来就是这样的,左边选搜索引擎不是点击才会下拉,而是鼠标滑过就可以
|
8
LyleRockkk 2019-09-04 09:11:45 +08:00
需求 3,别人百度就是这样子,肯定是用户体验考验了的,不需要改吧
|
9
Kusoku 2019-09-04 09:14:25 +08:00
第一个可以取消过渡效果,transform
第二个用 ref 第三个监听键盘事件可以做到模拟但是没必要,实际要考虑的东西比较多 |
10
roryzh 2019-09-04 09:19:54 +08:00
...这是神恶魔项目
|
11
LeeSeoung 2019-09-04 09:57:02 +08:00
1、v-show
2、参考上面 ref 3、dispatchevent 或者直接调用函数啊,没太仔细看。 |
12
version0 2019-09-04 11:46:47 +08:00 via Android
提示词咋取的,所有搜索引擎都一样呢
|
13
eluotao 2019-09-04 15:28:16 +08:00
dogedoge 搜索没有 减 10 分 哈哈
|