时间戳

首页 > 解决方案 > 如何在鼠标离开时关闭 ant-design-vue 选择选项？

javascript - 如何在鼠标离开时关闭 ant-design-vue 选择选项？

问题描述

<a-select
    showSearch
    placeholder="Select a person"
    optionFilterProp="children"
    style="width: 200px"
    :open="open"
    @mouseenter="openSelect"
    @mouseleave="closeSelect"
  >
    <a-select-option value="jack">Jack</a-select-option>
    <a-select-option value="lucy">Lucy</a-select-option>
    <a-select-option value="tom">Tom</a-select-option>
  </a-select>
</template>

data() {
  open: false,
}

methods: {
  openSelect() {
    this.open = true;
  }
  closeSelect() {
    this.open = false;
  }
}

当用户不再使用它时如何关闭 ant-design-vue 选择选项？我尝试过使用 onBlur 和 onMouseLeave。我也尝试过创建一个函数 onFocus() {this.open = true} 和函数 onBlur(){ this.open=false } 但仍然不起作用

mouseleaveevent 将在指针不在字段中但选项仍然无法选择后触发

标签： javascriptvue.jsantd

解决方案

http://vue.ant-design.cn/components/select/#events

根据选择组件的文档，有一个mouseleave事件支持。尝试使用@mouseleave="foo"设置选项不可见

推荐阅读