Vue sweet-modal-vue 通用型的模态框

场景

• 模态框很很常见别的提示形式，多标签的模态框也经常用到； 每次定制很繁琐，这就需要一个通用性的组件了

组件介绍 && 优势

组件名 adeptoas/sweet-modal-vue

组件地址 https://github.com/adeptoas/sweet-modal-vue
这个租价和自定义的modal组件相比的优点

适应性强

单纯的提示
icons库
多标签页

实现了模态框的嵌套
操作简单
可自由深度定制

安装

1. npm install –save-dev sweet-modal-vue
2. 
   Vue.use(SweetModal)

用法

• github有很详细的教程

备注

• laravel5.5 引入的方式和教程上面是不同的 , import SweetModal from 'sweet-modal-vue/src/plugin.js'
  需要加’src’ 这样才可以找到plugin.js
• 教程中的<sweet-button> 不是一个组件，而是自己需要实现的部分

用例

                // 调用
                this.msg_error = '上传出错，请稍后再试';
                this.icon_type = 'error';
                this.$refs.modal_prompt.open();

<template>
    // 整合到组件
    <div style="text-align: center">
        <sweet-modal :icon="icon_type" ref="modal_prompt" overlay-theme="dark" modal-theme="dark">
            <p style="white-space: pre-line">{{ msg_error }}</p>
            <button v-on:click="closeModel()" class="btn btn-primary pull-right">确认</button>
        </sweet-modal>
        <img :src="imgDataUrl" height="200px" width="160px">
        <div style="margin-top:10px"><button class="btn btn-primary" @click="toggleShow">修改头像</button></div>
        <my-upload field="img_avatar"
                   @crop-success="cropSuccess"
                   @crop-upload-success="cropUploadSuccess"
                   @crop-upload-fail="cropUploadFail"
                   v-model="show"
                   :width="300"
                   :height="300"
                   url="/avatar"
                   :params="params"
                   :headers="headers"
                   img-format="png"></my-upload>
    </div>
</template>