Vue移动端

编辑用户资料功能

展示用户信息

查看接口文档找数据接口, 封装请求方法, 发送请求获取数据, 进行模版绑定

修改昵称

准备一个弹出层, 定义一个变量为 false , 控制弹出层的隐藏, 点击对应按钮时,将变量设置为true 来显示弹出层, 绘制弹出层组件, 给取消按钮绑定一个事件使用 $emit 传给父组件,在父组件中导入并注册, 监听关闭事件。父组件使用 v-model 将昵称传给子组件用于显示，子组件发送请求，更新昵称后，将更新后的值再传给父组件

修改性别

原理与修改昵称大致相同，子组件使用 Picker选择器来完成布局

<van-picker
  show-toolbar
  title="设置性别"
  :columns="columns"
  :default-index="value"
  @cancel="$emit('close')"
  @confirm="onConfirm"
  @change="onPickerChange"
/>

data(){
  return {
   colums:['男','女']
  }
}

修改生日

原理也与上面相同，子组件使用了 DatetimePicker时间选择组件，

<!--
    currentDate 双向绑定了日期选择器
        设置日