新昵称头像自动填写
主要是看功能,样式不必计较
<template>
<view class="newlogin">
<button type="default" class="btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<text>头像</text>
<view class="cu-avatar lg round" :style="'background-image:url('+imgUrl+');'"></view>
</button>
<button type="default" class="btn">
<text>昵称</text>
<input type="nickname" class="input" placeholder="请输入昵称" @blur="inputData" v-model="nickName" />
</button>
</view>
</template>
<script>
export default{
data(){
return{
imgUrl:'', // 头像 首先是默认图像,必须先写一个默认头像的地址在自动获取
nickName: '微信用户' // 昵称
}
},
methods:{
// 微信头像修改
onChooseAvatar(e){
const { avatarUrl } = e.detail
this.imgUrl = avatarUrl
},
// 修改昵称
inputData(e){
console.log(e)
this.nickName = e.detail.value
}
}
}
</script>