<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
quasar tooltip元件
當希望將滑鼠懸停在目標元素上會顯示提示訊息時,可以使用html中的title屬性,但使用title屬性出現的提示框樣式可能並不是我們想要的,這時候可以使用quasar提供的tooltip元件。
可以看到,target預設為true,則會預設將 tooltip 的父元素作為觸發tooltip的目標,即滑鼠經過tooltip的父元素時,tooltip就會顯示。
<q-btn color="primary" label="tooltip的父元素" size="24px"> <q-tooltip>我在這</q-tooltip> </q-btn>
也可以用String型別指定觸發 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.1 點選某按鈕後出現自定義的彈窗(vue方法)
效果圖:
點選“+”按鈕後彈出選項列表Member子元件,
點選Member子元件上的按鈕時關閉彈窗。
子元件:
父元件
注意:有需要時可以給子元件Member設定一個z-index的樣式。
知識點
vue 元件 官方檔案:https://staging-cn.vuejs.org/guide/components/registration.html
1、父元件可以使用 props 把資料傳給子元件。
2、子元件可以使用 $emit 觸發父元件的自定義事件。
2.2 點選某按鈕後出現自定義的彈窗(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>
上述同樣的效果也可用以下程式碼實現:
父元件:
<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設定彈窗時的動畫,詳見官方檔案。
<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 的父元素作為觸發menu的目標,即點選 menu的父元素時, menu就會顯示。
quasar Dialog外掛能實現類似html的window.confirm()的功能。
使用前需先安裝和引入,具體教學見官網。
以下截圖僅展示在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>
如果僅需彈出一個提示訊息而不需要使用者進行其他操作,則可使用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>
到此這篇關於詳解vue3+quasar彈窗的幾種方式的文章就介紹到這了,更多相關vue3 quasar 彈窗內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45