多选下清除picked后自动展示出下拉框

[tianhaoyang1]

多选下拉选择的使用中，使用了this.$refs.sp.remove()或设置this.$refs.sp.picked=[]后，会自动跳出下拉框dropdown来，请问如果不想要这个自动展示要怎么做？

[TerryZ]

多选模式的操作逻辑跟单选模式略有不同

• 单选模式 选择项目后，会关闭下拉列表，并响应事件
• 多选模式 无论是选择项目还是清空选择，下拉列表会始终保持打开，直到鼠标点击插件外区域或点击 X 按钮关闭

目前没有设置参数可以关闭该行为，如果你希望清空内容后，关闭列表，可以参考以下方式

<template>
  <v-selectpage
    ref="sp"
  ></v-selectpage>
</template>

<script>
export default {
  methods: {
    clear () {
      this.$refs.sp.remove()
      this.$refs.sp.close()
    }
  }
}
</script>

[tianhaoyang1]

我有这样写过的，但是close事件并不能成功，现在是用的 setTimeout(() => {
this.$refs.sp.close();
},1)
这样才成功关闭，必须要有一点延迟才能关闭。

[TerryZ]

因为有监听，监听后有相应的处理，所以会有不同步执行的问题，可以用 setTimeout 也可以用 $nextTick

[tianhaoyang1]

好的，谢谢

[liuhean]

你好，但是清除的时候，他的位置不会跟随变动

[TerryZ]

你好，但是清除的时候，他的位置不会跟随变动

这里讨论的是解决通过函数的方式清除选择项时，会弹出下拉层的问题，而如果你是需要下拉层处于展开的状态，那就不调用 close 方法关闭下拉层，而是调用 adjust 来自动调整下拉层容器位置

clear () {
  this.$refs.sp.remove()
  this.$refs.sp.adjust()
}