[Feature Request] Popover: reactive trigger

[Tofandel]

Existing Component

Yes

Component Name

Popover

Description

Currently it is not possible to have a dynamic trigger on a popover Eg: <el-popover :trigger="condition ? 'manual' : 'hover'">

If the condition changes, the trigger is updated but the events, having been defined in the mounted hook, nothing actually changes

A watcher is needed to check if the value changes to add/remove the correct events

[arslan-butt]

Use the key modifier on the el-popover as the element should be recreated

The key special attribute is primarily used as a hint for Vue’s virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible.

Example:

HTML

  <el-popover 
   :key="trigger"
    placement="top-start"
    :trigger="trigger"
    width="200"
    :title="title"
    :content="content">
    <el-button slot="reference">Button</el-button>
 </el-popover>

 <el-button type="text" @click='changeToClick'>Change To Click</el-button>
  <el-button type="text" @click='changeToHover'>Change To hover</el-button>

Javascript

    data() {
        return {
          visible: false,
          title: 'Default title',
          content: 'Default content',
          trigger: 'click',
        };
      },
      methods: {
        changeToClick() {
          this.title= 'Click title';
          this.content= 'Click content will be here';
          this.trigger  = 'click';
        },
        changeToHover() {
          this.title= 'Hover title';
          this.content= 'Hover content will be here';
          this.trigger  = 'hover';
        },
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.