Vue3 van-dialog 使用

2用的时候特别简单，在全局里面引用一下，然后方法里面，页面里面直接使用就行了，但是到3就状况百出，v-model绑定有问题，一点不起作用

首先2用的时候，在main.js里面全局引用一下

 

 然后页面里面直接使用

 <van-dialog
      v-model="show"
      title="提醒"
      show-cancel-button
      confirmButtonText="确定"
      cancelButtonText="取消"
      @confirm="confirmn
      @cancel="cancel"
    >
      <p class="dialogshow">我是内容！！</p>
    </van-dialog>

data里面直接定义show:false
methods 里面直接写方法

是不是贼简单，到了3，可能是我用不习惯，好麻烦。。。。。

首先也是，main.js里面引用了一下，但是不管用，哈哈哈哈哈

 

在页面里面需要重新引入一下 ,红色的是重点

<script setup>
import { ref,reactive } from "vue";
import {Dialog} from 'vant';
const VanDialog = Dialog.Component;
const state = reactive({
  show: false, //弹窗
});
function confirm (){
console.log(222);
}
</script>

页面使用,这样就能正常使用啦~

<van-dialog v-model:show="state.show" title="标题" show-cancel-button>
  <div  @click="confirm">我知道了</div>
</van-dialog>

 

还有一种方法是在方法里面直接使用

Dialog.confirm({
      className: "no-title",
      message: "确认",
    })
      .then(() => {
        state.show = false;
      })
      .catch(() => {
        // on cancel
      });