makeit-modal

Makeit Modal 弹窗组件,是基于 Vue3.0 + Vite 开发。该组件可以在当前页面打开一个浮层来处理相关事务的某些节点,不影响整个事务的流程。内含多种弹出动效,同时包含快捷弹窗,便于快速处理浮窗提示。

Usage no npm install needed!

<script type="module">
  import makeitModal from 'https://cdn.skypack.dev/makeit-modal';
</script>

README

Makeit Modal

基于 Vue3.x + Vite 开发的弹窗组件 Makeit Modal

npm package npm_downloads MIT webpack vue vite

关于

Makeit Modal 弹窗组件,是基于 Vue3.x + Vite 开发。该组件可以在当前页面打开一个浮层来处理相关事务的某些节点,不影响整个事务的流程。内含多种弹出动效,同时包含快捷弹窗,便于快速处理浮窗提示。

安装

npm i makeit-modal

使用

import { createApp } from 'vue'
import MakeitModal from 'makeit-modal'
import 'makeit-modal/dist/modal.min.css'
import App from './app.vue'

const app = createApp(App)
app.use(MakeitModal)
app.mount('#app')

示例

<!-- 基础效果 -->
<template>
    <a-button type="primary" @click="handleModal">点击打开弹窗</a-button>
    <mi-modal v-model:visible="visible" title="标题">
        自定义弹窗内容(Modal Content)
    </mi-modal>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'
    export default defineComponent({
        data() {
            return {
                visible: false
            }
        },
        methods: {
            handleModal() {
                this.visible = !this.visible
            }
        }
    })
</script>

<!-- 快捷弹窗 -->
<template>
    <a-button class="mi-btn-success" @click="handleSuccess">Success</a-button>
    <a-button type="danger" @click="handleError">Error</a-button>
    <a-button class="mi-btn-warning" @click="handleWarning">Warning</a-button>
    <a-button class="mi-btn-info" @click="handleConfirm">Confirm</a-button>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'
    export default defineComponent({
        methods: {
            handleSuccess() {
                this.$miModal.success({
                    content: '操作成功(Successed)'
                })
            },
            handleError() {
                this.$miModal.error({
                    content: '操作失败(Failed)'
                })
            },
            handleConfirm() {
                this.$miModal.confirm({
                    content: '确定删除当前所选的条目吗?'
                })
            },
            handleWarning() {
                this.$miModal.warning({
                    content: '请引入 [ vue-route ] 组件'
                })
            }
        }
    })
</script>

更多

更多内容及使用请查看在线示例:https://admin.makeit.vip/components/modal