请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

miitvip-modal: Makeit Modal 弹窗组件,基于 Vue3.0 + Vite 开发。该组件可以在当前 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

miitvip-modal

开源软件地址:

https://gitee.com/wildidea/miitvip-modal

开源软件介绍:


Makeit Modal

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

npm packagenpm_downloadsMITwebpackvuevite

关于

Makeit Modal 弹窗组件,是基于 Vue3.0 + 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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap