The introduction

Recently, Popover popup box has been used many times in the project. When using it, I also encountered some problems, such as how to control the display and hide, and how to show and hide the data in the table. Therefore, I made a summary of Popover related knowledge.

Summary of Popover usage

Popover has four activation methods, and four main trigger methods are supported: Hover, click, Focus and manual. The trigger attribute is used to set when Popover is triggered. There are two main triggering methods: using named slots with slot=”reference”, or using the custom v-popover directive to point to the popover index ref.

Use named slots with slot=”reference”

<el-popover
placement="top-start"
title="Title"
width="200"
trigger="hover"
content="This is hover activation."
>
<el-button slot="reference">Hover activation</el-button>
</el-popover>
<el-popover
placement="bottom"
title="Title"
width="200"
trigger="click"
content="This is click activation."
>
<el-button slot="reference">Click activate</el-button>
</el-popover>
<el-popover
placement="right"
title="Title"
width="200"
trigger="focus"
content="This is focus activation."
>
<el-button slot="reference">Focus the activation</el-button>
</el-popover>
<el-popover
placement="bottom"
title="Title"
width="200"
trigger="manual"
content="This is a piece of content, this is a piece of content, this is a piece of content, this is a piece of content."
v-model="visible"
>
<el-button
slot="reference"
@click="visible = ! visible"
>Manual activation</el-button>
</el-popover>
Copy the code

Use the custom directive V-popover to point to the index ref of popover

 <el-popover
ref="popover-hover"
placement="top-start"
title="Title"
width="200"
trigger="hover"
content="This is hover activation."
>
</el-popover>
<el-button v-popover:popover-hover>Hover activation</el-button>
<el-popover
ref="popover-click"
placement="bottom"
title="Title"
width="200"
trigger="click"
content="This is click activation."
>
</el-popover>
<el-button v-popover:popover-click>Click activate</el-button>
<el-popover
ref="popover-focus"
placement="right"
title="Title"
width="200"
trigger="focus"
content="Focus activate"
>
</el-popover>
<el-button v-popover:popover-focus>Focus the activation</el-button>
<el-popover
ref="popover"
placement="bottom"
title="Title"
width="200"
trigger="manual"
content="This is a piece of content, this is a piece of content, this is a piece of content, this is a piece of content."
v-model="visible"
>
</el-popover>
<el-button
v-popover:popover
@click="visible = ! visible"
>Manual activation</el-button>
Copy the code

There are many types of information that can be nested in Popover. The following is an example of a nested table.


<el-popover
    placement="right"
    width="400"
    trigger="click"
    v-model="visible"
    >
<el-table :data="gridData">
    <el-table-column
        width="150"
        property="date"
        label="Date"
    ></el-table-column>
    <el-table-column
        width="100"
        property="name"
        label="Name"
    ></el-table-column>
</el-table>
<div style="text-align: right; margin: 0">
    <el-button
        size="mini"
        type="text"
        @click="visible = false"
    >cancel</el-button>
    <el-button
        type="primary"
        size="mini"
        @click="visible = false"
    >determine</el-button>
</div>
<el-button slot="reference">Click activate</el-button>
</el-popover>
Copy the code

Popover also has many event attributes, such as: Trigger when show is displayed — trigger when after-enter is displayed — trigger when hide is hidden — trigger when after-leave is displayed, etc. In fact, the above content is in elemental-UI user manual document V2.4.6 (Vue version), There’s a little generalization here. Specific accessible address:www.bookstack.cn/books/Eleme…

Popover Popover hides the problem

In a real project, the Popover is not just a display, there are a lot of other things you can do in the Popover Popover. When you’re done, click Save or cancel and the Popover should be hidden. Let’s start with something simple.

Simple button pop-up and hide

In fact, the above code, has implemented a relatively simple pop-up and hide. Here’s an example:

<el-popover
    placement="right"
    width="400"
    trigger="manual"
    v-model="visible"
