在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:miitvip-modal开源软件地址:https://gitee.com/wildidea/miitvip-modal开源软件介绍:Makeit ModalMakeit 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> 更多
|
请发表评论