vue-vivid-dialog

生动活泼的 vue2.x 模态框组件，让用户因弹框爱上你的页面！

开始

在你的 vue 项目下

$ npm install vue-vivid-dialog
# yarn add vue-vivid-dialog

使用组件形式

import VividDialog from "vue-vivid-dialog";
export default {
  components: {
    VividDialog
  },
  data() {
    return {
      visible: false
    };
  }
};

<dialog
  v-model="visible"
  width="80vw"
  title="Handsup"
  content="BiuBiuBiu!"
  :closeOnClickOverlay="false"
  :onOK="onOK"
></dialog>

然后控制visible来展示弹框吧！

方法调用

import { MessageBox } from "vue-vivid-dialog";
MessageBox({
  title: "DAKER",
  content: "THIS IS VUE!",
  width: "80vw",
  overlay: true,
  closeOnClickOverlay: false,
  onOK: close => {
    return new Promise(r => {
      setTimeout(() => {
        r();
        close();
      }, 1000);
    });
  }
});

自定义按钮组件

vue-vivid-dialog提供了默认的基础按钮，如果你觉得需要替换为你自己的按钮组件，只需要传入btnComponent即可。

你可以传入一个全局组件名，

<dialog btnComponent="my-button"></dialog>

或者之间传入组件

<dialog :btnComponent="getMyButton()"></dialog>

import MyButton from "./MyButton.vue";
export default {
  methods: {
    getMyButton() {
      return MyButton;
    }
  }
};

选项

许可

MIT