element-plus/website/docs/jp/popover.md

Popover

基本的な使い方

Tooltipと同様に、Popoverも Vue-popper で構築されています。そのため、重複する属性については、Tooltipのドキュメントを参照してください。

:::demo trigger 属性は、popoverがどのようにトリガーされるかを定義するために使用されます: hover, click, focus, manual。それは、#reference という名前のスロットを使うか、v-popover ディレクティブを使って popover の ref に設定するかです。

<template>
  <el-popover
    placement="top-start"
    title="Title"
    :width="200"
    trigger="hover"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button>Hover to activate</el-button>
    </template>
  </el-popover>

  <el-popover
    placement="bottom"
    title="Title"
    :width="200"
    trigger="click"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button>Hover to activate</el-button>
    </template>
  </el-popover>

  <el-popover
    ref="popover"
    placement="right"
    title="Title"
    :width="200"
    trigger="focus"
    content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button>Focus to activate</el-button>
    </template>
  </el-popover>

  <el-popover
    placement="bottom"
    title="Title"
    :width="200"
    trigger="manual"
    content="this is content, this is content, this is content"
    v-model:visible="visible"
  >
    <template #reference>
      <el-button @click="visible = !visible">Manual to activate</el-button>
    </template>
  </el-popover>
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      };
    }
  };
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      return {
        visible: ref(false),
      };
    },
  });

</setup>
-->

:::

入れ子になっている情報

popoverの中には、他のコンポーネントを入れ子にすることができます。以下はネストされたテーブルの例です。

:::demo content属性をデフォルトのslotに置き換えています。

<el-popover
  placement="right"
  :width="400"
  trigger="click"
>
  <template #reference>
    <el-button>Click to activate</el-button>
  </template>
  <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 width="300" property="address" label="address"></el-table-column>
  </el-table>
</el-popover>

<script>
  export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: 'Jack',
          address: 'New York City'
        }, {
          date: '2016-05-04',
          name: 'Jack',
          address: 'New York City'
        }, {
          date: '2016-05-01',
          name: 'Jack',
          address: 'New York City'
        }, {
          date: '2016-05-03',
          name: 'Jack',
          address: 'New York City'
        }]
      };
    }
  };
</script>
<!--
<setup>

  import { defineComponent, reactive, toRefs } from 'vue';

  export default defineComponent({
    setup() {
      const state = reactive({
        gridData: [
          {
            date: '2016-05-02',
            name: 'Jack',
            address: 'New York City',
          },
          {
            date: '2016-05-04',
            name: 'Jack',
            address: 'New York City',
          },
          {
            date: '2016-05-01',
            name: 'Jack',
            address: 'New York City',
          },
          {
            date: '2016-05-03',
            name: 'Jack',
            address: 'New York City',
          },
        ],
      });
      return {
        ...toRefs(state),
      };
    },
  });

</setup>
-->

:::

入れ子になった操作

もちろん、他の操作をネストすることもできます。ダイアログを使うよりも軽量です。

:::demo

<el-popover
  placement="top"
  :width="160"
  v-model:visible="visible"
>
  <p>Are you sure to delete this?</p>
  <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">confirm</el-button>
  </div>
  <template #reference>
    <el-button @click="visible = true">Delete</el-button>
  </template>
</el-popover>

<script>
  export default {
    data() {
      return {
        visible: false
      };
    }
  };
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      return {
        visible: ref(false),
      };
    },
  });

</setup>
-->

:::

属性

Attribute	Description	Type	Accepted Values	Default
trigger	popoverがどのようにトリガーされるか	string	click/focus/hover/manual	click
title	popoverのタイトル	string	—	—
content	popoverコンテンツ、デフォルトの slot で置き換えることができます。	string	—	—
width	popover幅	string, number	—	Min width 150px
placement	popover配置	string	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom
disabled	popoverが無効になっているかどうか	boolean	—	false
visible / v-model:visible	popoverが表示されているかどうか	Boolean	—	false
offset	popoverオフセット	number	—	0
transition	popoverトランジションアニメーション	string	—	el-fade-in-linear
show-arrow	ツールチップの矢印が表示されているかどうかを指定します。詳細については Vue-popper	boolean	—	true
popper-options	popper.js のためのパラメータ	object	please refer to popper.js	{ boundariesElement: 'body', gpuAcceleration: false }
popper-class	popover用カスタムクラス名	string	—	—
show-after	ミリ秒単位の出現の遅延	number	—	0
hide-after	ミリ秒単位の消えるの遅延	number	—	0
auto-close	ツールチップを非表示にするタイムアウト（ミリ秒単位）	number	—	0
tabindex	tabindex のpopover	number	—	—

スロット

Name	Description
—	popoverのテキストコンテンツ
reference	popoverをトリガーするHTML要素

イベント

Event Name	Description	Parameters
show	popoverが表示されたときにトリガー	—
after-enter	入力トランジションの終了時にトリガされます。	—
hide	popoverが非表示になったときにトリガー	—
after-leave	離脱トランジション終了時のトリガー	—