提示框功能ok

This commit is contained in:
2025-11-01 18:49:23 +08:00
parent 1ae8c20d85
commit f8082d5557
3 changed files with 33 additions and 14 deletions
+26 -10
View File
@@ -6,29 +6,45 @@ const offcanvasTop = ref(null)
let ov: Offcanvas
const alertType=ref() // 可选值:'success', 'warning', 'danger', 'info'
const alertText=ref()
let autoCloseTimeout:number
onMounted(() => {
// 确保在组件挂载后初始化
if (offcanvasTop.value) {
ov = new Offcanvas(offcanvasTop.value)
ov = new Offcanvas(offcanvasTop.value,{
backdrop: false,
})
//ov.show();
//console.log('Offcanvas initialized:', ov)
}
})
// function showOffcanvas() {
// if (ov) {
// ov.show()
// }
// }
function showAlert(type: string, text: string) {
alertType.value = type;
alertText.value = text;
alertType.value = type;
//console.log(ov);
if (ov) {
ov.show()
ov.hide();
ov.show();
if(autoCloseTimeout)
{
clearTimeout(autoCloseTimeout);
}
autoCloseTimeout=setTimeout(() => {
//console.log("timeout");
ov.hide();
}, 5000);
}
}
defineExpose({
showAlert
});
</script>
<style scoped>
@@ -147,10 +163,10 @@ function showAlert(type: string, text: string) {
<a class="btn-close" data-bs-dismiss="offcanvas" aria-label="close"></a>
</div>
<div>
<!-- <div>
<button @click="showAlert('success','success')">success</button>
<button @click="showAlert('warning','warning')">warning</button>
<button @click="showAlert('danger','danger')">danger</button>
<button @click="showAlert('info','info')">info</button>
</div>
</div> -->
</template>
+2 -2
View File
@@ -14,8 +14,8 @@
},
"footer":{
"doc":"文档",
"license":"许可证",
"source_code":"源码",
"license":"协议",
"source_code":"源码",
"copy":"版权 © 2025 Operations. 保留所有权利。"
}
}
+5 -2
View File
@@ -5,9 +5,12 @@
onMounted(() => {
// 可以在这里调用mos.value的方法
console.log('HomeView mounted', mos);
//console.log('HomeView mounted', mos);
});
function c(){
mos.value?.showAlert("success","111");
}
</script>
@@ -15,7 +18,7 @@
<div>
<MyOffcanvas ref="mos"/>
<button >ttt</button>
<button @click="c">ttt</button>
111
</div>