>
    <el-form
      ref="form"
      label-position="top"
      class="page-form"
      style="margin-bottom: 80px;"
      :model="form"
      :rules="rules"
    >
      <el-form-item
        label="Name of Parking Space"
        prop="name"
      >
        <el-input
          v-model.trim="form.name"
          tips-placement="top-start"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="Name of Parking Space"
        prop="name"
      >
        <el-input
          v-model.trim="form.sex"
          tips-placement="top-start"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div style="text-align: right; margin: 0">
      <el-button
        size="mini"
        type="text"
        @click="visible = false"
      >cancel</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="visible = false"
      >determine</el-button>
    </div>
    <el-button slot="reference">Click activate</el-button>
  </el-popover>
Copy the code

We can see that setting up a Visible2 in v-model mode and controlling the value of visible2 by clicking cancel and save events can solve the Popover concealment problem of a single button.

Popover hides problems in a table or in a loop with multiple pieces of data

By customizing the display and hide, you can solve the problem of the display and hide of a single button. Let’s try whether we can solve the display and hide function of the back button of multiple data in the table.

<el-table :data="gridData">
    <el-table-column
      width="150"
      property="date"
      label="Date"
    ></el-table-column>
    <el-table-column
      width="100"
      property="name"
      label="Name"
    ></el-table-column>
    <el-table-column
      label="Operation"
      width="120"
      fixed="right"
    >
      <template slot-scope="scope">
        <! -- If the resource is between 2 and 1000, the operation button cannot be displayed, and select Disable -->
        <el-popover
          placement="right"
          width="400"
          trigger="manual"
          v-model="visible"
        >
          <el-form
            ref="form"
            label-position="top"
            class="page-form"
            style="margin-bottom: 80px;"
            :model="form"
          >
            <el-form-item
              label="Name of Parking Space"
              prop="name"
            >
              <el-input
                v-model.trim="form.name"
                tips-placement="top-start"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="Name of Parking Space"
              prop="name"
            >
              <el-input
                v-model.trim="form.sex"
                tips-placement="top-start"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: right; margin: 0">
            <el-button
              size="mini"
              type="text"
              @click="visible = false"
            >cancel</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="visible = false"
            >determine</el-button>
          </div>
          <el-button
            slot="reference"
            @click="visible =! visible"
          >Click activate</el-button>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
Copy the code

Visible (visible) : multiple data buttons are visible and hidden at the same time. Here, I also searched on the Internet, if you can determine the uniqueness of the data, that should be able to solve the problem. Without further ado, let’s verify this with code:

