vant

dialog

dialog的异步关闭实例

使用dialog组件调用的形式 异步关闭dialog ----eg: 增改用户个人信息

<template>
  <div>
    <div class="userList">
      <van-cell-group>
        <van-cell v-for="(item, index ) in list" :key="index" :title="item.name" :value="item.tel" readonly input-align="right">
          <template #right-icon>
            <div class="info">
              <button @click="edit(item,index)">修改</button>
              <button @click="del(item.id)">删除</button>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <van-dialog v-model="dialogShow" title="修改用户信息" show-cancel-button :before-close="beforeClose">
      <van-cell-group :border='false'>
        <van-field v-model="user.name" placeholder="请输入姓名" :border='false'>
        </van-field>
        <van-field v-model="user.tel" placeholder="请输入手机号码" :border='false'>
        </van-field>
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog1',
  data() {
    return {
      dialogShow: false,
      list: [
        {
          name: 'rose',
          tel: 16012344321
        },
        {
          name: 'king',
          tel: 16012344322
        },
      ],
      user: {
        name: '',
        tel: ''
      },
      flagI: '', //保存修改行的索引值
    };
  },
  methods: {
    edit(item, index) {
      this.flagI = index; //保存要修改的索引值 
      this.dialogShow = true; //点击修改按钮 弹出dialog
      this.user.name = item.name; //自动获取点击行的信息 便于修改
      this.user.tel = item.tel;
    },
    del(id) {
      this.list.splice(id, 1);
    },
    beforeClose(action, done) {
      if (action == 'confirm') {
        if (this.user.name == '' || this.user.tel == '') {
          this.$toast.fail('请填写完整信息');
          done(false);
        } else {
          this.list.splice(this.flagI, 1);
          this.list.push({
            name: this.user.name,
            tel: this.user.tel,
          })
          done();
        }

      } else {
        done();
      }
    }
  }
}
</script>

<style scoped>
.userList {
  width: 350px;
}
.userList .info {
  display: flex;
}
</style>