@hucy_hucy/vue-modal v0.1.3

安装 (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('添加成功')
    })
  }
}