搜索
MaterialUI 是如何做到这一点的?
P粉916760429
P粉916760429 2023-09-04 18:17:31
[Vue.js讨论组]
<p>如果你看看他们的自动完成组件:https://mui.com/material-ui/react-autocomplete/</p> <p>单击下拉列表中的建议后,输入框会保持焦点...他们是如何做到的?在我自己的 vue 应用程序(不使用材质 UI)中的每个变体中,我无法获取单击事件来阻止输入失去焦点。</p> <p>我已经尝试用谷歌搜索这个问题很长一段时间了,但没有看到明确的解决方案。例如,人们建议 mousedown/touchstart,但这会破坏滚动(通过拖动下拉菜单)。 MaterialUI显然没有这个问题,并且似乎没有使用mousedown。</p> <p>我尝试使用 Chrome 开发工具分析事件,但只能看到单个点击事件,但使用精简的代码很难判断发生了什么。</p> <p>Vuetify 也这样做:https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts</p> <p>如果有人遇到这个问题,我也发现这很有帮助https://codepen.io/Pineapple/pen/MWBVqGW</p> <p><strong>编辑</strong>这就是我正在做的事情:</p> <pre class="brush:html;toolbar:false;"> &lt;app-input-autocomplete @autocomplete-select=&quot;onSelect&quot; @autocomplete-close=&quot;onClose&quot; :open=&quot;open&quot;&gt; &lt;template #default=&quot;{ result }&quot;&gt; &lt;div class=&quot;input-autocomplete-address&quot;&gt; {{ result.address }} &lt;/div&gt; &lt;/template&gt; &lt;/app-input-autocomplete&gt; </pre> <p>然后在<code>app-input-autocomplete</code>中:</p> <pre class="brush:html;toolbar:false;">&lt;template&gt; &lt;app-input @focus=&quot;onFocus&quot; @blur=&quot;onBlur&quot; v-bind=&quot;$attrs&quot;&gt; &lt;template #underInput&gt; &lt;div ref=&quot;dropdown&quot; v-show=&quot;open&quot; class=&quot;input-autocomplete-dropdown&quot;&gt; &lt;div class=&quot;input-autocomplete-results&quot;&gt; &lt;div v-for=&quot;result in results&quot; :key=&quot;result.id&quot; @click=&quot;onClick(result)&quot; class=&quot;input-autocomplete-result&quot;&gt; &lt;slot :result=&quot;result&quot; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;/app-input&gt; &lt;/template&gt; &lt;script&gt; import { ref, toRef } from 'vue'; import AppInput from '@/components/AppInput.vue'; import { onClickOutside } from '@vueuse/core'; export default { components: { AppInput, }, inheritAttrs: false, props: { open: { type: Boolean, default: false, }, results: { type: Array, default: () =&gt; ([]), }, }, emits: ['autocomplete-close', 'autocomplete-select'], setup(props, { emit }) { const dropdown = ref(null); const open = toRef(props, 'open'); const focused = ref(false); onClickOutside(dropdown, () =&gt; { if (!focused.value &amp;&amp; open.value) { emit('autocomplete-close'); } }); return { dropdown, focused, }; }, methods: { onFocus() { this.focused = true; }, onBlur() { this.focused = false; }, onClick(result) { this.$emit('autocomplete-select', result); }, }, }; &lt;/script&gt; </pre></p>
P粉916760429
P粉916760429

全部回复(1)
P粉994092873

我通过执行以下操作解决了这个问题,感谢@Claies 提供的想法以及此链接:

https://codepen.io/Pineapple/pen/MWBVqGW

  1. event.preventDefault on mousedown
  2. @click 结果的行为与正常情况相同(关闭输入)
  3. @click/@focus 输入集open = true
  4. @blur 设置 open = false
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号