美文网首页
vant中使用dialog对话框

vant中使用dialog对话框

作者: 李小白呀 | 来源:发表于2021-06-01 17:39 被阅读0次
 giveUp() {
      // giveUp() {
      this.$dialog.confirm({
        title: '标题?',
        message: '内容',
        showCancelButton: true // 取消
      })
        .then(async() => { // 点击确认按钮后的调用
          console.log('点击了确认按钮噢')
          // this.giveUpInfo.postId = this.info.postId
          // const { data: res } = await giveUp()
          // console.log('放弃申请', res.data)
        })
        .catch(() => { // 点击取消按钮后的调用
          console.log('点击了取消按钮噢')
        })
      console.log(this.info)
    },

2.自定义内容:

 <van-button
    plain
     color="#2153A4"
     @click="onClick"
    >放弃申请</van-button>

    <van-dialog
    v-model="isShow"
     show-cancel-button
    :before-close="beforeClose"
    >
      <van-field
       v-model="giveUpInfo.reason"
       placeholder="请输入放弃原因"
       />
    </van-dialog>

onClick() {
      this.isShow = true
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        console.log('1')
        this.isShow = false
      } else if (action === 'cancel') {
        console.log('2')
        done() // 关闭
      }
    }

相关文章

网友评论

      本文标题:vant中使用dialog对话框

      本文链接:https://www.haomeiwen.com/subject/tvfgsltx.html