<script setup lang="ts">
import { nextTick, ref } from 'vue'

const isVisible = ref(false)

function handleFocus() {
  isVisible.value = true
}

function handleBlur() {
  // 延时是为了解决点击Popover内容时，input失去焦点导致Popover立即关闭的问题。
  setTimeout(() => {
    isVisible.value = false
  }, 200)
}
</script>

<template>
  <!-- <div style="max-width: 400px">
    <el-popover :visible="isVisible" placement="bottom" title="Title" :width="200" content="this is content, this is content, this is content">
      <template #reference>
        <div>
          <el-input v-model="input1" @click="handlePopover" style="width: 350px" placeholder="Please input">
            <template #prepend>
              <el-select v-model="select" placeholder="Select" style="width: 115px">
                <el-option label="Restaurant" value="1" />
                <el-option label="Order No." value="2" />
                <el-option label="Tel" value="3" />
              </el-select>
            </template>
          </el-input>
        </div>
      </template>
    </el-popover>
  </div> -->

  <!-- <el-popover ref="popover" placement="right" title="Title" :width="200" trigger="focus" content="this is content, this is content, this is content">
    <template #reference>
      <el-button class="m-2">Focus to activate</el-button>
    </template>
  </el-popover> -->

  <div>
    <el-popover v-model:visible="isVisible" placement="bottom" title="Title" content="This is content">
      <template #reference>
        <el-input placeholder="Please input" @focus="handleFocus" @blur="handleBlur"></el-input>
      </template>
    </el-popover>
  </div>
</template>

<style scoped></style>
