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

浅浅的花香味﹌ 2022-05-17 05:14 203阅读 0赞

*   *   *  场景
         *  组件介绍 && 优势
         *  安装
         *  用法
         *  备注
         *  用例

### 场景 ###

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

### 组件介绍 && 优势 ###

> 组件名 `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>