场景
- 模态框很很常见别的提示形式,多标签的模态框也经常用到; 每次定制很繁琐,这就需要一个通用性的组件了
组件介绍 && 优势
组件名
adeptoas/sweet-modal-vue
组件地址
https://github.com/adeptoas/sweet-modal-vue
这个租价和自定义的modal组件相比的优点适应性强
单纯的提示
icons库
多标签页实现了模态框的嵌套
操作简单
可自由深度定制
安装
- npm install –save-dev sweet-modal-vue
-
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>