image-20230104123514646

当点击“未收到邮箱验证码”时弹出左边所示的气泡框。

elemt-plus组件使用范例如下

image-20230612194301925

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<template>
  <el-popover
    placement="top-start"
    title="Title"
    :width="200"
    trigger="hover"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button class="m-2">Hover to activate</el-button>
    </template>
  </el-popover>

  <el-popover
    placement="bottom"
    title="Title"
    :width="200"
    trigger="click"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button class="m-2">Click to activate</el-button>
    </template>
  </el-popover>

  <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>

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

  <el-popover
    :visible="visible"
    placement="bottom"
    title="Title"
    :width="200"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button class="m-2" @click="visible = !visible"
        >Manual to activate</el-button
      >
    </template>
  </el-popover>
</template>

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

const visible = ref(false)
</script>

<style scoped>
.el-button + .el-button {
  margin-left: 8px;
}
</style>

文中所示代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<el-popover placement="left" :width="500" trigger="click">
  <div>
    <p>1、在垃圾箱中查找邮箱验证码</p>
    <p>2、在邮箱中头像->设置->反垃圾->白名单->设置邮件地址白名单</p>
    <p>
      3、将邮箱【laoluo@wuhancoder.com】添加到白名单不知道怎么设置？
    </p>
  </div>
  <template #reference>
    <span class="a-link" :style="{ 'font-size': '14px' }"
      >未收到邮箱验证码？</span
    >
  </template>
</el-popover>