<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就可以，這樣就簡單的實現(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>核準日期：</div>
? ?<div class="btn-custom-primary" @click="goDetail">預覽文件</div>
? ?<Button type="primary" block @click="goHome">我知道了</Button>
?</Dialog>

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

您可能感興趣的文章:

keep-alive include和exclude無效問題及解決
這篇文章主要介紹了keep-alive include和exclude無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue 2.0組件與v-model詳解
這篇文章主要介紹了vue 2.0組件與v-model的相關資料，文中介紹的非常詳細，本文適合初學組件編寫的同學閱讀，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-03-03
使用Electron打包vue文件變成exe應用程序的全過程
這篇文章主要給大家介紹了使用Electron打包vue文件變成exe應用程序的全過程,文中通過代碼示例和圖文結合的方式給大家講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下
2024-01-01
vue實現(xiàn)一個簡單的分頁功能實例詳解
這篇文章主要介紹了vue實現(xiàn)一個簡單的分頁功能,需要的朋友可以參考下
2022-12-12
詳解vue 表單綁定與組件
這篇文章主要介紹了vue 表單綁定與組件的相關資料，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
2021-03-03
vue中關于checkbox使用的問題
這篇文章主要介紹了vue中關于checkbox使用的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue.js中for循環(huán)如何實現(xiàn)異步方法同步執(zhí)行
這篇文章主要介紹了vue.js中for循環(huán)如何實現(xiàn)異步方法同步執(zhí)行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-02-02
使用Vue.js和Flask來構建一個單頁的App的示例
本篇文章主要介紹了使用Vue.js和Flask來構建一個單頁的App的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
vue-extend和vue-component注冊一個全局組件方式
這篇文章主要介紹了vue-extend和vue-component注冊一個全局組件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue實現(xiàn)分環(huán)境打包步驟(給不同的環(huán)境配置相對應的打包命令)
這篇文章主要介紹了vue實現(xiàn)分環(huán)境打包步驟(給不同的環(huán)境配置相對應的打包命令)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-06-06