// 调取微信摄像头组件 <template>     <camera         v-if="showCamera"         class="camera"         device-position="front"         :flash="flash"         @error="erro"         @stop="stop"     >         <cover-view>             <cover-image class="face-bg-img" :style="{'height': height}" src="/static/img/face-bg.png" />             <cover-view class="take-photo" @click="takePhoto1"></cover-view>         </cover-view> </template> <script> export default {   name: "camera",   props: {     // 传参值     position: {       type: String,       default: "front",     },     flash: {       type: String,       default: "off",     },     quality: {       type: String,       default: "low",     },   },   data() {     return {       showCamera: false,       height: "auto,",     };   },   watch: {     showCamera() {       if (this.showCamera) {         this.$nextTick(() => {           const query = wx.createSelectQuery();           query.select(".face-bg-img").boundingClientRect();           query.exec((res) => {});         });       }     },   },   mounted() {},   methods: {     error() {            },     stop() {            },     // 拍照     takePhoto1() {       let that = this;       const ctx = wx.createCameraContext();       ctx.takePhoto({         quality: this.quality,         success(res) {           console.log("success", res);           this.showCamera = false;         },         fail() {           console.log("failed");         },         complete() {           console.log("complter takePhoto！");         },       });     },   },   // 载入   onLoad() {     this.showCamera = false;   }, }; </script> <style lang="less"> .camera {   position: fixed;   top: 0;   bottom: 0;   left: 0;   right: 0;   z-index: 99;   .face-bg {     width: 100%;     height: 100%;     .take-photo {       position: absolute;       left: 50%;       bottom: 50px;       width: 80px;       height: 80px;       border-radius: 50%;       background-color: rgba(255, 255, 255, 0.5);       transform: translateX(-50%);       display: flex;       align-items: center;       justify-content: center;     }     .face-bg-img {       display: block;       width: 100%;       height: 100%;     }   } } </style>