введение
Всплывающее окно Popover много раз использовалось в последних проектах, при его использовании я также столкнулся с некоторыми подводными камнями, например, как управлять отображением и скрытием, и как отображать и скрывать текущие данные в табличных данных, поэтому Я сделал некоторые связанные знания о Popover.
Сводка по использованию всплывающего окна
Popover имеет четыре метода активации и в основном поддерживает четыре метода триггера: наведение, щелчок, фокус и вручную.Атрибут триггера используется для установки времени запуска Popover. Существует два основных способа запуска: использование именованного слота со slot="reference" или использование пользовательской инструкции v-popover для указания на индексную ссылку Popover.
Именованные слоты с помощью 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.
<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 могут быть вложены различные типы информации, ниже приведен пример вложенной таблицы.
<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 также имеет множество атрибутов событий, таких как: показ запускается при отображении дисплея — после ввода запускается после завершения анимации отображения — скрытие запускается при скрытии — после выхода запускается после скрытого анимация завершена и т.д.
На самом деле вышеприведенное содержание кратко изложено в справочном документе Element-UI версии 2.4.6 (версия Vue). конкретный доступный
адрес:Woohoo. стопка книг. Можете ли вы /books/E...
Скрытая проблема со всплывающим окном
В реальном проекте всплывающее окно Popover не только отображается, во всплывающем окне всплывающего окна Popover есть много других операций.После операции нажмите «Сохранить» или «Отмена», и всплывающее окно должно быть скрытый. Начнем с простого.
Появление и скрытие простых кнопок
На самом деле в приведенном выше коде реализовано относительно простое всплывающее окно и скрытие. Давайте посмотрим на пример:
<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>
Мы видим, что настройка visible2 через v-модель и управление значением 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>
Управляйте всплывающим окном и скрытием всплывающего окна Popover с помощью уникального идентификатора, который отлично решает проблему всплывающего окна и скрытия всплывающего окна Popover для таблиц или нескольких фрагментов данных. Приведенное выше резюме также относится к мнению многих блоггеров и официальных сайтов.Еще раз спасибо здесь. Надеюсь, эти обобщения помогут вам в дальнейшем использовании всплывающих окон.
Решить устаревшие проблемы
Некоторые блоггеры предположили, что в тестовом экземпляре будет несколько всплывающих окон, я пробовал, и это действительно было проблемой. Вот решение этой проблемы:
<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>
Содержимое скрипта остается неизменным с помощью trigger="click", так что при нажатии следующей кнопки всплывающее окно будет скрыто. Таким образом, не будет нескольких всплывающих окон. Точно так же, когда вы нажимаете «Отмена», вы также можете закрыть всплывающее окно. Примечание. Когда атрибут fixed="right" добавляется к столбцу el-table, фиксированная кнопка находится с правой стороны, и всплывающее окно не может быть закрыто при нажатии кнопки "Отмена". После изучения были получены следующие возможные варианты использования
Правильное использование всплывающей формы
<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,32])"
tips-placement="top-start"
/>
</el-form-item>
<!-- 避免enter触发表单提交 -->
<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>
При редактировании введите назначение редактирования при открытии всплывающего окна.После редактирования нажмите ОК, чтобы закрыть всплывающее окно только по идентификатору.Таким образом, всплывающее окно исчезнет, когда вы нажмете на пустое место. Он полностью удовлетворяет использование всплывающего окна редактирования формы. Настройка fixed="right" не влияет на всплывающее окно и скрытие всплывающего окна.