vue3弹出层V3Popup实例详解
Vue3-Popup 基于vue3构建的⼿机端⾃定义弹层组件。
⼀款集合了msg、alert、dialog、modal、actionSheet、toast等多种效果的Vue3⾃定义弹层组件。⽀持上下左右弹出、圆⾓、⾃定义弹层样式、多按钮及长按/右键功能。
引⼊v3popup
// 在main.js中全局引⼊
import { createApp } from 'vue'
import App from './App.vue'
// 引⼊弹窗组件v3popup
import V3Popup from './components/v3popup'
createApp(App).use(V3Popup).mount('#app')
自动弹窗代码
调⽤⽅式⽀持标签式+函数式，根据项⽬需要选择合适的调⽤⽅法。
<!-- 提⽰框 -->
<v3-popup v-model="showMsg" anim="fadeIn" content="msg提⽰框测试（3s后窗⼝关闭）" shadeClose="false" time="3" />
<!-- 询问框 -->
<v3-popup v-model="showConfirm" shadeClose="false" title="标题" xclose z-index="2020"
content="<div style='color:#1be769;padding:20px;'>确认框（这⾥是确认框提⽰信息，这⾥确认框提⽰信息，这⾥是确认框提⽰信息）</div>"
:btns="[
{text: '取消', click: () => showConfirm=false},
{text: '确定', style: 'color:#f90;', click: handleInfo},
]"
/>
// 函数式调⽤
let $el = this.$v3popup({
title: '标题',
content: '<div style='color:#f90;padding:10px;'>这⾥是内容信息！</div>',
type: 'android',
shadeClose: false,
xclose: true,
btns: [
{text: '取消', click: () => { $el.close(); }},
{text: '确认', style: 'color:#f90;', click: () => handleOK},
],
onSuccess: () => {},
onEnd: () => {}
})
vue3中可通过 和 两种⽅式挂载类似vue2中prototype 原型链⽅法。通过 ⽅式挂载。
// vue2中调⽤
methods: {
showDialog() {
this.$v3popup({...})
}
}
// vue3中调⽤
setup() {
// 获取上下⽂
const { ctx } = getCurrentInstance()
ctx.$v3popup({...})
}通过 ⽅式挂载。
// vue2中调⽤
methods: {
showDialog() {
this.v3popup({...})
}
}
// vue3中调⽤
setup() {
const v3popup = inject('v3popup')
const showDialog = () => {
v3popup({...})
}
return {
v3popup,
showDialog
}
}
预览效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。