# 自定义相机拍照截图

## 属性说明

| 属性名        | 类型       | 默认值                  | 说明                                        |
| ---------- | -------- | -------------------- | ----------------------------------------- |
| tipsText   | String   | ''                   | 提示文案                                      |
| color      | String   | rgba(36, 64, 135, 1) | 主题或按钮颜色                                   |
| @onConfirm | Function |                      | 确认按钮回调， 返回图片临时Url Objecj:{url: 'xxx.jpg'} |

## 示例代码

``` JavaScript
<template>
  <view class="image-box">
    <image v-if="imgUrl" class="img" :src="imgUrl" mode="widthFix" @click.prevent="onPreviewImage" />
    <view v-else class="no-img">暂无图片，请点击下方按钮拍照</view>
  </view>
  <button class="photo-btn" @click="isPhoto = true">开始拍照</button>
  <bcode-camera v-if="isPhoto" @onConfirm="onConfirmCamera"></bcode-camera>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const imgUrl = ref('') // 图片url
const isPhoto = ref(false) // 是否开始拍照

// 拍照确认回调
const onConfirmCamera = (data: { url: string }) => {
  imgUrl.value = data.url
  isPhoto.value = false
  console.log('onConfirmCamera', data)
}

// 预览图片
const onPreviewImage = () => {
  uni.previewImage({
    urls: [imgUrl.value],
    longPressActions: {
      itemList: ['发送给朋友', '保存图片', '收藏'],
      success: function (data) {
        console.log('预览图片', data)
      },
      fail: function (err) {
        console.log(err.errMsg)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.image-box {
  width: 100%;
  height: 700rpx;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;

  .no-img {
    text-align: center;
    color: #999;
  }
}

.photo-btn {
  margin-top: 32rpx;
  width: 80%;
  background-color: #244087;
  color: #fff;
}
</style>

```