vant3 之 van-dialog 弹出框之组件调用：vue3+TS

最新推荐文章于 2024-09-13 22:01:04 发布

潮汐未见潮落

最新推荐文章于 2024-09-13 22:01:04 发布

阅读量5.8k

点赞数 4

分类专栏： Vue3+TS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52855464/article/details/128004990

版权

Vue3+TS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文主要介绍了在Vue3+TypeScript项目中使用van-dialog组件时遇到的回调函数不响应及类型报错的问题。作者通过调整函数定义，将类型设置为any消除了警告，同时也分享了如何通过组件事件绑定来避免TS的严格类型检查。此外，文章还提供了cancel和confirm函数的实现，以及在不使用TS写法时的解决方案。

摘要由CSDN通过智能技术生成

问题描述

vue3 + TS 项目使用 van-dialog 弹出框，开始的时候一直尝试，发现取消和确认按钮都没有反应，后面发现是定义相关回调函数存在一些问题，而且因为使用 TS ，有更严格的代码要求，也产生了许多报错，虽然最后我是把类型改成 any 才解决了一些报错

组件代码

  <van-dialog 
         :show="show" 
         title="修改昵称" 
         :show-cancel-button=true
         :overlay=true
         :close-on-click-overlay=true
         :before-close="beforeClose"
    >
           <van-field v-model="NewName" label="新昵称" placeholder="请输入新昵称" />
  </van-dialog>

在没给函数添加 any 类型之前是有红波浪线警告的（虽然可以正常运行,,如下）

    const  beforeClose  = (action: any) => { 
            if (action === 'confirm') { 
                // 确认
                confirm();
            
            } else if (action === 'cancel') { 
                // 取消
                cancel();
            }
        }

添加上 any 类型红波浪线警告消失

    const  beforeClose: any  = (action: any) => { 
            if (action === 'confirm') { 
                // 确认
                confirm();
            
            } else if (action === 'cancel') { 
                // 取消
                cancel();
            }
        }

另外两个函数

cancel

     const cancel = () => {
            // console.log('取消修改');
            Toast.fail('取消修改');
            show.value = false;
        }

confirm

    const confirm = () => {
            if(state.userinfo.name === NewName.value) {
                Toast.fail('新旧昵称相同，请重试');
            } else {
                ChangeName(NewName.value).then( res => {
                    console.log(res)
                    if(res.status === 204) {
                        Toast.success('修改成功');
                        router.go(0);
                    }else {
                        Toast.fail('修改失败');
                    }
                })
                show.value = false;
            }      
        }

使用组件自带事件

后面发现可以不使用 TS 的写法，给组件直接绑定事件也可以实现所需的效果

cancel 和 confirm 函数保持不变

 <van-dialog 
      :show="show" 
      title="修改昵称" 
      :show-cancel-button=true
      :overlay=true
      :close-on-click-overlay=true
      @cancel="cancel"
      @confirm="confirm"
    >
           <van-field v-model="NewName" label="新昵称" placeholder="请输入新昵称" />
</van-dialog>