点击el-input出现el-popover,并且时el-popver始终处理el-input下方

为了实现点击el-input出现el-popover，并且使el-popover始终出现在el-input下方，可以按照以下步骤进行操作：

1. 在el-input标签中添加ref属性，用于在JavaScript中引用该元素。
2. 在el-input标签中添加@click事件，用于在单击el-input时触发JavaScript函数。
3. 在JavaScript函数中，使用this.$refs获取el-input元素的位置信息，并计算出el-popover应该出现的位置。
4. 在el-popover标签中添加v-model属性，用于控制el-popover的显示和隐藏。
5. 在el-popover标签中添加popper-class属性，用于自定义el-popover的样式。
6. 在el-popover标签中添加transition属性，用于设置el-popover的过渡效果。

下面是一个示例代码，可以实现点击el-input出现el-popover，并且使el-popover始终出现在el-input下方：

<template>
  <div>
    <el-input ref="input" v-model="inputValue" placeholder="请输入内容" @click="showPopover"></el-input>
    <el-popover v-model="popoverVisible" popper-class="my-popover" transition="el-fade-in-linear">
      <div>这是一个el-popover</div>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      popoverVisible: false
    }
  },
  methods: {
    showPopover() {
      this.popoverVisible = true;
      this.$nextTick(() => {
        const inputRect = this.$refs.input.getBoundingClientRect();
        const popoverRect = this.$refs.popover.$el.getBoundingClientRect();
        const top = inputRect.top + inputRect.height;
        const left = inputRect.left + inputRect.width / 2 - popoverRect.width / 2;
        this.$refs.popover.$el.style.top = `${top}px`;
        this.$refs.popover.$el.style.left = `${left}px`;
      });
    }
  }
}
</script>

<style>
.my-popover {
  background-color: #f0f0f0;
  color: #333;
  border: none;  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>