问题描述

 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>

---

---

初次接触 TS,文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会 一 一 回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长