Popover 弹出框用法总结及其弹出隐藏问题

时间 2019-11-06

标签 popover 弹出用法总结及其隐藏问题繁體版

原文原文链接

引言

最近项目中屡次用到了Popover弹出框，在使用时，也遇到了一些坑，好比如何控制显示和隐藏，及在表格数据中如何针对当条数据进行显示和隐藏，因此对Popover相关知识作了一个总结。javascript

Popover 弹出框用法总结

Popover 有四种激活方式，主要支持四种触发方式：hover，click，focus 和 manual，经过trigger属性用于设置什么时候触发 Popover。触发方式主要分为两种：使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。vue

使用 slot="reference" 的具名插槽

<el-popover
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是hover 激活。"
>
<el-button slot="reference">hover 激活</el-button>
</el-popover>
<el-popover
placement="bottom"
title="标题"
width="200"
trigger="click"
content="这是click 激活。"
>
<el-button slot="reference">click 激活</el-button>
</el-popover>
<el-popover
placement="right"
title="标题"
width="200"
trigger="focus"
content="这是focus 激活"
>
<el-button slot="reference">focus 激活</el-button>
</el-popover>
<el-popover
placement="bottom"
title="标题"
width="200"
trigger="manual"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
v-model="visible"
>
<el-button
slot="reference"
@click="visible = !visible"
>手动激活</el-button>
</el-popover>
复制代码

使用自定义指令v-popover指向 Popover 的索引ref

<el-popover
ref="popover-hover"
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是hover 激活。"
>
</el-popover>
<el-button v-popover:popover-hover>hover 激活</el-button>
<el-popover
ref="popover-click"
placement="bottom"
title="标题"
width="200"
trigger="click"
content="这是click 激活。"
>
</el-popover>
<el-button v-popover:popover-click>click 激活</el-button>
<el-popover
ref="popover-focus"
placement="right"
title="标题"
width="200"
trigger="focus"
content="focus 激活"
>
</el-popover>
<el-button v-popover:popover-focus>focus 激活</el-button>
<el-popover
ref="popover"
placement="bottom"
title="标题"
width="200"
trigger="manual"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
v-model="visible"
>
</el-popover>
<el-button
v-popover:popover
@click="visible = !visible"
>手动激活</el-button>
复制代码

能够在 Popover 中嵌套多种类型信息，如下为嵌套表格的例子。java

<el-popover
    placement="right"
    width="400"
    trigger="click"
    v-model="visible"
    >
<el-table :data="gridData">
    <el-table-column
        width="150"
        property="date"
        label="日期"
    ></el-table-column>
    <el-table-column
        width="100"
        property="name"
        label="姓名"
    ></el-table-column>
</el-table>
<div style="text-align: right; margin: 0">
    <el-button
        size="mini"
        type="text"
        @click="visible = false"
    >取消</el-button>
    <el-button
        type="primary"
        size="mini"
        @click="visible = false"
    >肯定</el-button>
</div>
<el-button slot="reference">click 激活</el-button>
</el-popover>
复制代码

同时Popover还有不少事件属性，例如：show 显示时触发—after-enter 显示动画播放完毕后触发 —hide 隐藏时触发 —after-leave 隐藏动画播放完毕后触发，等其实以上内容在Element-UI 使用手册文档 V2.4.6 （Vue版本），这里作了一些概括。具体可访问地址： www.bookstack.cn/books/Eleme…

Popover弹出框隐藏问题

在实际项目中，Popover弹出框不单单是显示一下，在Popover弹出框弹出框中还会有许多其余的操做，操做完后，点击保存或取消，弹出框就应该随之隐藏。咱们先从简单的来看。ide

单纯按钮的弹出与隐藏

其实上面代码中，已经实现了一种较简单的弹出与隐藏。下面咱们看实例：测试

<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="车位名称"
        prop="name"
      >
        <el-input
          v-model.trim="form.name"
          tips-placement="top-start"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="车位名称"
        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"
      >取消</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="visible = false"
      >肯定</el-button>
    </div>
    <el-button slot="reference">click 激活</el-button>
  </el-popover>
