秋晨有光
首发于秋晨有光
关于昵称和头像的总结(模仿微信)

关于昵称和头像的总结(模仿微信)

大家好,我叫秋晨光,哈哈。

关于昵称和头像的总结

1. 昵称

如图所示,这次的点击昵称是可以出现修改昵称的哦


在昵称那里添加一个点击的事件appear,这个事件主要是用来限制用户的修改次数


而后台的返回的接口是

这样成功了之后就会触发修改昵称的弹窗出来了

这个弹窗的程序为

<div class=" gerenxuanyan editPhoneNumber" v-if="popupShow.rename">\

<div class="bind-title">修改昵称</div>\

<div class="form-item">\

<input type="text" class="ipt-xuanyan" placeholder="一个月只能修改一次哦,亲ฅ>ω<*ฅ" maxlength="21" ref="renametext">\

</div>\

<div class="form-item clear">\

<button type="button" class="btnBind fl" @click="confirnrename">确认修改</button>\

<button type="button" class="btnBind fr" @click="closePopup(\'rere\')">取消修改</button>\

</div>\

</div>\

而这里有几个点事需要注意的,第一个是input的用法,其中要是想要input里面的值的话,ref这个参数很重要,我们可以看到上面写着 ref="renametext",这里咱们可以把它看成一个节点,于是就有了下文获取节点的时候的

然后上传昵称的时候就按照后端给的那个接口的参数做调整即可

confirnrename: function () {

// 修改昵称

var that = this;

var textreg = /^[a-zA-Z0-9-_\u4e00-\u9fa5]{1,21}$/;

var renametext = this.$refs.renametext.value;

// 获取内容长度

var textlength = that.getBytesLength(renametext);

if (textreg.test(renametext)) {

if (textlength > 21) {

that.remindertext =

'输入内容占' + textlength + '字节,最多输入21字节';

that.popupShow.reminderbox = true; //可能需要改动

setTimeout(function () {

that.popupShow.reminderbox = false;

}, 1000);

return false;

}

ajax({

url: apiUrl + '/api/api/SetUserNickname', //待填入

type: 'post',

data: {

user_id: JSON.parse(localStorage.getItem('CrntUser'))

.user_id,

sign: that.$store.state.config.sign,

nick_name: renametext

},

success: function (response) {

//提示修改成功

var data = JSON.parse(response);

if (data.ret == '1') {

that.remindertext = '修改成功';

that.popupShow.reminderbox = true;

that.rename = data.nick_name;

setTimeout(function () {

that.popupShow.reminderbox = false;

}, 1000);

that.closePopup('rere');

that.getUser();

} else {

that.remindertext = '一个月只能修改一次哦';

that.popupShow.reminderbox = true;

setTimeout(function () {

that.popupShow.reminderbox = false;

}, 1000);

that.closePopup('rere');

}

}

});

} else {

that.remindertext = '只能输入 汉字 字母 数字 下划线 和 横杠';

that.popupShow.reminderbox = true;

setTimeout(function () {

that.popupShow.reminderbox = false;

}, 1000);

}

},

这是用户昵称的修改接口,可以对照一下,而这里的重要的应该是通过v-if去控制组件的渲染,另外这个样式也是很重要的,

