vant-Dialog 弹出框的用法

1,dialog全局注册, 然后在UserEdit.vue这个页面使用 - 准备弹出输入框层

<!-- 姓名部分 -->
<van-cell
        title="名称"
        is-link
        :value="profile.name"
        @click="showNameDialogFn" />

<!-- 修改用户名称的对话框 -->
<van-dialog
      v-model="isShowNameDialog"
      title="修改名称"
      show-cancel-button
      :before-close="onNameDialogBeforeClose">
      <!-- 输入框 -->
      <van-field
        v-model.trim="userName"
        input-align="center"
        maxlength="7"
        placeholder="请输入名称"
        v-fofo
      />
</van-dialog>

<script>
export default {
  data () {
    return {
      isShowNameDialog: false, // 是否显示姓名弹出框
      userName: '' // 编辑用户名
    }
  },
  methods: {
    // 点击名字-出现弹出框
    showNameDialogFn () {
      this.isShowNameDialog = true
      this.userName = this.profile.name // 设置默认显示内容
    },
    // 姓名修改弹出层-关闭前方法
    onNameDialogBeforeClose (action, done) {
	
    }
  }
}
</script>

2,在弹窗关闭方法里判断

// 姓名修改弹出层-关闭前方法
async onNameDialogBeforeClose (action, done) {
    // action的值: confirm或cancel(点击按钮区分)
    if (action === 'confirm') {
        // 确定
        // unicode编码 \u4092
        // url编码 %E2%C3%D1
        if (/^[A-Za-z0-9\u4e00-\u9fa5]{1,7}$/.test(this.userName)) {
            // 通过校验
            // 调用接口
            // 更新页面显示的名字
            
            // 关闭弹窗
            done()
        } else {
            // 提示用户
            Notify({ type: 'warning', message: '用户名中英文和数字1-7位' })
            // 阻止弹窗关闭
            done(false)
        }
    } else if (action === 'cancel') {
        // 取消
        done()
    }
}

3,定义接口方法

// 用户 - 更新资料
export const updateProfileAPI = ({ birthday, userName }) => {
  return request({
    url: '/v1_0/user/profile',
    method: 'PATCH',
    data: {
      birthday: birthday,
      name: userName
    }
  })
}

4,在通过校验位置, 调用接口更新

import { updateProfileAPI } from '@/api'

if (/^[A-Za-z0-9\u4e00-\u9fa5]{1,7}$/.test(this.userName)) {
    // 通过校验
    // 调用接口
    await updateProfileAPI({
        userName: this.userName
    })
    // 更新页面显示的名字
    this.profileObj.name = this.userName
    // 关闭弹窗
    done()
}