复制代码

咱们能够看出，经过v-model的方式设置一个visible2,经过点击取消和保存事件控制visible2的值，是能够解决单个按钮的Popover弹出框隐藏问题的。

在表格中的或者循环多条数据下，Popover弹出框隐藏问题

经过自定义显示与隐藏，能够解决单个按钮的显示与隐藏问题，下面咱们试试是否能够解决表格下的多条数据的后按钮的显示与隐藏功能。动画

<el-table :data="gridData">
    <el-table-column
      width="150"
      property="date"
      label="日期"
    ></el-table-column>
    <el-table-column
      width="100"
      property="name"
      label="姓名"
    ></el-table-column>
    <el-table-column
      label="操做"
      width="120"
      fixed="right"
    >
      <template slot-scope="scope">
        <!-- 当资源为2~1000，不能显示操做按钮，且勾选禁用 -->
        <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="车位名称"
              prop="name"
            >
              <el-input
                v-model.trim="form.name"
                tips-placement="top-start"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="车位名称"
              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"
            >取消</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="visible = false"
            >肯定</el-button>
          </div>
          <el-button
            slot="reference"
            @click="visible =!visible"
          >click 激活</el-button>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
复制代码

发现经过处理visible的值，多条数据的按钮会同时显示和隐藏，显然不行了。到这里，我在网上也搜了下，若是能够肯定该条数据的惟一性，那应该就能够解决这个问题。废话很少说，咱仍是经过代码来验证：

<el-table :data="gridData">
    <el-table-column
      width="150"
      property="date"
      label="日期"
    ></el-table-column>
    <el-table-column
      width="100"
      property="name"
      label="姓名"
    ></el-table-column>
    <el-table-column
      label="操做"
      width="120"
      fixed="right"
    >
      <template slot-scope="scope">
        <!-- 当资源为2~1000，不能显示操做按钮，且勾选禁用 -->
        <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="车位名称"
              prop="name"
            >
              <el-input
                v-model.trim="form.name"
                tips-placement="top-start"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="车位名称"
              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)"
            >取消</el-button>
          </div>
          <el-button
            type="primary"
            slot="reference"
            size="mini"
            @click="openAction(scope.row.id)"
          >测试
          </el-button>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
  <script>
    export default {
      name: 'BasicTable',
      data () {
        return {
          refNamePopover: 'popover-', // popover ref名称前缀
          form: {
            name: '',
            sex: '',
            data: ''
          },
          gridData: [{
            date: '2016-05-02',
            name: '哈哈',
            id: '1'
          }, {
            date: '2016-05-04',
            name: '哈哈',
            id: '2'
          }, {
            date: '2016-05-01',
            name: '哈哈',
            id: '3'
          }, {
            date: '2016-05-03',
            name: '哈哈',
            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>
复制代码

经过惟一Id 来控制Popover 弹出框弹出与隐藏，完美的解决了表格或多条数据使用Popover 弹出框弹出与隐藏的问题。以上概括，也参考了不少博主和官网的看法，在这再次感谢。但愿这些概括能让你跟好的使用Popover 弹出框.

解决遗留问题

有博主提出，上测实例会出现多个弹框的状况，我试了下，的确是个问题。下面是这个问题的解决办法：ui

<el-table :data="gridData">
    <el-table-column
      label="操做"
      width="120"
      >
      <template slot-scope="scope">
        <!-- 当资源为2~1000，不能显示操做按钮，且勾选禁用 -->
        <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="车位名称"
              prop="name"
            >
              <el-input
                v-model.trim="form.name"
                tips-placement="top-start"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="车位名称"
              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)"
          >取消</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>
复制代码

script里的内容不变，经过trigger="click"，这样当点击下个按钮时，这个popover弹框就会被隐藏。这样就不会出现多个弹框的状况。一样点击取消时，也能够关闭弹框。注：当el-table-column中加入fixed="right"属性时，固定按钮在右侧，点击取消时就不能关闭弹框了，我也试了好久，解决办法还在研究中，但愿大牛知指导this