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">
  <span>demo</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>
    <span>Status:</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>
     <span>Status:</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).