還記得昨篇開箱:前端用戶導覽這樣做～v-onboarding範例應用，其中導覽的框是依賴PopperJS做出來的，那我們今天要介紹在Vue3中可以使用的視窗元件

介紹

Vue 3 Popper是一個用來顯示彈出視窗的元件。它是用Vue3編寫的，並使用最新版本的PopperJS

官方網站：https://valgeirb.github.io/vue3-popper/

安裝

npm install vue3-popper
或
yarn add vue3-popper

引用

全域
//main.js

import { createApp } from "vue";
import Popper from "vue3-popper";

const app = Vue.createApp({});
app.component("Popper", Popper);

或者
組件內

<template>
  <Popper content="...">
    ...
  </Popper>
</template>

<script>
  import Popper from "vue3-popper"; // 引用

  export default({
    components: {
      Popper,
    },
  });
</script>

典型範例

<template>
  <Popper content="This is the Popper content 🍿">
    <button>Demo</button>
  </Popper>
</template>

<script>
  import Popper from "vue3-popper";

  export default ({
    components: {
      Popper,
    },
  });
</script>

▲▲▲ 若沒有寫css，會是沒有樣式的提示框

所以我們可以加上css，顏色都還可以自行改（可以寫在組件內，或者拉出去寫一個theme.css）

• 這樣的寫法，記得寫全域不要包< style scoped >...

<style>
:root {
  --popper-theme-background-color: #ffffff;
  --popper-theme-background-color-hover: #ffffff;
  --popper-theme-text-color: inherit;
  --popper-theme-border-width: 1px;
  --popper-theme-border-style: solid;
  --popper-theme-border-color: #eeeeee;
  --popper-theme-border-radius: 6px;
  --popper-theme-padding: 16px;
  --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
}
</style>

另外，若不想要使用官方預設的css變數(--popper...)，可以使用:deep selector來解決

詳細可看 官方文件I don't want to use CSS variables

成果如下

前往 >> 小試身手

進階應用

• 如果想要包成自己寫的元件方式

詳細可看 官方文件How can I wrap Popper with my own component?

• 增加打開視窗後的方法

詳細可看 官方文件Reacting to Popper events

• 要將內容重包

詳細可看 官方文件Using scoped slot properties

• 自動化控制Popper

詳細可看 官方文件Manually controlling the Popper

API屬性介紹

Props

Events

Slots(插槽)

Slot props

CSS variables

Popper 預設只帶有一些基本樣式。您可以覆蓋這些變數以適應您的需求。

那我們明天再見了～