使用vantdialog实现h5端一进页面出现弹窗总结：坑点主要是隐藏两个按钮，要自己重新组建一个按钮，图片的点击事件要

vant实现弹窗有两种方式，一种是组件引入方式，另外一种是直接引用的方式

Dialog.confirm({
  title: '标题',
  message: '弹窗内容'
}).then(() => {
  // on confirm
}).catch(() => {
  // on cancel
});

由于业务需求是一进页面刷新就要有弹窗，点击弹窗的图片要进行跳转，所以只能用第二种方式

1.引用文件

import Vue from "vue";

import { Dialog, Swipe, SwipeItem } from "vant";

Vue.use(Dialog)

.use(Swipe)

.use(SwipeItem);

2.写入方法，进行调用

this.timer = setTimeout(() => {        this.$dialog.close({});      }, 5000);      this.$dialog.confirm({        message:          '<img class="dialog-png" src="http://p0.qhimg.com/t012b93ed512590ce38.png">,<img class="dialog-close" src="https://p5.ssl.qhimg.com/t0171d57014c6df63dc.png" alt="">',        showCancelButton: false,        confirmButtonText: " ",        className: "van-dialogs"      });

3.在vue的created方法里面进行延迟调用和加载

created() {    Vue.nextTick()      .then(() => {        this.DialogApear();      })      .then(() => {        let img = document.getElementsByClassName("van-dialog__content");        console.log(img);        img[0].onclick = function() {//图片的点击操作      });  },

4.要清除定时器

 destroyed() {    clearTimeout(this.timer);  }

总结：坑点主要是隐藏两个按钮，要自己重新组建一个按钮，图片的点击事件要写到回调里面要不然是异步的，获取不到。