.gerenxuanyan {

background-color: #fff;

width: 6rem;

height: 4rem;

position: fixed;

z-index: 999;

border-radius: 6px;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

这个是弹框的大小,这里运用了垂直居中的样式编写机制,而标题的样式为

.editPhoneNumber .bind-title {

text-align: center;

font-size: 0.4rem;

padding: 0.35rem 0.15rem;

}

这是下面的input组件外层的样式.editPhoneNumber .form-item {

00001. padding: 0.15rem 0.25rem;

00002. position: relative;

至于按钮的样式为


再加一个左右浮动的样式即可

2. 修改头像

到了修改头像这里是一个重头戏,主要运用了vue-cropper的插件,中间要注意到input组件的灵活运用以及vh与vw的单位运用,而input中涉及到一些属性

<input v-show="endingjt" type="file" id="uploads" ref="upup" style="position:absolute; clip:rect(0 0 0 0);" accept="image/*" @change="uploadImg($event)">\

Ref可以让你可以拿到input进去的东西

例如下面是可以这样

this.$refs.upup.value=null;

这段代码很重要,这段代码可以让你每次点击之后都清空你里面的所选择的文件,注意,这里是指input里面已经所选的东西了,这样做的目的是为了下次重新选择同样的东西的时候可以有反应,不然的话是没有反应的,这里理解成监听这里的属性并且去修改,像这些

var renametext = this.$refs.renametext.value;

var xuanyantext = this.$refs.xuanyantext.value;

this.$refs.cropper.getCropBlob(function (data) {

<input type="text" class="ipt-xuanyan" placeholder="输入宣言(最多7个汉字或21个字符)" maxlength="21" ref="xuanyantext">\

<input type="text" class="ipt-xuanyan" placeholder="一个月只能修改一次" maxlength="21" ref="renametext">\

<vue-cropper class="vue-cropper\

" ref="cropper" :img="option.img" :original="option.original" :maxImgSize="option.ImgSize" :infoTrue="option.infoTrue" :high="option.high" :outputSize="option.size" :outputType="option.outputType" :info="false" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :fixedBox="option.fixedBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :centerBox="option.centerBox" :high="option.high" ></vue-cropper>

所以ref的使用是非常方便的,属于vue的属性之一,减少dom的渲染

<div class="navv">


<input v-show="endingjt" type="file" id="uploads" ref="upup" style="position:absolute; clip:rect(0 0 0 0);" accept="image/*" @change="uploadImg($event)">\

document.getElementById('uploads').click();

这样子和上面 有点相似,间接的点击这个input

好了,上面需要用到的一些很重要的属性已经说完了,重头戏应该摆在组件的使用以及图片上传的一些需要注意的事情以及用户体验流程的优化,当然还有图片压缩的问题的处理,

Vue-cropper插件的使用中,首先是引入阶段,因为我使用的vue没有用脚手架,所以引入流程是

1. 引入


2. 注册

components: {

'me-password': mePassword,

'vue-cropper': window['vue-cropper'].default

},

3. 使用

4.


导入流程就是这样了

那么在使用的过程中应该如何呢?

这里有一个地方是很值得注意的,如何做一个点击头像会出现选择图片还有截图区的东西出来,我们可以注意到作者的使用方法是这样的

第一步是把组件挂载上去

第二步是弄一个大家都看不到的隐藏键input ,而这个组件的触发事件是上面所示


这一步可以让你选择自己想要的图片,像这样


在手机端就是飞到相册那里了,不过这里有一个坑,咱们后面说

第三步是到了上传部分了,作者的类似的做法是这样的


这里的第一个是获取图片的blob信息,第二个剪头是获取图片的base64信息,这个都可以为我们所用,好了,基本的功能已经说完了,现在就开始实操了

那我是怎么处理的呢?

1. 模仿

<input v-show="endingjt" type="file" id="uploads" ref="upup" style="position:absolute; clip:rect(0 0 0 0);" accept="image/*" @change="uploadImg($event)">\

<div class="ending" v-if="endingjt">\

<vue-cropper class="vue-cropper\

" ref="cropper" :img="option.img" :original="option.original" :maxImgSize="option.ImgSize" :infoTrue="option.infoTrue" :high="option.high" :outputSize="option.size" :outputType="option.outputType" :info="false" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :fixedBox="option.fixedBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :centerBox="option.centerBox" :high="option.high" ></vue-cropper>\

<div class="navv">\

<div class="daohang">\

<div class="btn1" @click="backback"> </div>\

<div class="btn2" @click="down">确定</div>\

</div>\

这里我新加了点东西,关于v-show和v-if的,如果有点击的事件的时候,input才会出现,虽说这个input的出现作用不太大,因为他本来就是隐藏的,所以这里最重要的是v-if那个,这里提出一个问题,为什么组件的那里我不用v-show?因为在这个更换头像的过程中有个需求是咱们每次再点入的时候是需要清空掉之前咱们渲染进去的图片的,那这里v-show是不行的,只能是v-if因为可以让组件重新渲染,也就是重置!!!而且这里还涉及到一个技巧,就是先后顺序的问题了,如果在点击我们的头像触发咱们的input的时候我是设置了组件也是同时出现的,但这样会导致移动端点击选择完相片之后组件出现的很慢的问题,而且还有一个很大的问题,就是假设我没有选择图片的话,就不会渲染出这个组件所以这里就可以这样写了

uploadImg: function(e) { //在input组件上面的点击事件,注意用来获取选择的图片文件

//上传图片

var file = e.target.files[0];

var _this = this;

if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)||e.target.files.length==0) {

return

}

else{ var reader = new FileReader()

reader.onload = function (e) {

var data

if (typeof e.target.result === 'object') {

// 把Array Buffer转化为blob 如果是base64不需要

data = window.URL.createObjectURL(new Blob([e.target.result]))

} else {

data = e.target.result

}

_this.option.img = data

}

// 转化为base64

// reader.readAsDataURL(file)

// 转化为blob

reader.readAsArrayBuffer(file);

this.endingjt=true; //让带有vue-cropper的组件出现,如果没有选择就不会出现了

this.$refs.upup.value=null;//把input里面的内容清空,在下次点击同一张图片的时候就不会出现获取不了的状况

}

},

那么当组件出来了之后在上传阶段咱们应该怎么处理呢?


这样既可,在返回阶段,也就是


这里得绑定一个事件,backback()去掉input中的元素还有


至于组件的使用大家就自己去看官方文档了。。。

到了一些体验性的东西,有一个地方需要注意一下,移动端的包裹组件的那个容器咱们需要设置100vh和100vw,这样我们现在看到的这个图片才能居中显示看起来更加的好看

最后到了一个新加环节,怎么调用相机功能呢?其实很简单,加一个accept= accept="image/*"

<input v-show="endingjt" type="file" id="uploads" ref="upup" style="position:absolute; clip:rect(0 0 0 0);" accept="image/*" @change="uploadImg($event)">\



最后说一句,图片为吉林大学珠海学院,也是我的母校,哈哈,刚毕业2个月。。。伤感

文中的插件链接是:

人类身份验证 - SegmentFault

或者是vue-cropper,有啥不懂可以留言哦

想体验我的新功能可以上移动端的这个wx.tt-cool.com/看看,希望没有过期,哈哈

发布于 2018-09-30

文章被以下专栏收录