vue项目中的h5图片上传(处理上传的时候图片被旋转的问题,并压缩图片大小)
2019-01-22 16:33
316 查看
vue的图片上传
这个页面实现的主要是实现创建球队功能,里面包含队徽,球队类型,球队名称,所属地址
这里除了图片上传还有一个地址的三级联动功能,这里我把这个页面都贴上来了。这个项目中使用vux作为ui库——本文主要是项目的纪录。
本项目除了图片的上传还有选取图片后图片被旋转的问题主要用到 exif-js 插件 (可以使用npm安装 npm install exif-js --save )具体方法可以查看其文档
**备注:这里是我们调用接口写的共用部分,每个人做项目肯定不一样。** var _this = this; var timeStamp = new Date().getTime(); var randomKey = Math.random(); var sign = getSign('1.0.0',timeStamp,randomKey,{},md5); this.axios({ method: '这里是调用接口的方法', // 比如get 、post url: `这里存放其对类型接口地址`, headers: { 'Content-Type': 'application/x-www-form-urlencoded', // 请求类型 'X-Request-AppType': 'public', 'X-Request-Id': 've.shareh5', 'X-Request-AppVersion': '1.0.0', 'X-Request-Time': timeStamp, 'X-Request-Nonce': randomKey, 'X-Request-Sign': sign, 'X-Request-Token':localStorage.token //项目中的token值 } }) .then(function (res) { })
图片上传js代码 //获取图片文件 handleFile(e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.avator = e.target.files[0]; this.imgPreview(this.avator); }, /** * 将以base64的图片url数据转换为Blob * @param urlData 图片base64数据 * @name convertBase64UrlToBlob */ convertBase64UrlToBlob(urlData) { var bytes=window.atob(urlData.split(',')[1]); //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : 'image/*'}); }, imgPreview(file){ //base64 格式 let that = this; let Orientation; // //去获取拍照时的信息,解决拍出来的照片旋转问题 Exif.getData(file, function(){ Orientation = Exif.getTag(this, 'Orientation'); }); // 看支持不支持FileReader if (!file || !window.FileReader) return; if(/^image/.test(file.type)){ // 创建一个reader let reader = new FileReader(); // 将上传的图片将转成 base64 格式 reader.readAsDataURL(file); // 读取成功后的回调 reader.onload = function(e) { let img = new Image(); img.src = this.result; //判断图片是否大于100K,是就直接上传,反之压缩图片 if (this.result.length <= (100 * 1024)) { // that.$vux.toast.text("图片不能超过2M"); that.avatorImg =this.result; }else { img.onload = function () { let data = that.compress(img,Orientation); that.avatorImg = data; } } } } }, rotateImg (img, direction,canvas) { //最小与最大旋转方向,图片旋转4次后回到原方向 const min_step = 0; const max_step = 3; if (img == null)return; //img的高度和宽度不能在img元素隐藏后获取,否则会出错 let height = img.height; let width = img.width; let step = 2; if (step == null) { step = min_step; } if (direction == 'right') { step++; //旋转到原位置,即超过最大值 step > max_step && (step = min_step); } else { step--; step < min_step && (step = max_step); } //旋转角度以弧度值为参数 let degree = step * 90 * Math.PI / 180; let ctx = canvas.getContext('2d'); switch (step) { case 0: canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0); break; case 1: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, 0, -height); break; case 2: canvas.width = width; canvas.height = height; ctx.rotate(degree); ctx.drawImage(img, -width, -height); break; case 3: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, -width, 0); break; } }, compress(img,Orientation) { let canvas = document.createElement("canvas"); let ctx = canvas.getContext('2d'); //瓦片canvas let tCanvas = document.createElement("canvas"); let tctx = tCanvas.getContext("2d"); let initSize = img.src.length; let width = img.width; let height = img.height; //如果图片大于四百万像素,计算压缩比并将大小压至400万以下 let ratio; if ((ratio = width * height / 4000000) > 1) { // console.log("大于400万像素") ratio = Math.sqrt(ratio); width /= ratio; height /= ratio; } else { ratio = 1; } canvas.width = width; canvas.height = height; // 铺底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); //如果图片像素大于100万则使用瓦片绘制 let count; if ((count = width * height / 1000000) > 1) { // console.log("超过100W像素"); count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片 // 计算每块瓦片的宽和高 let nw = ~~(width / count); let nh = ~~(height / count); tCanvas.width = nw; tCanvas.height = nh; for (let i = 0; i < count; i++) { for (let j = 0; j < count; j++) { tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); } } } else { ctx.drawImage(img, 0, 0, width, height); } //修复ios上传图片的时候 被旋转的问题 if(Orientation != "" && Orientation != 1){ switch(Orientation){ case 6://需要顺时针(向左)90度旋转 this.rotateImg(img,'left',canvas); break; case 8://需要逆时针(向右)90度旋转 this.rotateImg(img,'right',canvas); break; case 3://需要180度旋转 this.rotateImg(img,'right',canvas);//转两次 this.rotateImg(img,'right',canvas); break; } } //进行最小压缩 let ndata = canvas.toDataURL('image/jpeg', 0.1); // let ndata = canvas; // console.log('压缩前:' + initSize); // console.log('压缩后:' + ndata.length); // console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%"); tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; return ndata; }, //触发图片输入框的点击实践 setAvatar() { this.$refs.avatarInput.click(); },
页面完整代码 <template> <div id="team-create"> <div class="app-header"> <span class="iconfont icon-fanhui" @click="clickBack"></span> <span class="title">新建球队</span> </div> <div class="team-create-mainBox"> <!-- 球队上传 --> <div class="upload"> <div class="team-logo" @click.stop="setAvatar"> <input type="file" accept="image/*" @change="handleFile($event)" class="hiddenInput" ref="avatarInput"> <img :src="avatorImg" alt="" :"defaultImg"> </div> <p>上传队徽</p> </div> <div class="team-create-info"> <div class="teamType sameInputDiv"> <group labe 25994 l-width="4.5em" label-margin-right="2em" label-align="right"> <popup-picker title="球队类型" placeholder="选定后不可更改" :show-name="true" :data="list" v-model="sportsTypeId" value-text-align="left"></popup-picker> </group> <i class="iconfont icon-xiayibu"></i> </div> <div class="teamName inputdiv sameInputDiv"> <label>球队名称</label> <input type="text" placeholder="名称长度2-20个汉字" v-model="teamName" @blur="teamNameBlur" @focus="teamNameFocus"> <span class="iconfont icon-shanchuwenben" v-if="isShowClear" @click="clearInputText"></span> </div> <div class="addressSelect inputdiv sameInputDiv" @click="choseAdd"> <label>所属地区</label> <div class="addressSelect-input"> <input disabled="disabled" type="text" placeholder="请选择球队所属地区" v-model="teamAddress"> <em></em> </div> <i class="iconfont icon-xiayibu"></i> </div> </div> </div> <p class="team-create-point"><i class="iconfont icon-tishi"></i>球队创建人可管理球队</p> <button class="team-create-btn" @click="addTeam">创建球队</button> <!-- 地址三级联动选项 start--> <section class="address" :class="{toggHeight:istoggHeight}"> <section class="title"> <div class="cancle" @click="cancleAddress">取消</div> <div class="determine" @click="determine()" v-if="isChooseAddressAll">确定</div> </section> <div class="address-box"> <ul class="proJuli"> <li class="addList" v-for="(item,index) in provinces" @click="chooseProvience(item, 1)" :key="index" :class="{active : selected1 === item.id}"><span>{{item.name}}</span></li> </ul> <ul class="citJuli"> <li class="addList" v-for="(item,index) in showCityList" @click="chooseProvience(item, 2)" :key="index" :class="{active : selected2 === item.id}"><span>{{item.name}}</span></li> </ul> <ul class="disJuli"> <li class="addList" v-for="(item,index) in showDistrictList" @click="chooseQu(item)" :key="index" :class="{active : selected3 === item.id}"><span>{{item.name}}</span></li> </ul> </div> </section> <!-- 地址三级联动选项 end--> <div class="layout" :class="{layoutBg:islayout}" @click="closeAdd()"></div> <loading :show="isShowLoading" text=""></loading> </div> </template> <script> import { Group, XInput, PopupPicker ,Toast , Loading } from 'vux' import qs from 'qs' import md5 from 'md5-node' // 这个是为了使用md5加密引入的 import Exif from 'exif-js' //在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题引入了exif去判断拍照时的信息再去处理图片 可以直接通过npm 安装这个插件 export default{ components: { Group, XInput, PopupPicker, Toast, Loading }, data () { return { teamAddress : '', // 球队地址 sportsTypeId: [], //球队类型数组 list: [], avator: '', // 保存上传队徽的图片文件 defaultImg: 'this.src="' + require('../../assets/img/uploadImg.jpg') + '"', avatorImg: '', //队徽图片 teamName: '', // 球队名称 createType: null, //进入创建球队的页面 1.选择参赛球队 2.我的球队 showAddress: false, isShowClear: false, // 是否显示清除按钮 islayout: false, istoggHeight: false, provinces: [], showCityList: [], showDistrictList: [], // 点击选中省市区 selected1: null, selected2: null, selected3: null, // 点击省市区高亮名 curProName: '', curCityName: '', curDistrictName: '', chooseProName: '', chooseCityName: '', chooseDistrictName: '', isChooseAddressAll: false, //地区选择确定按钮的显示,省市区全部选择后才会显示 isShowLoading: false, } }, created() { this.chooseInit(); var _this = this; var timeStamp = new Date().getTime(); var randomKey = Math.random(); var sign = getSign('1.0.0',timeStamp,randomKey,{},md5); // 球队类型接口 this.axios({ method: 'GET', url: `这里存放其对类型接口地址`, headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Request-AppType': 'public', 'X-Request-Id': 've.shareh5', 'X-Request-AppVersion': '1.0.0', 'X-Request-Time': timeStamp, 'X-Request-Nonce': randomKey, 'X-Request-Sign': sign, 'X-Request-Token':localStorage.token } }) .then(function (res) { let sportsType = []; let data = res.data.data; data.map(item => { const newObj={ name: String(item.comment), value: String(item.val) } sportsType.push(newObj); }) let newArr = [sportsType] _this.list = newArr; }) }, methods:{ // 点击back按钮 clickBack(){ this.$router.go(-1) }, chooseInit(){ // 获取三级城市联动数据 // 通过省份接口获取省份 var _this = this; var timeStamp = new Date().getTime(); var randomKey = Math.random(); var sign = getSign('1.0.0',timeStamp,randomKey,{},md5); this.axios({ method: 'GET', url: `通过省份接口获取省份`, headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Request-AppType': 'public', 'X-Request-Id': 've.shareh5', 'X-Request-AppVersion': '1.0.0', 'X-Request-Time': timeStamp, 'X-Request-Nonce': randomKey, 'X-Request-Sign': sign, 'X-Request-Token':localStorage.token } }) .then(function (res) { _this.provinces = res.data.data; }) }, choseAdd: function () { // 选择地址弹层,打开弹层 this.islayout = true this.istoggHeight = true }, closeAdd: function () { // 关闭弹层 this.istoggHeight = false this.islayout = false }, //球队输入框失去焦点事件 teamNameBlur() { this.isShowClear = false }, //球队输入框获取焦点事件 teamNameFocus() { this.isShowClear = true; }, // 清除input内容 clearInputText () { this.teamName = '' if (this.teamName !== '') { this.isShowClear = true } else { this.isShowClear = false } }, //获取图片文件 handleFile(e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.avator = e.target.files[0]; this.imgPreview(this.avator); }, /** * 将以base64的图片url数据转换为Blob * @param urlData 图片base64数据 * @name convertBase64UrlToBlob */ convertBase64UrlToBlob(urlData) { var bytes=window.atob(urlData.split(',')[1]); //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : 'image/*'}); }, imgPreview(file){ let that = this; let Orientation; // //去获取拍照时的信息,解决拍出来的照片旋转问题 // console.log(file) Exif.getData(file, function(){ Orientation = Exif.getTag(this, 'Orientation'); }); // 看支持不支持FileReader if (!file || !window.FileReader) return; if(/^image/.test(file.type)){ let reader = new FileReader(); reader.readAsDataURL(file); // console.log(reader) reader.onload = function(e) { // console.log(e); let img = new Image(); img.src = this.result; //图片不能超过2M // console.log("resultLen:"+this.result.length); if (this.result.length <= (100 * 1024)) { // that.$vux.toast.text("图片不能超过2M"); // return false; that.avatorImg =this.result; }else { img.onload = function () { let data = that.compress(img,Orientation); that.avatorImg = data; } } } } }, rotateImg (img, direction,canvas) { //最小与最大旋转方向,图片旋转4次后回到原方向 const min_step = 0; const max_step = 3; if (img == null)return; //img的高度和宽度不能在img元素隐藏后获取,否则会出错 let height = img.height; let width = img.width; let step = 2; if (step == null) { step = min_step; } if (direction == 'right') { step++; //旋转到原位置,即超过最大值 step > max_step && (step = min_step); } else { step--; step < min_step && (step = max_step); } //旋转角度以弧度值为参数 let degree = step * 90 * Math.PI / 180; let ctx = canvas.getContext('2d'); switch (step) { case 0: canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0); break; case 1: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, 0, -height); break; case 2: canvas.width = width; canvas.height = height; ctx.rotate(degree); ctx.drawImage(img, -width, -height); break; case 3: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, -width, 0); break; } }, //压缩图片 compress(img,Orientation) { let canvas = document.createElement("canvas"); let ctx = canvas.getContext('2d'); //瓦片canvas let tCanvas = document.createElement("canvas"); let tctx = tCanvas.getContext("2d"); let initSize = img.src.length; let width = img.width; let height = img.height; //如果图片大于四百万像素,计算压缩比并将大小压至400万以下 let ratio; if ((ratio = width * height / 4000000) > 1) { // console.log("大于400万像素") ratio = Math.sqrt(ratio); width /= ratio; height /= ratio; } else { ratio = 1; } canvas.width = width; canvas.height = height; // 铺底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); //如果图片像素大于100万则使用瓦片绘制 let count; if ((count = width * height / 1000000) > 1) { // console.log("超过100W像素"); count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片 // 计算每块瓦片的宽和高 let nw = ~~(width / count); let nh = ~~(height / count); tCanvas.width = nw; tCanvas.height = nh; for (let i = 0; i < count; i++) { for (let j = 0; j < count; j++) { tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); } } } else { ctx.drawImage(img, 0, 0, width, height); } //修复ios上传图片的时候 被旋转的问题 if(Orientation != "" && Orientation != 1){ switch(Orientation){ case 6://需要顺时针(向左)90度旋转 this.rotateImg(img,'left',canvas); break; case 8://需要逆时针(向右)90度旋转 this.rotateImg(img,'right',canvas); break; case 3://需要180度旋转 this.rotateImg(img,'right',canvas);//转两次 this.rotateImg(img,'right',canvas); break; } } //进行最小压缩 let ndata = canvas.toDataURL('image/jpeg', 0.1); // let ndata = canvas; // console.log('压缩前:' + initSize); // console.log('压缩后:' + ndata.length); // console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%"); tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; return ndata; }, //触发图片输入框的点击 setAvatar() { this.$refs.avatarInput.click(); }, // 获取省份函数,通过点击省份得到市,然后通过点击市获取县 chooseProvience(item,type) { var _this = this; if(type === 1){ if(item.id === _this.selected1){ //点击过后,再去点击已经点击过的省或者县达到拦截请求 return false; } _this.selected1 = item.id; }else{ if(item.id === _this.selected2){ return false; } _this.selected2 = item.id } // _this.selected1 = type === 1 ? item.id; // 获取市县 var timeStamp = new Date().getTime(); var randomKey = Math.random(); var sign = getSign('1.0.0',timeStamp,randomKey,{pid:item.id},md5); _this.axios({ method: 'get', url: `获取市和区的接口`, headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Request-AppType': 'public', 'X-Request-Id': 've.shareh5', 'X-Request-AppVersion': '1.0.0', 'X-Request-Time': timeStamp, 'X-Request-Nonce': randomKey, 'X-Request-Sign': sign, 'X-Request-Token':localStorage.token }, params:{ pid:item.id } }) .then(function (res) { if (type === 1) { // console.log(res.data) // 获取当前省 下的所有市 _this.showCityList = ''; _this.showDistrictList = ''; _this.twoac = true; _this.twoshow = true; _this.selected2 = ''; _this.selected3 = ''; _this.showCityList = res.data.data; _this.isChooseAddressAll = false; // 获取选中的省 _this.chooseProName = item.name; // console.log(_this.curProName); } else if (type === 2) { // 当前市下的所有区 _this.showDistrictList = ''; _this.selected3 = ''; _this.threeshow = true; _this.threeac = true; _this.showDistrictList = res.data.data; _this.isChooseAddressAll = false; // 获取选中的市 _this.chooseCityName = item.name } // console.log(res.data); }) }, // 获取所选区 chooseQu(item){ this.selected3 = item.id this.chooseDistrictName = item.name this.isChooseAddressAll =true; }, // 地址弹窗确定按钮 determine() { this.curProName = this.chooseProName ; this.curCityName = this.chooseCityName; this.curDistrictName = this.chooseDistrictName; // this.teamAddress = this.curProName +this. curCityName + this.curDistrictName; this.teamAddress = this. curCityName + this.curDistrictName; this.istoggHeight = false; this.islayout = false; this.isChooseAddressAll =false; }, // 地址取消确定按钮 cancleAddress() { this.istoggHeight = false; this.islayout = false; }, // 验证球队类型 validateTeamType () { if (this.sportsTypeId.length <= 0) { this.$vux.toast.text('球队类型不能为空'); return false; }else{ return true; } }, // 验证球队类型 validateLogo () { // console.log(this.sportsTypeId.length); if (this.avatorImg === '') { this.$vux.toast.text('请上传队徽'); return false; }else{ return true; } }, // 验证名称,只能输入2-20个字 validateTeamName () { if (this.teamName === '') { this.$vux.toast.text('球队名称不能为空'); return false } else { // 测试修改后 let flag = /^[\u4e00-\u9fa5\w-]{2,20}$/.test(this.teamName); if (!flag) { this.$vux.toast.text('请输入2-20个字的球队名称'); return false; }else{ return true; } } }, // 验证地址 validateTeamAddress () { if (this.teamAddress === '') { this.$vux.toast.text('请选择球队所属地区'); return false } else { return true; } }, // 创建球队按钮 addTeam() { var _this = this; if(_this.validateLogo() && _this.validateTeamType() && _this.validateTeamName() && _this.validateTeamAddress() ){ _this.isShowLoading = true; let param = new FormData(); //创建form对象 // 为form添加参数 param.append('logo',_this.convertBase64UrlToBlob(_this.avatorImg)); param.append('name',_this.teamName); param.append('province',_this.curProName); param.append('sportType',_this.sportsTypeId[0]); param.append('city',_this.curCityName); param.append('district',_this.curDistrictName); var timeStamp = new Date().getTime(); var randomKey = Math.random(); var sign = getSign('1.0.0',timeStamp,randomKey,{},md5); // 创建球队接口 _this.axios({ method: 'post', url: `创建球队接口`, // 一般的也是上传接口 data: param, headers: { 'Content-Type': "multipart/form-data", 'X-Request-AppType': 'public', 'X-Request-Id': 've.shareh5', 'X-Request-AppVersion': '1.0.0', 'X-Request-Time': timeStamp, 'X-Request-Nonce': randomKey, 'X-Request-Sign': sign, 'X-Request-Token':localStorage.token } }) .then(function (res) { if(res.data.status == 1){ _this.isShowLoading = false; _this.$vux.toast.text("创建球队成功"); }else{ _this.$vux.toast.text("创建球队成功"); _this.$router.go(-1) } }else{ _this.isShowLoading = false; _this.$vux.toast.text(res.data.tip); } }) } } } } </script> <style lang="scss"> #team-create{ background: #edf1f6; .app-header{ .icon-fanhui{ left: 0; padding: 0 0.12rem; } .icon-quxiao{ left: 0; padding: 0 0.12rem; } } .team-create-mainBox{ position: relative; background: #fff; .upload{ padding-top: 0.36rem; height: 1.75rem; box-sizing: border-box; .team-logo{ width: 0.75rem; height: 0.75rem; border-radius: 50%; margin: 0 auto; input{ display: none; } img{ display: block; width: 0.75rem; height: 0.75rem; border-radius: 50%; } // .icon-tianjiatouxiang{ // width: 0.75rem; // height: 0.75rem; // display: block; // font-size: 0.75rem; // color: #d3d3d3; // border-radius: 50%; // } } p{ margin-top: 0.1rem; font-size: 0.16rem; color: #011013; text-align: center; } } .team-create-info{ .sameInputDiv{ border-top: 1px solid #edf1f6; } .inputdiv{ padding: 0 15px; height: 0.5rem; line-height: 0.5rem; position: relative; display: flex; label{ display: block; width: 4.5em; text-align: left; margin-right: 2em; float: left; font-size: 0.14rem; color: #333333; } input{ flex: 1; border: none; outline: none; line-height: 0.2rem; font-size: 0.14rem; color: #333333; background: none; opacity: 1; -webkit-text-fill-color:#333; -webkit-opacity:1; opacity: 1; } input::-webkit-input-placeholder{ font-size: 0.14rem; color: #d3d3d3 !important; -webkit-text-fill-color:#d3d3d3; } input:-ms-input-placeholder{ font-size: 0.14rem; color: #d3d3d3 !important; -webkit-text-fill-color:#d3d3d3; } input::-moz-placeholder{ font-size: 0.14rem; color: #d3d3d3 !important; -webkit-text-fill-color:#d3d3d3; } &.teamName{ span{ position: absolute; right: 15px; display: block; line-height: 0.5rem; top: 0; color: #999999; font-size: 0.1rem; } } &.addressSelect{ .addressSelect-input{ flex: 1; position: relative; input{ width: 100%; } em{ display: block; height: 0.5rem; position: absolute; left: 0; top: 0; width: 100%; } } } } .inputdiv::after{ content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; color: #D9D9D9; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .teamType{ position: relative; .vux-cell-value{ color: #333 !important; } .weui-cells:before{ border-top: none; } .weui-cells::after{ border-bottom: none !important; } } i{ position: absolute; right: 15px; display: block; line-height: 0.5rem; top: 0; color: #999999; font-size: 0.1rem; } .weui-cells{ margin-top: 0; .weui-cell{ padding: 0 15px !important; line-height: 0.5rem !important; line-height: 0.5rem !important; } .weui-label{ text-align: left !important; font-size: 0.14rem; color: #333333; } .vux-popup-picker-placeholder{ font-size: 0.14rem; color: #d3d3d3; } .vux-popup-picker-value{ font-size: 0.14rem; color: #d3d3d3; } .weui-input{ font-size: 0.14rem; color: #d3d3d3; } .weui-input::-webkit-input-placeholder{ color: #d3d3d3; } .weui-cell{ padding: 13px 15px; } .weui-cell::before{ left: 0; } .vux-cell-box::before{ left: 0; } .weui-cell__ft{ display: none; } } } } .team-create-point{ margin-top: 0.11rem; padding: 0 0.12rem 0 0.34rem; font-size: 0.12rem; color: #666666; line-height: 0.18rem; position: relative; .icon-tishi{ font-size: 0.14rem; position: absolute; left: 0.12rem; color: #999999; } } .team-create-btn{ display: block; width: 2rem; height: 0.4rem; line-height: 0.4rem; text-align: center; background: #0cb0eb; border:none; border-radius: 0.4rem; font-size: 0.16rem; color: #ffffff; margin: 1rem auto 0; padding: 0; bottom: 0.5rem; outline: none; } .address{ position:absolute; bottom:0; left:0; z-index:121; background:#fff; width:100%; height: 0; overflow: hidden; transition: height .5s; &.toggHeight{ height: 3.7rem; } .title{ overflow: hidden; height: .52rem; border-bottom: .01rem solid #d3d3d3; .area{ float: left; display:inline-block; font-size:0.16rem; height: .4rem; line-height:.4rem; margin-left:0.3rem; color:#262e31; margin-top: .1rem; max-width: calc(100% - 80%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cancle{ float: left; height: .52rem; line-height: .52rem; color: #333333; margin-left: .3rem; font-size: .18rem; } .determine{ float: right; height: .52rem; line-height: .52rem; margin-right: .3rem; color: #333; font-size: .18rem; } } .address-box{ display: flex; flex-direction: row; height: calc(100% - .52rem); } .addList{ margin-left: .22rem; font-size:0.16rem; line-height:0.4rem; color:#262e31; } ul{ flex: 1; // width: 33.3333%; height: 100%; overflow:auto; // float: left; li{ padding: 0 0.06rem; &.active{ color:#0cb0eb; } } } } .layout{ width:100%; height:100%; position:fixed; top:0; left:0; z-index:120; opacity: 0; transition: all .5s; background:rgb(53, 58, 60); visibility: hidden; &.layoutBg{ opacity: .7; visibility: visible; } } } .vux-popup-header-right{ color: #0cb0eb !important; } </style>
相关文章推荐
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
- vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
- JS前端上传图片、压缩、并且处理旋转问题,生成base64数据
- H5技术完美实现调用手机摄像头、相册。图片上传base64,图片压缩、预览、删除以及图片旋转90度的处理--demo。
- JS前端上传图片、压缩、并且处理旋转问题,生成base64数据
- webApp上传图片旋转90度及图片压缩问题处理(备忘)
- vuejs组件分享H5图片上传、压缩,拍照旋转
- js上传图片处理:压缩,旋转校正图片
- vue2移动端上传,预览,压缩图片,解决拍照旋转问题
- 前端input图片的上传和压缩以及图片旋转90度问题解决
- python3.6深度学习图片集处理项目源代码(为cnn等准备图片集合,批量生成、删除、改名、旋转、调整图片大小,包括删除指定路径下所有文件)
- jquery mobile上传图片完整例子(包含ios图片横向问题处理和C#后台图片压缩)
- H5移动端下html上传图片被旋转问题(转)
- 前端解决手机拍照旋转问题及图片压缩上传
- 处理用户上传图片大小不一,前台显示的问题
- 一些手机图片压缩处理后会出现旋转问题(三星)的解决方法
- [iOS 拍照上传] 上传图片 旋转 + 压缩大小
- vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
- 一般处理程序上传图片压缩图片大小