vue 简单模态框_具有爆炸效果的简单Vue模态分量

vue 简单模态框

爆炸性模态 (Vuexplosive Modal)

A simple Vue modal component with an explosion effect.

具有爆炸效果的简单Vue模态分量。

View Demo 查看演示 Download Source 下载源

安装 (Install)

npm install vuexplosive-modal --save

用法 (Usage)

<VuexplosiveModal :visible="showModal"></VuexplosiveModal> 
<button @click="toggleModal">Open Modal</button>

import VuexplosiveModal from "./VuexplosiveModal"

export default {
  components: {
    VuexplosiveModal
  },
  data() {
    return {
      showModal: false
    };
  },
  methods: {
    toggleModal() {
      this.show = !this.show;
    }
  }
};

道具 (Props)

props: {
    visible: {
      default: false
    },
    title: {
      default: "Boo! 🔥"
    },
    closeIcon: {
      default: `<span>❌</span>`
    },
    content: {
      default: `<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet a tenetur delectus reprehenderit, omnis doloremque at earum officia unde sequi accusantium corporis praesentium deserunt laboriosam dignissimos voluptatum culpa molestiae ullam. 👻</p>`
    }
  },

翻译自: https://vuejsexamples.com/a-simple-vue-modal-component-with-an-explosion-effect/

vue 简单模态框