JSPM – vue2-modals@1.0.1

Package Exports

vue2-modals
vue2-modals/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue2-modals) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

使用

引用

import Modal from "vue2-modals";
Vue.use(Modal);

初始化

const modal = new Modal({
  modals: [
    {
      name: "modalName",
      component: () => import("./components/HelloWorld.vue"),
    },
  ],
});

new Vue({
  modal,
  render: (h) => h(App),
}).$mount("#app");

在 App.vue 使用 modalView 组件

<!-- modalView是全局组件，所以不需要引入，后面调用的modal会在这个modalView展示 -->
<template>
  <div id="app">
    <modal-view name="fade" />
  </div>
</template>

编写 modal 弹窗

<template>
  <div class="hello">
    {{ msg }}
    <button @click="onChange">促发emit</button>
    <button @click="closeModal">关闭弹窗</button>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    props: {
      msg: String,
    },
    methods: {
      closeModal() {
        this.$modal.close();
      },
      onChange() {
        this.$emit("change", "hello world");
      },
    },
  };
</script>

使用

// this.$modal是当前new Modal的实例已经自定注册
await this.$modal.open("modalName", {
  // 传递给组件的props
  props: {
    msg: this.msg,
  },
  // 监听$emit出来得事件
  on: {
    change: (val) => {
      this.$modal.close();
    },
  },
});

open(modalName,{props,on}) 打开弹窗

close() 关闭弹窗
modal-view 组件接收 name 属性，传递给 Vue 的 Transition 组件以来添加显示消失动画

vue2-modals

Package Exports

Readme

vue2-models 一个基于 vue2 的一个命令式调用 modal

使用