头条项目07

展示用户信息

查看接口文档找数据接口，封装请求方法发送请求获取数据，然后进行模板绑定。

修改昵称

准备一个弹出层，定义一个变量为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时间选择组件

<van-datetime-picker
  v-model="currentDate"
  type="date"
  title="选择年月日"
  :min-date="minDate"
  :max-date="maxDate"
/>

修改头像

实现图片预览的两块方法：

一、请求上传图片，将图片存储到服务器，返回图片文件在服务器的http访问地址，获取上传返回的结果，将img的src设置为返回的结果

二、纯客户端实现上传图片预览

// 获取文文件对象
const file = fileInput.files[0]
 
// 设置图片的 src
img.src = window.URL.createObjectURL(file)