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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程