快捷導(dǎo)航

詳解vue3+quasar彈窗的幾種方式

更新時(shí)間：2022年08月09日 08:10:22 作者：不知-_

本文主要介紹了vue3+quasar彈窗的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 鼠標(biāo)懸浮時(shí)的提示（Quasar Tooltip組件）
2. 點(diǎn)擊某按鈕后出現(xiàn)自定義的彈窗
3. 彈出操作列表/菜單列表（quasar Qmenu組件）
4. 彈出一個(gè)操作確認(rèn)框（Quasar Dialog插件）
5. 彈出一個(gè)提示框（Quasar Notify插件）
6. Quasar QPopupProxy

1. 鼠標(biāo)懸浮時(shí)的提示（Quasar Tooltip組件）

quasar tooltip組件
當(dāng)希望將鼠標(biāo)懸停在目標(biāo)元素上會(huì)顯示提示消息時(shí)，可以使用html中的title屬性，但使用title屬性出現(xiàn)的提示框樣式可能并不是我們想要的，這時(shí)候可以使用quasar提供的tooltip組件。

可以看到，target默認(rèn)為true，則會(huì)默認(rèn)將 tooltip 的父元素作為觸發(fā)tooltip的目標(biāo)，即鼠標(biāo)經(jīng)過(guò)tooltip的父元素時(shí)，tooltip就會(huì)顯示。

<q-btn color="primary" label="tooltip的父元素" size="24px">
    <q-tooltip>我在這</q-tooltip>
</q-btn>

也可以用String類型指定觸發(fā) tooltip的目標(biāo)元素。

 <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>

其他詳見(jiàn)官方文檔。

2. 點(diǎn)擊某按鈕后出現(xiàn)自定義的彈窗

2.1 點(diǎn)擊某按鈕后出現(xiàn)自定義的彈窗（vue方法）

效果圖：
點(diǎn)擊“+”按鈕后彈出選項(xiàng)列表Member子組件，
點(diǎn)擊Member子組件上的按鈕時(shí)關(guān)閉彈窗。

子組件：

父組件

注意：有需要時(shí)可以給子組件Member設(shè)置一個(gè)z-index的樣式。

知識(shí)點(diǎn)

vue 組件官方文檔：https://staging-cn.vuejs.org/guide/components/registration.html
1、父組件可以使用 props 把數(shù)據(jù)傳給子組件。
2、子組件可以使用 $emit 觸發(fā)父組件的自定義事件。

2.2 點(diǎn)擊某按鈕后出現(xiàn)自定義的彈窗（quasar QDialog組件）

quasar dialog組件通過(guò)綁定的值來(lái)決定是否顯示該彈窗，值可以使用model-value進(jìn)行綁定，也可以使用v-model進(jìn)行綁定。

使用model-value進(jìn)行綁定時(shí)，需要使用:。

<q-dialog :model-value="showFlag" persistent>
   ...
</q-dialog>

//or
<q-dialog v-model="showFlag" persistent>
   ...
</q-dialog>

上述同樣的效果也可用以下代碼實(shí)現(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 組件還有一個(gè)好處就是可以通過(guò)transition-show和transition-hide設(shè)置彈窗時(shí)的動(dòng)畫(huà)，詳見(jiàn)官方文檔。

3. 彈出操作列表/菜單列表（quasar Qmenu組件）

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>刪除任務(wù)</q-item-section>
           </q-item>
        </q-list>
     </q-menu>
</q-btn>
</template>

QMenu同樣有target屬性，其默認(rèn)為true，會(huì)默認(rèn)將 menu 的父元素作為觸發(fā)menu的目標(biāo)，即點(diǎn)擊 menu的父元素時(shí)， menu就會(huì)顯示。

4. 彈出一個(gè)操作確認(rèn)框（Quasar Dialog插件）

quasar Dialog插件能實(shí)現(xiàn)類似html的window.confirm()的功能。

使用前需先安裝和引入，具體教程見(jiàn)官網(wǎng)。

以下截圖僅展示在Vite/Vue CLI項(xiàng)目中的使用：

使用示例：

<script setup>
import { ref } from "vue"
import { useQuasar } from 'quasar'

const $q = useQuasar()

function deleteUser(index) {
  $q.dialog({
    title: 'Confirm',
    message: '請(qǐng)確認(rèn)是否刪除該用戶',
    cancel: "取消",
    ok: "確定",
    persistent: true
  }).onOk(() => {
    console.log('>>>> 刪除了用戶' + index)
  }).onCancel(() => {
    console.log('>>>> 取消了刪除用戶操作')
  })
}
</script>

5. 彈出一個(gè)提示框（Quasar Notify插件）

如果僅需彈出一個(gè)提示消息而不需要用戶進(jìn)行其他操作，則可使用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: "請(qǐng)輸入賬號(hào)和密碼",
          position: "center",
          timeout: 5
        }
    )
  }
}

</script>