Control elementUI Popover to show OR hide

Learn about the Popover component

Let's start with the basic Popover component. For details, see the official website

el-popover
  placement="right"
  width="400"
  trigger="click"
  spandemo/span
  el-button slot="reference"Click activate/el-button
/el-popover
Copy the code

The component at this point will automatically close the component when clicked outside the component.

Project problems

But sometimes this feature can get annoying. For example, when I nested a selector in this component, the code would look like this:

el-popover
  placement="right"
  width="400"
  trigger="click"
  section
    spanStatus:/span
    el-select v-model="chooseStatus"
      placeholder="Please select"
    
      el-option v-for="item in statusList"
      :key="item.value"
      :label="item.value"
      :value="item.key"
        /el-option
    /el-select
  /section
  el-button slot="reference"Click activate/el-button
/el-popover
Copy the code

If I click on the dropdown option, it will automatically close the popup because the dropdown option is outside the popup. But my product tells me that we need to use the save button (I don't know why), so we can't close the popup after selecting the option. Then we need to improve our code. I read the official documentation carefully and found two attributes trigger and Visible, which solved my urgent need.

Click /focus/hover/manual Visible: control whether the pop-up window is displayed, with trigger:manual effect

With the above two, my code is changed to the following:

el-popover placement="bottom"
  trigger="manual"
  :visible="isShowPopover"
  width="400"
  div class="popoverWrap"
    section
     spanStatus:/span
     el-select v-model="chooseStatus"
       placeholder="Please select"
     
       el-option v-for="item in statusList"
         :key="item.value"
         :label="item.value"
         :value="item.key"
       /el-option
      /el-select
     /section
     section
       el-button type="primary"
         @click="updateStatus(); isShowPopover = false"save/el-button
       el-button @click="isShowPopover = false"cancel/el-button
     /section
    /div
  template v-slot:reference
    span type="text" class="handleSpan"
      @click="isShowPopover = true"state/span
  /template
/el-popover
Copy the code

The problem has been solved by officially handing over control of the popup display to the two buttons (controlling the value of isShowPopover).