@hucy_hucy/vue-modal
v0.1.3
Published
基于vue的模态框插件, 本身不识闲模态框, 可将任意vue组件插入到页面中, 可以更方便的使用类似于el-dialog的组件
Downloads
11
Readme
安装 (install)
npm install @hucy_hucy/vue-modal
or
yarn add @hucy_hucy/vue-modal
使用 (Usage)
例如有这么一个添加用户的弹窗, 方便演示这里使用element-ui的Dialog组件
@/modal/AddUser.vue
<template>
<el-dialog
title="添加用户"
:visible.sync="show"
width="50%"
@closed="handleClose"
>
<el-input v-model="form.username" placeholder="请输入用户名" />
<span slot="footer" class="dialog-footer">
<el-button @click="$emit('cancel', 'cancel add')">取 消</el-button>
<el-button type="primary" @click="confirm">添加</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data () {
return {
show: true,
form: {
username: ''
}
}
},
methods: {
cancel: function () {
this.$emit('cancel', 'cancel add')
},
confirm: function () {
this.$emit('confirm', this.form)
},
handleClose: function () {
this.cancel()
}
}
}
</script>
然后使用插件, 并注册组件
/*
* @/main.js
*/
import Modal from '@hucy_hucy/vue-modal';
import store from '@/store';
import router from '@/router';
import modal from '@/modal/AddUser';
// 如果在组件中需要使用到store或者router则需要在此配置
Vue.use(Modal, { store, router });
// 注册组件
Vue.modal('AddUser', AddUser)
// 在页面中使用
/*
* App.vue
*/
export default {
created () {
// 第二个参数会和Modal的$options进行合并
this.$modal('AddUser', { data }).confirm(() => {
// TODO: 新增用户请求
}).cancel(() => {
// TODO: 当用户取消添加时
})
}
}
支持链式语法
可给出多个回调, 会按顺序触发, 支持返回Promise, 会在Promise resolve之后触发下一个
export default {
created () {
this.$modal('AddUser', { data }).confirm(() => {
// TODO: 新增用户请求
return axios.post('xxx', this.form)
}).confirm(() => {
this.$message('添加成功')
})
}
}
支持自定义事件
在Modal中使用其他事件的方法
// 在Modal中
this.$emit('other', val)
// 调用时
export default {
created () {
this.$modal('AddUser', { actions, data }).other(() => {
// TODO: 新增用户请求
return axios.post('xxx', this.form)
}).other(() => {
this.$message('添加成功')
})
}
}