### HModal 組件
介紹：`HModal` 組件即彈出框組件，當涉及到網頁中一項操作需要獲得用戶的確認時，可以用到該組件。比如當用戶刪除信息時，我們需要一個彈出框提示用戶是否確認刪除該信息，以免造成誤刪。下面來看看 `HModal` 的屬性。
<table>
<caption>HModal 屬性</caption>
<thead>
<th>屬性</th>
<th>說明</th>
<th>類型</th>
<th>默認值</th>
</thead>
<tbody>
<tr>
<td>value</td>
<td>用于控制 HModal 的隱藏或者展示，用 v-model 直接綁定即可</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>title</td>
<td>標題信息, 不輸入則隱藏標題</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>clickable</td>
<td>點擊遮罩層是否隱藏 HModal，如果需要點擊遮罩層隱藏，則該值為 true，否則為 false</td>
<td>Boolean</td>
<td>true</td>
</tr>
<tr>
<td>button</td>
<td>是否顯示按鈕組，包含確認和取消按鈕</td>
<td>Boolean</td>
<td>true</td>
</tr>
<tr>
<td>confirmText</td>
<td>設置確認按鈕上的文字，你可以設置為 ok 或者其它表示確定的值</td>
<td>String</td>
<td>確定</td>
</tr>
<tr>
<td>cancelText</td>
<td>設置取消按鈕上的文字，你可以設置為 no 或者其它表示取消的值</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table>
<caption>slot</caption>
<thead>
<th>名稱</th>
<th>說明</th>
</thead>
<tbody>
<tr>
<td>默認 slot</td>
<td>由于 HModal 內容的多樣性，所以我決定將其暴露出去由用戶自己設定，所以你只需要在 HModal 中添加一個 div 容器，然后定義自己的內容即可</td>
</tr>
</tbody>
</table>
<table>
<caption>event</caption>
<thead>
<th>事件名</th>
<th>說明</th>
<th>返回值</th>
</thead>
<tbody>
<tr>
<td>onClick</td>
<td>當確認和取消按鈕點擊時都會觸發該事件，可以用 type 屬性區分二者，confirm 為確認按鈕，cancel 為取消按鈕</td>
<td>Object，包含一個 type 屬性</td>
</tr>
</tbody>
</table>
示例代碼：
<template>
<div class="mask-container">
<button @click.prevent="openBaseModal" class="button">彈出基礎的 Modal</button>
<transition name="custom">
<HModal :title="title" @onClick="clickHandler" v-model="show">
<div class="content">
<p>這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容，這是一些內容</p>
</div>
</HModal>
</transition>
</div>
</template>
<script>
import { HModal } from 'vuecomponent'
export default {
components: {
HModal
},
data () {
return {
click: false,
title: '這只是普通的 Modal title',
show: false
}
},
methods: {
clickHandler (v) {
if (v.type === 'confirm') {}
if (v.type === 'cancel') {}
this.show = false
},
openBaseModal () {
this.show = true
}
}
}
</script>
<style>
.custom-enter, .custom-leave-to {
opacity: 0;
}
.custom-enter-active, .custom-leave-active {
transition: all .5s;
}
.custom-enter-to, .custom-leave {
opacity: 1;
}
.custom-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.custom-img {
width: 128px;
margin-bottom: 16px;
}
.custom-title {
margin-bottom: 12px;
}
.mask-container {
display: flex;
flex-direction: column;
align-items: center;
}
.button {
display: inline-block;
outline: none;
border: none;
margin-bottom: 24px;
background-color: #00B8A9;
color: #fff;
padding: 12px 18px;
cursor: pointer;
border-radius: 8px;
}
</style>
效果示意圖:
