您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇“vue3.2+ts如何实现在方法中可调用的拟态框弹窗”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3.2+ts如何实现在方法中可调用的拟态框弹窗”文章吧。
直接上图。
解决代码如下:
import { createApp } from 'vue' import MessageBoxVue from './MessageBox.vue' \\你写的拟态框样式 export const MessageBox = (text: any) => { return new Promise((resolve, reject) => { const capp = createApp(MessageBoxVue, text) const container = document.createElement('div') const instance = capp.mount(container) document.body.insertBefore(container, document.body.firstChild)//插入到body最前面,层级更高 instance.callback = (val: any) => { if (val) { resolve(val) } else { reject() } capp.unmount()//注销 document.body.removeChild(container)//点击后清除弹窗 } instance.close = () => { capp.unmount() document.body.removeChild(container) } }) }
//重点在这儿 //这边相当于把数据当方法使了。我也不知道什么原理。在上面那边就是能接收到回调。 const cancel = () => { callback.value(false) } const confirm = () => { callback.value(true) } const closeBox = () => { close.value() } //抛出这两个方法?反正这个方法不可或缺。 defineExpose({ callback, close })
\\这一段是上面的那个messagebox <template> <div ref="MessageBox" class="message-box" :> <div class="message-box-icon"> <i class="iconfont" : v-html="iconType"></i> </div> <div class="message-box-container"> <div class="message-box-title">{{ title }}</div> <div v-if="isHtml" v-html="content"></div> <p v-else class="message-box-content">{{ content }}</p> <div class="message-box-btn"> <span v-if="isCancel" class="cancel" @click="cancel">{{ cancelVal }}</span> <span v-if="isConfirm" class="confirm" @click="confirm">{{ confirmVal }}</span> </div> </div> <i v-if="closeIcon" class="iconfont cencel-box" @click="closeBox"></i> </div> </template> <script setup lang="ts"> import { computed, CSSProperties, ref } from 'vue' const props = defineProps({ type: { type: String, default: 'warning' }, title: { type: String, default: '' }, content: { type: String, default: '' }, isHtml: { type: Boolean, default: false }, width: { type: Number, default: 416 }, isCancel: { type: Boolean, default: true }, cancelVal: { type: String, default: '取消' }, confirmVal: { type: String, default: '确定' }, isConfirm: { type: Boolean, default: true }, closeIcon: { type: Boolean, default: false } }) const callback = ref() const close = ref() const cw = document.documentElement.clientWidth const ch = document.documentElement.clientHeight // eslint-disable-next-line vue/return-in-computed-property const iconType = computed(() => { switch (props.type) { case 'warning': return '' case 'info': return '' case 'error': return '' case 'success': return '' } }) // eslint-disable-next-line vue/return-in-computed-property const iconColor = computed(() => { switch (props.type) { case 'warning': return '#FF7402' case 'info': return '#0C64EB' case 'error': return '#FF4D4F' case 'success': return '#36B23B' } }) const messageBoxWrapperStyleStyle = computed<CSSProperties>(() => { return { top: `${ch / 2 - 200 > 200 ? ch / 2 - 200 : 200}px`, left: `${cw / 2 - props.width / 2}px`, width: `${props.width}px` } }) const cancel = () => { callback.value(false) } const confirm = () => { callback.value(true) } const closeBox = () => { close.value() } defineExpose({ callback, close }) </script> <style lang="scss" scoped> .cencel-box { position: absolute; top: 15px; right: 20px; cursor: pointer; } .message-box { position: absolute; border-radius: 5px; z-index: 2001; display: flex; background: #ffffff; padding: 20px 20px 20px 32px; box-shadow: 0px 0px 20px 0px rgba(6, 0, 1, 0.1); .message-box-icon { margin-right: 12px; line-height: 38px; .iconfont { font-size: 25px; } } .message-box-container { width: calc(100% - 25px); .message-box-title { font-size: 16px; color: #333333; line-height: 38px; } .message-box-content { margin: 10px 0px 20px; font-size: 14px; min-height: 48px; color: #999999; line-height: 18px; // letter-spacing: 0.5px; } } .message-box-btn { float: right; .cancel { height: 32px; line-height: 30px; display: inline-block; text-align: center; width: 90px; box-sizing: border-box; border: 1px solid #d9d9d9; border-radius: 3px; color: #333333; cursor: pointer; } .cancel:hover { color: #0c64eb; border-color: #0c64eb; } .confirm { height: 32px; width: 90px; display: inline-block; text-align: center; line-height: 32px; margin-left: 10px; background-color: #0c64eb; border-radius: 3px; color: #ffffff; cursor: pointer; } .confirm:hover { background-color: #2373eb; } } } </style>
引入全局后的调用
// 使用: // 在main.ts全局引入,也可以按需引入这里展示全局引入 import {MessageBox} from 'base/src/components/MessageBox/index' // 注册: app.config.globalProperties.$messageBox = MessageBox // 引用: import { getCurrentInstance } from 'vue' const { proxy } = getCurrentInstance() const fn = ()=>{ proxy .$messageBox({ //这边就是传你在MessageBox的props定义的父传子的数据了 title: '是否确定编辑/删除数据?', content: '作业已经发布,如果重新编辑/删除,会清空所有学生 作业提交状态请谨慎操作!' }) .then(() => { console.log(1234) }) .catch(() => { console.log(12345) }) }
以上就是关于“vue3.2+ts如何实现在方法中可调用的拟态框弹窗”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。