vue3 组件avator在hover时 显示upload dialog页的按钮，点击弹出upload dialog

你可以使用 Vue 3 中的条件渲染和事件绑定来实现这个功能。

首先，在你的 avator 组件中添加一个按钮，并使用条件渲染来控制其显示/隐藏：

<template>
  <div class="avator" @mouseover="showUploadButton" @mouseleave="hideUploadButton">
    <img :src="imageUrl" alt="Avator">
    <button v-if="showButton" @click="showUploadDialog">上传头像</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    imageUrl: {
      type: String,
      required: true
    }
  },
  setup() {
    const showButton = ref(false)

    const showUploadButton = () => {
      showButton.value = true
    }

    const hideUploadButton = () => {
      showButton.value = false
    }

    const showUploadDialog = () => {
      // 显示上传头像的对话框
    }

    return {
      showButton,
      showUploadButton,
      hideUploadButton,
      showUploadDialog
    }
  }
}
</script>

在上述代码中，我们使用了 `v-if` 指令来控制按钮是否显示，使用了 `@mouseover` 和 `@mouseleave` 事件来触发显示/隐藏按钮的逻辑，使用了 `@click` 事件来绑定上传头像的方法。

然后，你需要在父组件中使用这个 avator 组件，并在上传头像的方法中显示上传头像的对话框。具体实现方式取决于你使用的上传组件或对话框组件，这里以 element-ui 的对话框组件为例：

<template>
  <div>
    <avator :imageUrl="imageUrl" />
    <el-dialog v-model="showUploadDialog">
      <!-- 上传头像的表单 -->
    </el-dialog>
  </div>
</template>

<script>
import Avator from './Avator.vue'
import { ref } from 'vue'

export default {
  components: {
    Avator
  },
  setup() {
    const imageUrl = ref('https://example.com/avator.jpg')
    const showUploadDialog = ref(false)

    const showUploadDialogHandler = () => {
      showUploadDialog.value = true
    }

    return {
      imageUrl,
      showUploadDialog,
      showUploadDialogHandler
    }
  }
}
</script>

在上述代码中，我们在父组件中使用了 avator 组件，并在上传头像的方法中显示了 element-ui 的对话框组件。在 `setup` 函数中，我们使用了 `ref` 来创建了一个响应式数据 `showUploadDialog`，并使用了 `showUploadDialogHandler` 方法来触发显示对话框的逻辑。当你点击 avator 组件上的上传头像按钮时，会触发父组件中的 `showUploadDialogHandler` 方法，从而显示上传头像的对话框。