基于Vue的Dialog对话框组件的实现

今天来实现一个基础的对话框组件~

演示

• 点击open按钮打开对话框
• 点击取消在控制台打印出“已取消”，并关闭对话框
• 点击确定在控制台打印出“已确定”，并关闭对话框
  

API

• mask：控制是否展示遮罩
• info：对话框显示内容
• icon：对话框提示图标，有success，error，info，question可选
• cancelText：设置取消按钮文字
• okText：设置确认按钮文字

事件

• cancel：取消按钮的回调
• ok：点击确定回调

基础组件dialog.vue

说明：在dialog组件最外层div上设置@click.stop是为了防止事件冒泡触发上层点击事件。 用require引入图片，否则在编译后是找不到图片的。

<template>
  <div class="shadow-wrapper" v-if="visible" @click.stop ref="mask"><!-- 遮罩层 -->
    <div class="dialog-wrapper">