<el-table :data="gridData">
    <el-table-column
      width="150"
      property="date"
      label="Date"
    ></el-table-column>
    <el-table-column
      width="100"
      property="name"
      label="Name"
    ></el-table-column>
    <el-table-column
      label="Operation"
      width="120"
      fixed="right"
    >
      <template slot-scope="scope">
        <! -- If the resource is between 2 and 1000, the operation button cannot be displayed, and select Disable -->
        <el-popover
          placement="top"
          width="400"
          trigger="manual"
          :ref="refNamePopover + scope.row.id"
        >
          <el-form
            ref="form"
            label-position="top"
            class="page-form"
            style="margin-bottom: 80px;"
            :model="form"
          >
            <el-form-item
              label="Name of Parking Space"
              prop="name"
            >
              <el-input
                v-model.trim="form.name"
                tips-placement="top-start"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="Name of Parking Space"
              prop="name"
            >
              <el-input
                v-model.trim="form.sex"
                tips-placement="top-start"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: center; margin: 0">
            <el-button
              size="mini"
              type="text"
              @click="cancleAction(scope.row.id)"
            >cancel</el-button>
          </div>
          <el-button
            type="primary"
            slot="reference"
            size="mini"
            @click="openAction(scope.row.id)"
          >test</el-button>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
  <script>
    export default {
      name: 'BasicTable',
      data () {
        return {
          refNamePopover: 'popover-'.// popover ref name prefix
          form: {
            name: ' '.sex: ' '.data: ' '
          },
          gridData: [{
            date: '2016-05-02'.name: 'ha ha'.id: '1'
          }, {
            date: '2016-05-04'.name: 'ha ha'.id: '2'
          }, {
            date: '2016-05-01'.name: 'ha ha'.id: '3'
          }, {
            date: '2016-05-03'.name: 'ha ha'.id: '4'}}},methods: {
        cancleAction (id) {
          let refName = this.refNamePopover + id
          this.$refs[refName].doClose()
        },
        openAction (id) {
          let refName = this.refNamePopover + id
          this.$refs[refName].doShow()
        }
      }
    }
</script>
Copy the code

Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Popover Above summary, also referred to many bloggers and the official website of the opinion, thank you again in this. Hopefully, this summary will help you get better at using the Popover.

Resolving legacy issues

Some bloggers suggested that there would be multiple popboxes in the test instance. I tried it and it was indeed a problem. Here’s how to solve this problem:

<el-table :data="gridData">
    <el-table-column
      label="Operation"
      width="120"
      >
      <template slot-scope="scope">
        <! -- If the resource is between 2 and 1000, the operation button cannot be displayed, and select Disable -->
        <el-popover
          :ref="refNamePopover + scope.row.id"
          placement="left"
          width="400"
          trigger="click"
        >
          <el-form
            ref="form"
            label-position="top"
            class="page-form"
            style="margin-bottom: 80px;"
            :model="form"
          >
            <el-form-item
              label="Name of Parking Space"
              prop="name"
            >
              <el-input
                v-model.trim="form.name"
                tips-placement="top-start"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="Name of Parking Space"
              prop="name"
            >
              <el-input
                v-model.trim="form.sex"
                tips-placement="top-start"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <el-button
            type="primary"
            @click="cancleAction(scope.row.id)"
          >cancel</el-button>
          <el-button
            type="iconButton"
            slot="reference"
            :title="$t('vms.ui.device.edit')"
          >
            <i class="h-icon-edit"></i>
          </el-button>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
Copy the code

The contents of the script remain the same, trigger=”click”, so that when the next button is clicked, the popover box is hidden. So you don’t have multiple pop-ups. Also click Cancel, you can also close the pop-up box. Note: When fixed=”right” attribute is added to the el-table-column, the fixed button is on the right, and the popbox cannot be closed when clicking Cancel. After exploration, the following feasible usage is obtained

Correct use of table popovers

 <el-table-column :label="$t('common.operate')" width="150" fixed="right">
            <template slot-scope="scope">
              <div>
                <el-popover
                  :ref="'edit' + scope.row.visitorTypeId"
                  placement="left"
                  width="320"
                  trigger="click"
                  @show=" form.visitorTypeName = scope.row.visitorTypeName selectedPurposeId = scope.row.visitorTypeId "
                >
                  <el-form
                    ref="form"
                    style="padding:12px;"
                    :model="form"
                    :rules="rules"
                  >
                    <el-form-item prop="visitorTypeName" :rules="rules.visitorTypeName">
                      <el-input
                        v-model.trim="form.visitorTypeName"
                        :placeholder="$t('visitor.setting.editVisitorTypeTip')"
                        :maxlength="32"
                        :clearable="true"
                        :tips="$t (' visitor. Setting. NameTip ', [1])"
                        tips-placement="top-start"
                      />
                    </el-form-item>
                    <! -- Avoid enter triggering form submission -->
                    <el-input style="display:none" />
                  </el-form>
                  <div style="text-align: right; margin-right: 12px;">
                    <el-button
                      v-loading.fullscreen="dialogLoading"
                      type="primary"
                      @click="handleEditSure('edit')"
                    >
                      {{ $t('common.sure') }}
                    </el-button>
                  </div>
                  <el-button
                    slot="reference"
                    type="iconButton"
                    :title="$t('common.edit')"
                  >
                    <i class="h-icon-edit" />
                  </el-button>
                </el-popover>
              </div>
            </template>
          </el-table-column>
      <script>
    export default {
      name: 'BasicTable',
      data () {
        return {
          form: {
            visitorTypeName: ' '}, selectedPurposeId:' '}},methods: {
        handleEditSure () {
         let refName = 'edit' + this.selectedPurposeId
         this.$refs[refName].doClose()
        }
      }
    }
</script>    
Copy the code

After editing, click OK to turn off popover only by id. In this way, popover will also disappear when you click on a blank area. Fully satisfied with table editing popover use. Fixed =”right” does not affect popovers.