### 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>
效果示意图:
