https://github.com/lirongtong/miitvip-modal

:sparkling_heart: Makeit Modal 弹窗组件，基于 Vue3.x + Vite 开发 :sweat_drops: 该组件可以在当前页面打开一个浮层来处理相关事务的某些节点，不影响整个事务的流程 :collision: 内含多种弹出动效，同时包含快捷弹窗，便于快速处理浮窗提示 :fire:
https://github.com/lirongtong/miitvip-modal

component makeit makeit-admin-pro makeit-modal miitvip modal popup vite vue-component vue3

Last synced: about 5 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/lirongtong/miitvip-modal
• Owner: lirongtong
• License: mit
• Created: 2021-01-25T07:59:12.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-07-27T14:15:29.000Z (over 2 years ago)
• Last Synced: 2024-10-31T17:45:32.440Z (17 days ago)
• Topics: component, makeit, makeit-admin-pro, makeit-modal, miitvip, modal, popup, vite, vue-component, vue3
• Language: TypeScript
• Homepage: https://admin.makeit.vip/components/modal
• Size: 60.5 KB
• Stars: 11
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    

        

    





    

        Makeit Modal

    





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

[![npm package](https://img.shields.io/npm/v/makeit-modal.svg?style=flat-square)](https://www.npmjs.org/package/modal)

[![npm_downloads](http://img.shields.io/npm/dm/makeit-modal.svg?style=flat-square)](http://www.npmtrends.com/makeit-modal)

![MIT](https://img.shields.io/badge/license-MIT-ff69b4.svg)

![webpack](https://img.shields.io/badge/webpack-5.70.0-orange.svg)

![vue](https://img.shields.io/badge/vue-3.2.36-green.svg)

![vite](https://img.shields.io/badge/vite-2.9.9-yellow.svg)

![ant design vue](https://img.shields.io/badge/ant%20design%20vue-3.x-blueviolet.svg)



## 关于

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

## 安装

```bash

npm i makeit-modal

```

## 使用

```ts

import { createApp } from 'vue'

import App from './app.vue'

import MakeitModal from 'makeit-modal'

import 'makeit-modal/dist/modal.min.css'

const app = createApp(App)

app.use(MakeitModal)

app.mount('#app')

```

## 示例

```vue

    


        


            点击打开弹窗

        

        


            Scale ( 默认 )

            Fade

            Slide / Slide-Right

            Slide-Bottom

            Slide-Fall

            Newspaper

            Sticky

            Flip

            Flip-Vertical

            Fall

            Rotate

            Sign

            Slit

            Shake

        

        


            成功 ( Success )

            错误 ( Error )

            警告 ( Warning )

            确认 ( Confirm )

        

    

    

        自定义弹窗内容（Modal Content）

    

    

        自定义弹窗内容（Modal Content）

    


    import { reactive, getCurrentInstance } from 'vue'

    const { appContext: {config: {globalProperties: vm}} } = getCurrentInstance()

    const variables = reactive({

        visible: false,

        animation: 'scale',

        animateVisible: false

    })

    const handleBaseModal = () => {

        variables.visible = !variables.visible

    }

    const handleModalAnimation = (name) => {

        variables.animation = name

        variables.animateVisible = !variables.animateVisible

    }

    const handleSuccess = () => {

        vm.$modal.success({content: '操作成功（Successed）'})

    }

    const handleError = () => {

        vm.$modal.error({content: '操作失败（Failed）'})

    }

    const handleConfirm = () => {

        vm.$modal.confirm({content: '确定删除当前所选的条目吗？'})

    }

    const handleWarning = () => {

        vm.$modal.success({content: '请先引入 [ Ant Design Vue ] 组件'})

    }

```

## 更多

> 更多内容及使用请查看在线示例：[https://admin.makeit.vip/components/modal](https://admin.makeit.vip/components/modal)