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

通過(guò)show的false與true來(lái)確定彈窗框的存在與否。

4.使用

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

vant dialog組件使用

vant Dialog組件引入

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

template中使用

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

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

您可能感興趣的文章:

相關(guān)文章

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