在vant中如何使用dialog彈窗

Posted on by

如何使用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>

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：