From 96cd6c4657ac4d5e175a58bb92da7302e435b066 Mon Sep 17 00:00:00 2001 From: zhaoxiaoqiang <287285524@qq.com> Date: Mon, 14 Nov 2022 09:15:05 +0800 Subject: [PATCH] v-console --- src/components/upload/uploadIdCard.vue | 71 +++++++++++++++++++++-------------- 1 files changed, 43 insertions(+), 28 deletions(-) diff --git a/src/components/upload/uploadIdCard.vue b/src/components/upload/uploadIdCard.vue index b0943b9..b3e7c54 100644 --- a/src/components/upload/uploadIdCard.vue +++ b/src/components/upload/uploadIdCard.vue @@ -1,7 +1,7 @@ <!-- * @Date: 2019-08-30 18:04:49 * @LastEditors: zxq - * @LastEditTime: 2022-08-05 14:35:52 + * @LastEditTime: 2022-08-05 15:27:35 * @Description: --> <template> @@ -20,23 +20,8 @@ </div> <!-- 真正的上传按钮--> <div> - <input - style="display: none;cursor:pointer" - type="file" - id='inputFileImage' - ref="androidInputFileImage" - @change="handlePhotoChange($event,1)" - accept="image/jpg, image/jpeg, image/png" - /> - <input - style="display: none;cursor:pointer;" - type="file" - id='inputFileCapture' - ref="androidInputFileCapture" - @change="handlePhotoChange($event,2)" - accept="image/*" - capture="camera" - /> + + </div> <!--选择上传图片还是拍照--> <!-- <van-action-sheet @@ -46,9 +31,31 @@ :actions="nav" @select="handleMenuSelect" ></van-action-sheet> --> - <van-action-sheet v-model="selectModel" cancel-text="取消" title="标题"> - <div v-for="item in nav" :key="item.code" class="content"> - <span @click="handleMenuSelect(item.code)">{{item.name}}</span> + <van-action-sheet v-model="selectModel" cancel-text="取消"> + <div class="content"> + <div class="upload_input" @click="handleMenuSelect"> + <div>拍照</div> + <input + style="cursor:pointer;width:100%;opacity:0;" + type="file" + id='inputFileCapture' + ref="androidInputFileCapture" + @change="handlePhotoChange($event,2)" + accept="image/*" + capture="camera" + /> + </div> + <div class="upload_input" @click="handleMenuSelect"> + <div>本地相册上传</div> + <input + style="cursor:pointer;width:100%;opacity: 0;" + type="file" + id='inputFileImage' + ref="androidInputFileImage" + @change="handlePhotoChange($event,1)" + accept="image/jpg, image/jpeg, image/png" + /> + </div> </div> </van-action-sheet> <!-- <button @click="onclick">aa</button> --> @@ -103,6 +110,7 @@ ...mapMutations([SET_APP_LOADING]), // 处理图片上传的事件(deleteIndex---删除图片的索引) handlePhotoChange: function(evt,type) { + this.selectModel = false; let that = this; let shebei = this.judgeBrand(navigator.userAgent.toLowerCase()); that.SET_APP_LOADING(true); @@ -318,12 +326,6 @@ }, // 选择拍照或者相册选项 handleMenuSelect(index) { - console.log( this.$children[0] ) - if (index === 0) { - this.$refs.androidInputFileCapture.click(); - } else { - this.$refs.androidInputFileImage.click(); - } this.selectModel = false; }, // 处理图片的删除 @@ -365,8 +367,21 @@ }; </script> -<style lang="less" scoped > +<style lang="less" > .component-photo-upload { + .upload_input{ + width: 100%; + font-size: 16px; + position: relative; + text-align: center; + padding: 8px 0; + margin:10px 0; + input{ + position: absolute; + left: 0; + top: 0; + } + } .pic-title { h4 { padding: 10px 0; -- Gitblit v1.8.0