在vant中如何使用dialog彈窗
更新時間：2022年05月26日 11:20:02 作者：qq_39355295
這篇文章主要介紹了在vant中如何使用dialog彈窗，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
如何使用dialog彈窗
1.官網示例
因為這次是在手機上用的所以就用了vant組件
2.第一步引入vant中的dialog組件
官網介紹自行選擇安裝方式
3.vue頁面中引入
<van-dialog
v-model="show"
title="標題"
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.使用
在你想用的地方中定義一個點擊方法，在彈出條件中判斷show的false與true就可以，這樣就簡單的實現了彈出窗的提示功能。
vant dialog組件使用
vant Dialog組件引入
import { ?Dialog } from 'vant'
export default{
? components: {
? ? Dialog: Dialog.Component//！?。。】?
? }
}template中使用
<Dialog v-model="showSuccess" title="注冊完成" > ? ?<div>鏈群編碼：932302339093030</div> ? ?<div>核準日期：</div> ? ?<div class="btn-custom-primary" @click="goDetail">預覽文件</div> ? ?<Button type="primary" block @click="goHome">我知道了</Button> ?</Dialog>
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要教大家如何使用Vuex+Vue.js構建單頁應用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了VUE更換背景顏色的方法,?在這個示例中,我們使用了一個backgroundColor變量來存儲當前頁面的背景顏色,當用戶點擊按鈕時,我們通過調用setBackgroundColor方法來更改背景顏色,并將背景顏色同時應用于body元素,需要的朋友可以參考下2024-03-03
Vue如何使用patch-package優(yōu)雅地修改第三方依賴庫
在前端開發(fā)中,有時我們需要對第三方依賴庫進行修改以滿足項目需求,patch-package 是一個優(yōu)秀的工具,可以幫助我們優(yōu)雅地管理這些修改,下面我們來看看具體操作吧2025-03-03
這篇文章主要介紹了vue打包部署到tomcat上頁面空白資源加載不出來的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue.set()實現數據動態(tài)響應的相關知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了setTimeout在vue中的正確使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本文給大家介紹vue3?騰訊地圖設置簽到范圍并獲取經緯度的實現代碼，本文通過示例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧2022-05-05
Vue3+Vite+TS使用elementPlus時踩的坑及解決
這篇文章主要介紹了Vue3+Vite+TS使用elementPlus時踩的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
基于vue-router 多級路由redirect 重定向的問題
今天小編就為大家分享一篇基于vue-router 多級路由redirect 重定向的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue 對象和數據的強制更新方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04