vueuse-onClickOutside点击元素外部进行操作

需求:点击红框外部进行关闭城市选择

使用vueuse提供的函数onClickOutside

<template>
  <div class="xtx-city" ref="target">
    <div class="select" @click="toggle">
      <span class="placeholder">请选择配送地址</span>
      <span class="value"></span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="option" v-if="visible">
      <span class="ellipsis" v-for="i in 24" :key="i">北京市</span>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
export default {
  name: 'XtxCity',
  setup () {
    // 显示隐藏数据
    const visible = ref(false)
    // 提供打开和关闭函数
    const open = () => {
      visible.value = true
    }
    const close = () => {
      visible.value = false
    }
    // 提供一个切换函数给select使用
    const toggle = () => {
      visible.value ? close() : open()
    }
    // 实现点击组件外部元素关闭操作
    const target = ref(null)
    onClickOutside(target, () => {
      // 参数1：监听哪个元素
      // 参数2：点击了该元素外其他地方触发的函数
      toggle()
    })
    return { visible, toggle, target }
  }
}
</script>