詳解vue3+quasar彈窗的幾種方式
1. 鼠標懸浮時的提示（Quasar Tooltip組件）
quasar tooltip組件
當希望將鼠標懸停在目標元素上會顯示提示消息時，可以使用html中的title屬性，但使用title屬性出現(xiàn)的提示框樣式可能并不是我們想要的，這時候可以使用quasar提供的tooltip組件。
可以看到，target默認為true，則會默認將 tooltip 的父元素作為觸發(fā)tooltip的目標，即鼠標經(jīng)過tooltip的父元素時，tooltip就會顯示。
<q-btn color="primary" label="tooltip的父元素" size="24px">
<q-tooltip>我在這</q-tooltip>
</q-btn>
也可以用String類型指定觸發(fā) tooltip的目標元素。
<q-btn color="primary" label="tooltip的父元素" size="24px">
<q-tooltip target=".hover-me">我在這</q-tooltip>
</q-btn>
<q-btn class="hover-me" label="tooltip指定的target元素"></q-btn>
其他詳見官方文檔。
2. 點擊某按鈕后出現(xiàn)自定義的彈窗
2.1 點擊某按鈕后出現(xiàn)自定義的彈窗（vue方法）
效果圖：
點擊“+”按鈕后彈出選項列表Member子組件，
點擊Member子組件上的按鈕時關閉彈窗。
子組件：
父組件
注意：有需要時可以給子組件Member設置一個z-index的樣式。
知識點
vue 組件 官方文檔：https://staging-cn.vuejs.org/guide/components/registration.html
1、父組件可以使用 props 把數(shù)據(jù)傳給子組件。
2、子組件可以使用 $emit 觸發(fā)父組件的自定義事件。
2.2 點擊某按鈕后出現(xiàn)自定義的彈窗（quasar QDialog組件）
quasar dialog組件通過綁定的值來決定是否顯示該彈窗，值可以使用model-value進行綁定，也可以使用v-model進行綁定。
使用model-value進行綁定時，需要使用:。
<q-dialog :model-value="showFlag" persistent> ... </q-dialog> //or <q-dialog v-model="showFlag" persistent> ... </q-dialog>
上述同樣的效果也可用以下代碼實現(xiàn)：
父組件：
<template>
<div>
<q-btn round unelevated outline text-color="grey-8" icon="add" class="bg-white" @click="openMember"/>
<q-dialog :model-value="showFlag" persistent>
<Member @close="closeMember"></Member>
</q-dialog>
</div>
</template>
<script setup>
import {ref, reactive, watch} from 'vue'
import Member from '../components/Member.vue'
let showFlag = ref(false);
function openMember() {
showFlag.value = true;
}
function closeMember(list) {
showFlag.value = false;
taskInfo.receiverList = list;
}
</script>
<style></style>
子組件Member.vue
<template>
<div class="q-pa-sm member-list bg-white shadow-1">
<q-option-group v-model="group" :options="options" color="green" type="checkbox" class="list"/>
<div class="q-mt-md q-pl-sm row">
<q-btn class="bg-white q-mr-lg" unelevated outline text-color="grey-8" label="取消"
@click="$emit('close')"/>
<q-btn class="btn-sure" unelevated filled text-color="white" label="確定"
@click="$emit('close', group)"/>
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
const group = ref([]);
const options = [
{
label: '何11',
value: 'op4'
},
{
label: '何22',
value: 'op5'
},
{
label: '何33',
value: 'op6'
},
{
label: '何44',
value: 'op7'
},
{
label: '何55',
value: 'op8'
},
{
label: '何66',
value: 'op9'
}
];
const emit = defineEmits(['close'])
</script>
<style scoped lang="scss">
.member-list {
width: 200px;
border: 1px solid #ffe5e5;
z-index: 21;
.list{
height: 240px;
overflow: auto;
}
}
.btn-sure {
background-color: #9abee8;
}
</style>
使用 dialog 組件還有一個好處就是可以通過transition-show和transition-hide設置彈窗時的動畫，詳見官方文檔。
3. 彈出操作列表/菜單列表（quasar Qmenu組件）
<template>
<q-btn label="..." unelevated>
<q-menu class="bg-grey-10 text-grey-2">
<q-list>
<q-item v-close-popup clickable @click="showDate(task.id)">
<q-item-section>更改截止日期</q-item-section>
</q-item>
<q-separator class="bg-grey-5 q-mx-xs"/>
<q-item v-close-popup clickable @click="deleteConfirm(task.id)">
<q-item-section>刪除任務</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</template>
QMenu同樣有target屬性，其默認為true，會默認將 menu 的父元素作為觸發(fā)menu的目標，即點擊 menu的父元素時， menu就會顯示。
4. 彈出一個操作確認框（Quasar Dialog插件）
quasar Dialog插件能實現(xiàn)類似html的window.confirm()的功能。
使用前需先安裝和引入，具體教程見官網(wǎng)。
以下截圖僅展示在Vite/Vue CLI項目中的使用：
使用示例：
<script setup>
import { ref } from "vue"
import { useQuasar } from 'quasar'
const $q = useQuasar()
function deleteUser(index) {
$q.dialog({
title: 'Confirm',
message: '請確認是否刪除該用戶',
cancel: "取消",
ok: "確定",
persistent: true
}).onOk(() => {
console.log('>>>> 刪除了用戶' + index)
}).onCancel(() => {
console.log('>>>> 取消了刪除用戶操作')
})
}
</script>
5. 彈出一個提示框（Quasar Notify插件）
如果僅需彈出一個提示消息而不需要用戶進行其他操作，則可使用Quasar 的 Notify插件。
同樣需要安裝后才能使用：
使用示例：
<script setup>
import { ref } from "vue"
import { useQuasar } from 'quasar'
const $q = useQuasar()
function doAddUser(newUser) {
if (newUser.account.trim() && newUser.password.trim()) {
}
else {
$q.notify(
{
message: "請輸入賬號和密碼",
position: "center",
timeout: 5
}
)
}
}
</script>
6. Quasar QPopupProxy
到此這篇關于詳解vue3+quasar彈窗的幾種方式的文章就介紹到這了,更多相關vue3 quasar 彈窗內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了基于vue的video播放器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
這篇文章主要介紹了Vue解決跨域問題常見方法,結合實例形式詳細分析了vue出現(xiàn)跨域問題的原因,以及常見解決方案與相關注意事項,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue實現(xiàn)圖片按比例縮放問題操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
最近項目中有個場景，一組圖片、視頻、音頻、文件數(shù)據(jù)，要求點擊圖片可以放大預覽，左右可以切換音視頻、文件，支持鼠標及各種鍵控制?縮放，左右旋轉，移動等功能,這篇文章主要介紹了Vue3.0實現(xiàn)圖片預覽組件(媒體查看器),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue 組件基礎知識的相關資料，幫助大家更好的理解和使用vue的組件，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了vue部署包可配置后臺接口地址的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
vue+element多選級聯(lián)選擇器自定義props使用詳解
這篇文章主要給大家介紹了關于vue+element多選級聯(lián)選擇器自定義props使用的相關資料,級聯(lián)選擇器展示的結果都是以數(shù)組的形式展示,也就是v-model綁定的結果,需要的朋友可以參考下2023-07-07
在現(xiàn)代 Web 開發(fā)中,字體文件通常是頁面加載時間的重要因素之一,特別是在字體文件較大或網(wǎng)絡環(huán)境不佳的情況下,用戶體驗可能會受到影響,本文將詳細探討如何在 Vue.js 項目中優(yōu)化字體文件的加載和緩存,以提高頁面性能,需要的朋友可以參考下2024-09-09
Vue+Ant Design進行大數(shù)據(jù)量下拉框卡頓與表單提交優(yōu)化
在現(xiàn)代前端開發(fā)中,處理大數(shù)據(jù)量渲染和表單交互是常見的挑戰(zhàn),本文將探討如何優(yōu)化 Ant Design Vue 下拉框在大數(shù)據(jù)量情況下的性能問題,并解決表單提交后重復提示的問題,需要的可以了解下2025-03-03
在Vue3的組件化開發(fā)中,父子組件間的通信是核心功能之一,本文將詳細介紹五種父組件訪問子組件屬性/方法的實現(xiàn)方案,包含最新的<script setup>語法糖實踐,需要的朋友可以參考下2025-03-03