在vant中如何使用dialog彈窗

更新時間：2022年05月26日 11:20:02 作者：qq_39355295

這篇文章主要介紹了在vant中如何使用dialog彈窗，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

如何使用dialog彈窗

1.官網(wǎng)示例

因為這次是在手機(jī)上用的所以就用了vant組件

2.第一步引入vant中的dialog組件

官網(wǎng)介紹自行選擇安裝方式

3.vue頁面中引入

<van-dialog
  v-model="show"
  title="標(biāo)題"
  show-cancel-button
>
  <img src="https://img.yzcdn.cn/vant/apple-3.jpg">
</van-dialog>
export default {
  data() {
    return {
      show: false
    };
  }
}

通過show的false與true來確定彈窗框的存在與否。

4.使用

在你想用的地方中定義一個點(diǎn)擊方法，在彈出條件中判斷show的false與true就可以，這樣就簡單的實(shí)現(xiàn)了彈出窗的提示功能。

vant dialog組件使用

vant Dialog組件引入

import { ?Dialog } from 'vant'
export default{
? components: {
? ? Dialog: Dialog.Component//?。。?！坑?
? }
}

template中使用

<Dialog v-model="showSuccess" title="注冊完成" >
? ?<div>鏈群編碼：932302339093030</div>
? ?<div>核準(zhǔn)日期：</div>
? ?<div class="btn-custom-primary" @click="goDetail">預(yù)覽文件</div>
? ?<Button type="primary" block @click="goHome">我知道了</Button>
?</Dialog>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何使用Vuex+Vue.js構(gòu)建單頁應(yīng)用
這篇文章主要教大家如何使用Vuex+Vue.js構(gòu)建單頁應(yīng)用,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
VUE更換背景顏色的方法
這篇文章主要介紹了VUE更換背景顏色的方法,?在這個示例中,我們使用了一個backgroundColor變量來存儲當(dāng)前頁面的背景顏色,當(dāng)用戶點(diǎn)擊按鈕時,我們通過調(diào)用setBackgroundColor方法來更改背景顏色,并將背景顏色同時應(yīng)用于body元素,需要的朋友可以參考下
2024-03-03
Vue如何使用patch-package優(yōu)雅地修改第三方依賴庫
在前端開發(fā)中,有時我們需要對第三方依賴庫進(jìn)行修改以滿足項目需求,patch-package 是一個優(yōu)秀的工具,可以幫助我們優(yōu)雅地管理這些修改,下面我們來看看具體操作吧
2025-03-03
vue打包部署到tomcat上頁面空白資源加載不出來的解決
這篇文章主要介紹了vue打包部署到tomcat上頁面空白資源加載不出來的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue.set()實(shí)現(xiàn)數(shù)據(jù)動態(tài)響應(yīng)的方法
這篇文章主要介紹了Vue.set()實(shí)現(xiàn)數(shù)據(jù)動態(tài)響應(yīng)的相關(guān)知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2018-02-02
setTimeout在vue中的正確使用方式
這篇文章主要介紹了setTimeout在vue中的正確使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue3?騰訊地圖設(shè)置簽到范圍并獲取經(jīng)緯度的實(shí)現(xiàn)代碼
本文給大家介紹vue3?騰訊地圖設(shè)置簽到范圍并獲取經(jīng)緯度的實(shí)現(xiàn)代碼，本文通過示例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧
2022-05-05
Vue3+Vite+TS使用elementPlus時踩的坑及解決
這篇文章主要介紹了Vue3+Vite+TS使用elementPlus時踩的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
基于vue-router 多級路由redirect 重定向的問題
今天小編就為大家分享一篇基于vue-router 多級路由redirect 重定向的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue 對象和數(shù)據(jù)的強(qiáng)制更新方式
這篇文章主要介紹了Vue 對象和數(shù)據(jù)的強(qiáng)制更新方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04