Mintui Popup 使用
Mint -ui 網址
http://mint-ui.github.io/#!/zh-cn
示例：
Popup
彈出框，可自定義內容。
引入
import { Popup } from ‘mint-ui’;
Vue.component(Popup.name, Popup);
例子
position 屬性指定了 popup 的位置。比如，position 爲 ‘bottom’ 時，popup 會從屏幕下方移入，並最終固定在屏幕下方。移入/移出的動效會根據 position 的不同而自動改變，無需手動配置。
將 v-model 綁定到一個本地變量，通過操作這個變量即可控制 popup 的顯示與隱藏。
…
若省略 position 屬性，則 popup 會相對於屏幕居中顯示**（若不想讓其居中，可通過 CSS 對其重新定位）**。此時建議將動效設置爲 popup-fade，這樣在顯示/隱藏時會有淡入/淡出效果。
…
以下爲 通過 CSS 對其重新定位 的簡單實例
1 引入
2、 定義 組件
<mt-popup class="mint-popup" v-model="popupVisible" :style="position1" popup-transition="popup-fade">{{popupName}}</mt-popup>
這裏定義變量用於設置顯示方式
（1）、 v-model=“popupVisible”
popupVisible : 是否顯示
(2)、 :style =“position1”
:style 樣式變量定義
position1 動態位置（因爲要多次調用，每次調用顯示的位置都不一樣）如果只在一個固定位置顯示則這裏可以寫爲固定值 ：
例: 指定固定位置
style = “top:20%;left:10%;z-index: 2003;margin:10px;”
3、組件的方法定義
初始變量定義：
data () {
return {
position1: [],
popupVisible: false,
popupName: []
}
},
方法
TipClick(showContent, style1) {}
TipClick 方法名稱
showContent 顯示的內容
style1 樣式（顯示位置）
methods: {
TipClick(showContent, style1) {
this.popupVisible = true // 是否顯示： 是
this.position1 = style1 // 顯示樣式：這裏主要是位置
this.popupName = showContent //Popup 出現時顯示的內容
},
在組件裏 PopupName 作爲變量名稱進行傳遞 {{popupName}}
3、 對組件多次調用
（1）
結果
（2）
css 說明
瀏覽器支持
所有主流瀏覽器都支持 z-index 屬性。
註釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 “inherit”。
https://www.w3school.com.cn/cssref/pr_pos_z-index.asp
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
註釋：元素可擁有負的 z-index 屬性值。
註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
說明
該屬性設置一個定位元素沿 z 軸的位置，z 軸定義爲垂直延伸到顯示區的軸。如果爲正數，則離用戶更近，爲負數則表示離用戶更遠。