Popup 手勢在 Vue 中是進行彈出層交互的一種方式。一個頁面上的彈出層可能會很多，每一個彈出層都需要用 popup 手勢來實現。下面我們來介紹如何在 Vue 中使用 popup 手勢。

首先，我們需要引入 popup 手勢插件：

import Vue from 'vue'
import PopupGesture from 'vue-popup-gesture'
Vue.use(PopupGesture)

在 Vue 組件中應該這樣使用：

<template>
<div>
<button v-popup:popup1="showPopup1">打開彈出框1</button>
<button v-popup:popup2="showPopup2">打開彈出框2</button>
<div class="popup1" v-show="showPopup1" v-popup:popup1>
彈出框1
</div>
<div class="popup2" v-show="showPopup2" v-popup:popup2>
彈出框2
</div>
</div>
</template>
<script>
export default {
data() {
return {
showPopup1: false,
showPopup2: false
}
}
}
</script>
<style>
.popup1 {
width: 200px;
height: 100px;
background-color: #fff;
position: absolute;
top: 50px;
left: 50px;
}
.popup2 {
width: 200px;
height: 100px;
background-color: #fff;
position: absolute;
top: 50px;
right: 50px;
}
</style>

上面的代碼中，我們使用了 v-popup 指令來指定彈出層的名稱。當點擊按鈕時，通過修改 showPopup1 或 showPopup2 變量的值，讓對應的彈出層顯示出來。

最后，在樣式中定義彈出層的樣式即可。