Bladeren bron

修改 调用相机组件,可以选择也可实时拍照

gaoxiong 1 jaar geleden
bovenliggende
commit
f952d3cecf
2 gewijzigde bestanden met toevoegingen van 38 en 5 verwijderingen
  1. 18 2
      src/components/upload/gxuploader.vue
  2. 20 3
      src/components/upload/index.vue

+ 18 - 2
src/components/upload/gxuploader.vue

@@ -12,10 +12,21 @@
         :show-upload="false"
         :max-size="maxSize * 1024*1024"/>
     </div>
-    <div  class="van-uploader__upload" @click="useCamera(1)">
+    <div  class="van-uploader__upload" @click="selectCameraHandler()">
       <i class="van-icon van-icon-photograph van-uploader__upload-icon">
       </i>
     </div>
+    <van-popup
+      v-model="selectCamera"
+      position="bottom"
+      :style="{ height: '20%' }"
+    >
+      <van-cell-group>
+        <van-cell icon="photograph" title="拍照" @click="useCamera(1)" />
+        <van-cell icon="photo" title="从相册选择" @click="useCamera(2)" />
+        <van-cell icon="clear" title="取消" @click="selectCamera = false" />
+      </van-cell-group>
+    </van-popup>
   </div>
 </template>
 <script>
@@ -45,7 +56,8 @@ export default {
       //组件显示用
       fileList: [],
       //上传之后的图片列表,双向绑定之后覆盖fileList
-      imageList: []
+      imageList: [],
+      selectCamera:true
     };
   },
 
@@ -69,6 +81,9 @@ export default {
     }
   },
   methods: {
+    selectCameraHandler() {
+      this.selectCamera = true;
+    },
     openCameraCallBack(data) {
       //alert(data);
       let params = {};
@@ -97,6 +112,7 @@ export default {
       });
     },
     useCamera(actionType) {
+      this.selectCamera = false;
       if(this.fileList.length >= this.maxCount){
         this.$toast('最多上传'+this.maxCount+'张图片')
         return

+ 20 - 3
src/components/upload/index.vue

@@ -27,9 +27,21 @@
         <!-- :before-read="beforeRead"
         :after-read="afterRead" -->
     </div>
-    <div class="van-uploader__upload" @click="useCamera(2)">
-      <i class="van-icon van-icon-photograph van-uploader__upload-icon"> </i>
+    <div  class="van-uploader__upload" @click="selectCameraHandler()">
+      <i class="van-icon van-icon-photograph van-uploader__upload-icon">
+      </i>
     </div>
+    <van-popup
+      v-model="selectCamera"
+      position="bottom"
+      :style="{ height: '20%' }"
+    >
+      <van-cell-group>
+        <van-cell icon="photograph" title="拍照" @click="useCamera(1)" />
+        <van-cell icon="photo" title="从相册选择" @click="useCamera(2)" />
+        <van-cell icon="clear" title="取消" @click="selectCamera = false" />
+      </van-cell-group>
+    </van-popup>
   </div>
 </template>
 <script>
@@ -62,7 +74,8 @@ export default {
     return {
       fileList: [],
       //上传之后的图片列表,双向绑定之后覆盖fileList
-      imageList: []
+      imageList: [],
+      selectCamera:false
     }
   },
 
@@ -87,7 +100,11 @@ export default {
     }
   },
   methods: {
+    selectCameraHandler() {
+      this.selectCamera = true;
+    },
     useCamera(actionType) {
+      this.selectCamera = false;
       window.openCameraCallBack = null
       window.openCameraCallBack = this.openCameraCallBack
       let parms = {}